라인 효과에서 호버 기능을 갖춘 Jqplot 선 그래프

Question

y 축을 양과 x 축을 날짜로하는 jqplot 선 그래프가 있습니다. 그래프의 선 위로 가져 가면 표시되는 금액에 대한 세부 정보를 작성해야합니다. 아무도 모른다면 다시 재생하십시오. 고맙습니다 ...

Answer 1

형광 표시기 플러그인을 사용해 보셨습니까?

http://www.jqplot.com/deploy/dist/examples/cursor-highlighter.html

<script type="text/javascript" src="../jquery.min.js"></script> 
<script type="text/javascript" src="../jquery.jqplot.min.js"></script> 
<script type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script> 
<script type="text/javascript" src="../plugins/jqplot.cursor.min.js"></script> 
<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script> 
<link rel="stylesheet" type="text/css" hrf="../jquery.jqplot.min.css" /> 

$(document).ready(function(){ 
var line1=[['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84], 
    ['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56], 
    ['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]]; 
var plot1 = $.jqplot('chart1', [line1], { 
    title:'Data Point Highlighting', 
    axes:{ 
    xaxis:{ 
     renderer:$.jqplot.DateAxisRenderer, 
     tickOptions:{ 
     formatString:'%b&nbsp;%#d' 
     } 
    }, 
    yaxis:{ 
     tickOptions:{ 
     formatString:'$%.2f' 
     } 
    } 
    }, 
    highlighter: { 
    show: true, 
    sizeAdjust: 7.5 
    }, 
    cursor: { 
    show: false 
    } 
}); 
});