Jqplot - 荧光笔显示工具提示,其中包含来自多个y轴的数据

时间:2012-12-05 13:48:59

标签: javascript jquery css graph jqplot

我正在使用JqPlot。

这是我的fiddle,下面是我的截图。我使用两个y轴。在左边的y轴上,我有我的收入,在我的右边y轴上,我有我的页面浏览量。

现在悬停在线上,我想在工具提示中显示视图和收入,如下例所示,我一次只能从2个轴获取数据。

有什么想法吗?

enter image description here

以下是我的代码

$(document).ready(function () {

  $.jqplot.config.enablePlugins = true;

  s1 = [['23-May-08',1, 11],['24-May-08',4, 14],['25-May-08',2, 22],['26-May-08', 6, 26]];
  s2 = [['23-May-08',11, 1],['24-May-08',14, 4],['25-May-08',22, 2],['26-May-08', 26, 6]];

  plot1 = $.jqplot('chart',[s1, s2],{
     title: 'Highlighting, Dragging, Cursor and Trend Line',
     axes: {
         xaxis: {
             renderer: $.jqplot.DateAxisRenderer,
             tickOptions: {
                 formatString: '%#m/%#d/%y'
             },
             numberTicks: 4
         },
         yaxis: {
             tickOptions: {
                 formatString: '$%.2f'
             }
         }
     },
     highlighter: {
         show:true,
     },
     cursor: {
         show: true
     },
      series: [
        {
            lineWidth: 2,
            highlighter: { formatString: "<div style='background-color:white; border:1px #ddd solid; width:220px; height:60px'>%s . Views : %s Revenue : %s </div>" }
        },
        {
            yaxis: 'y2axis',
            highlighter: { formatString: "<div style='background-color:white; border:1px #ddd solid; width:220px; height:60px'>%s . Views : %s Revenue : %s </div>" }
        }]
  });
});​

2 个答案:

答案 0 :(得分:10)

以下是我所做的,我使用了tooltipContentEditor的{​​{1}}属性。查看updated fiddle here

enter image description here

highlighter

答案 1 :(得分:1)

取代

plot.data[seriesIndex][pointIndex]

使用此

plot.series[seriesIndex].data[pointIndex]

因为plot.data保存用户指定的数据(可能是未排序的)

和plot.series保存绘制的数据(如果sortdata为true,则可以对其进行排序,这是默认值)。