如何在flot图表文本数据中将x轴值设置为工具提示

我尝试使用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 %x was $%y", 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 + " – "); }); 

当hover值时，工具提示显示“您的％x的销售额为2美元”而不是它应该显示Your sales for Aug 06 was $2这里我应该如何将x轴值作为工具提示传递给flot图表？ 我在这方面做错了什么。 好心劝告 ？

Answer 1

解决问题的最简单方法是使用回调替换content字符串：

 tooltipOpts : { content : getTooltip, defaultTheme : false }, 

我定义了getTooltip来获得你想要的输出：

 function getTooltip(label, x, y) { return "Your sales for " + x + " was $" + y; } 

正如您在更新的jsFiddle中所看到的那样 ，它可以正常工作 ，但您可能需要在评论中考虑船长的建议，并了解您的情况最佳。

Answer 2

解决方案是使用tooltipOpts – > content方法和回调函数来正确地将动态数据返回到标签。

我发现将第四个参数传递给“tooltipOpts”的回调函数实际上会为您提供构建图表/图形的整个数据对象。 从这里，您可以使用与要提取的标签的索引相同的函数的第二个参数轻松提取X轴标签。

例：

我传递给绘图函数的数据对象：

 [ { 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 } } } 

从上面的数据对象呈现的图表：

正如您在图像预览中看到的那样，用于动态呈现标签内容的逻辑形成了实际数据：

 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 } }