javascript Jqplot - 荧光笔显示带有来自多个 y 轴的数据的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13724716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jqplot - Highlighter show tool tip with data from multiple y axis
提问by Yasser Shaikh
I am using JqPlot.
我正在使用 JqPlot。
Here is my fiddleand below is my screenshot. I am using two y axis. On the left y axis I have my revenue and on my right y axis I have my page views.
这是我的小提琴，下面是我的截图。我正在使用两个 y 轴。在左侧 y 轴上我有我的收入，在我右侧 y 轴上我有我的页面浏览量。
Now on hover on the lines, I want to show both the Views and Revenue in the tooltip, as seen in the example below I am only able to get data from 2 axes at a time.
现在将鼠标悬停在线上，我想在工具提示中同时显示视图和收入，如下例所示，我一次只能从 2 个轴获取数据。
Any thoughts ?
有什么想法吗 ？
Below is my code
下面是我的代码
$(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>" }
}]
});
});?
回答by Yasser Shaikh
Here is what I did, I used the tooltipContentEditorproperty of highlighter. Check out the updated fiddle here.
下面是我做的，我用tooltipContentEditor的财产highlighter。在此处查看更新的小提琴。
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;
}
}
}]
回答by catimos
In place of
代替
plot.data[seriesIndex][pointIndex]
use this
用这个
plot.series[seriesIndex].data[pointIndex]
because plot.data holds the user specified data (which may be unsorted)
因为 plot.data 保存用户指定的数据（可能未排序）
and plot.series holds the plotted data (which may be sorted if sortdata is true which is default).
和 plot.series 保存绘制的数据（如果 sortdata 为 true 则可以对其进行排序，这是默认值）。
