JQplot을 사용하여 그래프를 그립니다. 이제 JQplot의 막대 그래프에서 막대 위에 마우스를 가져 가면 일부 값이 표시됩니다.

Question

JQplot을 사용하여 그래프를 그립니다. 그리고 지금은 일부 값이 표시되어야 막대 그래프의 개별 막대 위에 마우스를 .. PLZ 플러그인에 대한

$(document).ready(function(){ 
    var line1 = [['Content Of The Training', 2.2], ['Relavance Of Training To The Work Place', 3.5], ['Phase Of The Training', 3.2], 
    ['Session Met The Objectives Stated', 3.4], [' The Session Met My Exceptations', 3], 
    ['Overall Ratining On the Training', 3.6]]; 

    var plot1 = $.jqplot('graph1', [line1], { 
    title: 'Rating On Training', 
    series:[{renderer:$.jqplot.BarRenderer}], 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer , 
     tickOptions: { 
     fontFamily: 'Calibri', 
      angle: -30, 
      fontSize: '10pt' 
     } 
    }, 

    axes: { 
     xaxis: { 
     renderer: $.jqplot.CategoryAxisRenderer 
     } 
    }, 
     canvasOverlay: { 
     show: true, 
     objects: [ 
     {horizontalLine: { 
      name: 'pebbles', 
      y: 2.5, 
      lineWidth: 2, 
      color: 'rgb(255, 0, 0)', 
      shadow: true, 
      lineCap: 'butt', 
      xOffset: 0 
     }}, 

     ] 
    } 
    }); 
}); 

다음 링크에서 jplot를 다운로드 ...

이 내 그래프는 다음입니다

으로 도움을 때

http://www.jqplot.com/tests/bar-charts.php

Answer 1

당신은 jqplotDataMouseOver 이벤트를 사용할 수 있습니다. 여기

문서는 : http://www.jqplot.com/deploy/dist/examples/barTest.html

이 예제는 클릭 한 줄에 대한 정보와 #info 컨테이너를 채 웁니다. ev 매개 변수에서 마우스 좌표를 가져 와서 재생할 수 있어야합니다.

$('#graph1').bind('jqplotDataMouseOver', 
    function (ev, seriesIndex, pointIndex, data) { 
       $('#info').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data); 
    } 
); 

또한 당신이 한 번 봐 걸릴 수 : http://www.jqplot.com/docs/files/plugins/jqplot-highlighter-js.html

그것은 툴팁을 활성화하는 방법을 보여줍니다. 그것은 모든 종류의 그래프에서 작동하는지 확실하지 않습니다.