[英]How to set x axis value as tooltip in flot charts textual data
我尝试在 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 + " – "); });
#section-chart { width: 600px; height: 300px; }
<link href="http://www.flotcharts.org/flot/examples/examples.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.min.js" integrity="sha512-oQJB9y5mlxC4Qp62hdJi/J1NzqiGlpprSfkxVNeosn23mVn5JA4Yn+6f26wWOWCDbV9CxgJzFfVv9DNLPmhxQg==" crossorigin="anonymous"></script> <div id="section-chart" class="demo-placeholder"></div>
将值悬停时,工具提示显示“您的%x销售额为 2 美元”,而应显示Your sales for Aug 06 was $2
这里我应该如何将 x 轴值作为浮图图表中的工具提示传递? 我在这方面做错了什么。 友善的建议 ?
解决问题的最简单方法是用回调替换content
字符串:
tooltipOpts : {
content : getTooltip,
defaultTheme : false
},
我定义了getTooltip
来获得你想要的输出:
function getTooltip(label, x, y) {
return "Your sales for " + x + " was $" + y;
}
它有效,正如您在更新的 jsFiddle 中看到的那样,但您可能需要在评论中考虑船长的建议,并查看最适合您的情况。
解决方案是使用带有回调函数的tooltipOpts -> content方法将动态数据正确返回到标签。
我发现将第四个参数传递给“tooltipOpts”的回调函数实际上为您提供了构建图表/图形的整个数据对象。 从这里,您可以轻松地提取 X 轴标签,使用该函数的第二个参数作为要提取的标签索引。
例子:
我传递给 plot 函数的数据对象:
[
{
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 }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.