jqPlot 커서가있는 사용자 정의 툴팁 표시

Question

Cursor 플러그인을 사용하여 jqplot 차트에 수직선을 표시합니다. 커서 플러그인의 툴팁에 X 및 Y 값이 표시됩니다.

플롯 포인트에 메타 데이터를 추가하려고합니다.

[x, y, 1337] 여기서, 1337은 메타 데이터이다.

이 메타 데타와 이미 표시된 데이터를 표시하기 위해 커서 플러그인 툴팁을 수정하고 싶습니다.

사용 사례 : 트렌드를 위해 모든 시리즈에서 0-100으로 스케일 된 여러 시리즈가 있습니다. 비 눈금 값을 표시해야합니다.

업데이트 :

내가 그것을 jqplot.cursor.js를 해킹하여 작업있어 한

, 더 좋은 방법이 있나요?

Line 468: function updateToolTip(gridpos, datapos, plot){ 
       // ... 
       s += $.jqplot.sprintf(c.tooltipFormatString, label, sx, sy, data[2]); 

Answer 1

이것은 tooltipContentEditor jqplot 기능을 덮어 쓰는 방법입니다.

highlighter: { 
        show: true, 
        showMarker:true, 
        showTooltip:true, 
        sizeAdjust: 10, 
        tooltipLocation: 'se', 
        tooltipAxes: 'xy', 
        yvalues: 1, 
        formatString:'<table class="jqplot-highlighter"><tr><td>date:</td><td>%s</td></tr><tr><td>PiecesPerHour:</td><td align="right">%s</td></tr></table>', 
        useAxesFormatters: true, 
        tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){ 
         var data = plot.series[seriesIndex].data[pointIndex]; 
         var label = plot.legend.labels[seriesIndex].indexOf('Target') 
         var format = []; 
         //A little formatting to the data before I join it to the Html string 
         if (that.model.get('groupBy')==='month') 
          format[0] = new Date(data[0] + 1000*60*60*24).format('mmmm yyyy'); 
         else 
          format[0] = new Date(data[0]).format('mmmm dd, yyyy'); 
         format[1] = new Number(data[1]).toFixed(1) 

         //join the data to the Html string: 
         str = $.jqplot.sprintf.apply($.jqplot.sprintf, [str].concat(format)); 
         return str; 
        } 
       } 

기본적으로 시리즈 및 포인트 데이터를 가져 와서 sprintf를 사용하여 HTML 문자열에 가입시킨 다음 문자열을 반환합니다.