javascript 如何在浮图文本数据中将 x 轴值设置为工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18184013/
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
How to set x axis value as tooltip in flot charts textual data
提问by mymotherland
I tried with following code in Flot char to draw a chart. Chart is plotting as expected but not tooltip
我尝试在 Flot char 中使用以下代码绘制图表。图表按预期绘制，但不是工具提示
$(function() {
var data = [["Aug 06",2],["Aug 07",1],["Aug 08",1.5],["Aug 09",0],["Aug 10",0],["Aug 11",0],["Aug 12",0]];
var options = {
series: {
lines: { show: true,
lineWidth: 1,
fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
},
points: { show: true,
lineWidth: 2
},
shadowSize: 0
},
grid: { hoverable: true,
clickable: true,
tickColor: "#eeeeee",
borderWidth: 0,
hoverable : true,
clickable : true
},
tooltip : true,
tooltipOpts : {
content : "Your sales for <b>%x</b> was <span>$%y</span>",
defaultTheme : false
},
xaxis: {
mode: "categories",
tickLength: 0
},
yaxis: {
min: 0
} ,
selection: {
mode: "x"
}
};
$.plot("#section-chart", [ data ], options);
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
When hover the values, tooltip shows "Your sales for %xwas $2" instead it should shows Your sales for Aug 06 was $2Here how should i pass x axis values as tooltip in flot chart?
What i have done wrong on this. kindly advice ?
将值悬停时，工具提示显示“您的%x销售额为2 美元”，而应显示 Your sales for Aug 06 was $2此处我应该如何将 x 轴值作为浮图图表中的工具提示传递？我在这方面做错了什么。友善的建议 ？
回答by Paulo Almeida
The easiest way to solve your problem is to replace the contentstring with a callback:
解决问题的最简单方法是content用回调替换字符串：
tooltipOpts : {
content : getTooltip,
defaultTheme : false
},
I defined getTooltipto get your desired output:
我定义getTooltip为获得您想要的输出：
function getTooltip(label, x, y) {
return "Your sales for " + x + " was $" + y;
}
It works, as you can see in the updated jsFiddle, but you may want to consider the advice of captain, in comments, and see what's best in your case.
它有效，正如您在更新的 jsFiddle 中看到的那样，但您可能需要在评论中考虑船长的建议，并查看最适合您的情况。
回答by Aaron Marton
The solution is using tooltipOpts-> contentmethod with a callback function to properly return dynamic data to the label.
解决方案是使用带有回调函数的tooltipOpts-> content方法将动态数据正确返回到标签。
I figured out that passing a 4th argument to the callback function of the "tooltipOpts" actually gives you the whole data object from which the chart/graph is constructed from. From here, you can easily extract the X axis labels, using the second argument of this same function as the index of the label to extract.
我发现将第四个参数传递给“tooltipOpts”的回调函数实际上为您提供了构建图表/图形的整个数据对象。从这里，您可以轻松地提取 X 轴标签，使用相同函数的第二个参数作为要提取的标签索引。
EXAMPLE:
例子：
Data object I'm passing to the plot function:
我传递给绘图函数的数据对象：
[
{
data: [[1,47478],[2,24500],[3,40177],[4,10512],[5,10512],[6,10512],[7,43439]],
points: { show: true, radius: 3},
splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.4}
}
],
{
colors: ['#0cc2aa'],
series: { shadowSize: 3 },
xaxis: {
show: true,
font: { color: '#ccc' },
position: 'bottom',
ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']],
},
yaxis:{ show: true, font: { color: '#ccc' }, min:1},
grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
tooltip: true,
tooltipOpts: {
content: function(data, x, y, dataObject) {
var XdataIndex = dataObject.dataIndex;
var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
return y + ' impressions for all of your posts on ' + XdataLabel;
},
defaultTheme: false,
shifts: { x: 0, y: -40 }
}
}
Chart rendered from the above data object:
从上述数据对象呈现的图表：
As you can see on the image preview, the logic used to render the label's content dynamically form the actual data is this:
正如您在图像预览中看到的，用于从实际数据动态呈现标签内容的逻辑是这样的：
tooltipOpts: {
content: function(data, x, y, dataObject) {
var XdataIndex = dataObject.dataIndex;
var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
return y + ' impressions for all of your posts on ' + XdataLabel;
},
defaultTheme: false,
shifts: { x: 0, y: -40 }
}
