我尝试使用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 + " – ");
});
将鼠标悬停在值上时,工具提示将显示“您的%x销售额为$2”,而应显示“您8月6日的销售额为$2”.在这里,我应该如何将x轴值作为浮动提示中的工具提示传递?
我对此做错了.好心的建议 ?
解决方法:
解决问题的最简单方法是将内容字符串替换为回调:
tooltipOpts : {
content : getTooltip,
defaultTheme : false
},
我定义了getTooltip以获取所需的输出:
function getTooltip(label, x, y) {
return "Your sales for " + x + " was $" + y;
}
正如您在updated jsFiddle中所见,它可以正常工作,但您可能需要在评论中考虑船长的建议,并查看最适合您的情况.