Jqplot - 高亮顯示工具提示多軸y的數據

這是我fiddle以下是我的截圖。我正在使用兩個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>" } 
     }] 
    }); 
});

來源

2012-12-05 Yasser

這裏是我做的，我用的highlighter的tooltipContentEditor財產。檢查出updated fiddle here。

enter image description here

series: [ 
{ 
    lineWidth: 2, 
    highlighter: { 
     show: true, 
     tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) { 

      var date = plot.data[seriesIndex][pointIndex][0]; 
      var revenue = plot.data[seriesIndex][pointIndex][3]; 
      var views = plot.data[1][pointIndex][4]; 

      var html = "<div>Date : "; 
      html += date; 
      html += " <br>Money : "; 
      html += revenue; 
      html += " <br>Views : "; 
      html += views; 
      html += " </div>"; 

      return html; 
     } 
    } 
}, 
{ 
    yaxis: 'y2axis', 
    highlighter: { 
     show: true, 
     tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) { 

      var date = plot.data[seriesIndex][pointIndex][0]; 
      var views = plot.data[seriesIndex][pointIndex][5]; 
      var revenue = plot.data[0][pointIndex][6]; 

      var html = "<div>Date : "; 
      html += date; 
      html += " <br>Money : "; 
      html += revenue; 
      html += " <br>Views : "; 
      html += views; 
      html += " </div>"; 

      return html; 
     } 
    } 
}]

來源

2012-12-06 06:05:35 Yasser

您可以從yaxes2如果你想=>'y2axis格式化或隱藏網格：{tickOptions：{showGridline：假}}' – sdespont

代替的

plot.data[seriesIndex][pointIndex]

使用本

plot.series[seriesIndex].data[pointIndex]

因爲plot.data保存用戶指定的數據（其可以是未排序）

和plot.series包含繪製的數據（如果sortdata爲true，則可以對其進行排序，這是默認值）。

來源

2013-01-11 14:53:00 catimos

Jqplot - 高亮顯示工具提示多軸y的數據

回答

相關問題