如何在jqplot中自定義圖表工具提示？

我有以下圖表。我需要將MM/DD顯示爲我的x軸標籤。在tooltip我想顯示HH:y-axis數據。如何在jqplot中自定義圖表工具提示？

IE：在下面的圖表中，我想'Oct 15','Oct 16','Oct 17'作爲x軸標籤和工具提示我需要顯示'4.00,4' '6.00,7'等現在我的工具提示顯示x軸標籤本身。

var line1 = [ 
    ['2013-10-15 4:00', 4], 
    ['2013-10-16 6:00', 7], 
    ['2013-10-17 9:00', 6] 
]; 
var plot1 = $.jqplot('firstChart', [line1], { 
    title: 'Server Activity', 
    seriesDefaults: { 
     rendererOptions: { 
      varyBarColor: true, 
      barWidth: 10 
     } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      fontFamily: 'Georgia', 
      fontSize: '10pt', 
      angle: -40 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.DateAxisRenderer, 
      tickOptions: { 
       tickOptions: { 
        mark: 'outside', 
        show: true, 
        showLabel: true, 
        formatString: '%b %d, %Y %H:00', 
        fontSize: 11 
       } 
      }, 
      tickInterval: '1 day' 
     }, 
     yaxis: { 
      min: 0, 
      tickOptions: { 
       mark: 'inside', 
       show: true, 
       showLabel: true, 
       formatString: '%d', 
       fontSize: 11 
      } 
     } 
    }, 
    highlighter: { 
     show: true, 
     sizeAdjust: 7.5 
    }, 
    cursor: { 
     show: false 
    } 
});

來源

2013-10-25 chinnusaccount

嘗試工具提示

highlighter: { 
           tooltipContentEditor: function(current, serie, index, plot){ 
            var val = plot.data[serie][index]; 
            var valArr = val[0].split(" "); 
            return valArr[1] + ', ' + val[1]; 
           } 
          }

來源

2013-10-28 18:05:38

歡迎StackOverflow的下面！你能擴展這個答案一點來解釋它是如何解決原始問題的？這通常會帶來更多有用的答案，特別是當有人在一兩年後出現並在谷歌中找到此答案時。 –

謝謝......這解決了我的問題 – chinnusaccount

您可以使用熒光筆tooltipContentEditor選項

tooltipContentEditor: function tooltipContentEditor(str, seriesIndex, pointIndex, plot) { 
var stringToReturn = '<table class="tooltip-info"> + '<tr><td>'+ '</td></tr>'+ </table>';          
return stringToReturn; 
}

來源

2013-10-25 11:27:02

如何在jqplot中自定義圖表工具提示？

回答

相關問題