[英]Chart.js custom tooltipTemplate index
I have this chart made with Chart.js. 我用Chart.js制作了这个图表。
var data = {
labels: ["", "", "", "2015-08-28", "2015-08-29", "2015-08-30", "2015-08-31", ],
websites: ["", "", "", "gamesoutletCrawler", "gamesoutletCrawler", "G2PLAY", "instantgaming", ],
datasets: [{
label: "Best price last 7 days",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [0, 0, 0, 34.5, 36.8, 37.3, 37.99, ]
}]
};
window.onload = function() {
var ctx = document.getElementById("chartkeys").getContext("2d");
window.myLine = new Chart(ctx).Line(data, {
responsive: true,
tooltipTemplate: "<%= data.websites[idx] %>",
scaleLabel: "<%= Number(value).toFixed(2).replace('.', ',') + ' €'%>"
});
}
On my tooltip template, I want to use values from data.websites but I don't know how to pass in the index for my tooltip array. 在我的工具提示模板上,我想使用data.websites中的值,但我不知道如何传入我的tooltip数组的索引。 This is not working:
这不起作用:
<%= data.websites[idx] %>
idx
is wrong, it's not the index the system is using. idx
是错误的,它不是系统使用的索引。 Any idea what I have to write here to show the index tooltip when you hover on the graph? 你知道我在这里写什么来显示你悬停在图表上的索引工具提示吗?
If I write <%= data.websites %>
, it's showing me all the websites in the array, not the one hovered. 如果我写
<%= data.websites %>
,它会显示数组中的所有网站,而不是那个悬停的网站。
You can use a function instead of a template string 您可以使用函数而不是模板字符串
...
tooltipTemplate: function (d) {
return data.websites[data.labels.indexOf(d.label)]
},
...
Note that this requires the labels to be unique, or if there are duplicate labels that it not matter which one is active (for instance, in your data, the first 3 labels are the same but that won't cause any problems because the first 3 entries in the websites
array too are the same. If they were different this method will not work) 请注意,这需要标签是唯一的,或者如果有重复的标签,那么哪个标签是活动的(例如,在您的数据中,前3个标签是相同的,但不会导致任何问题,因为第一个
websites
数组中的3个条目也是相同的。如果它们不同,这个方法将不起作用)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.