我可以使用 Charts.js 工具生成折线图。有两个数据集,分别是 2014 年和 2015 年。工具提示仅显示每月值,而不显示数据集值。如何启用它? tooltipTemplate
和 multiTooltipTemplate
都无法解决这个问题。我也需要显示年份。
这是 JavaScript 代码。
<script>
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ],
datasets: [
{
label: "2015",
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: [3, 7, 2, 0, 1, 0, 1, 3, 8, 0, 1, 0]
},
{
label: "2014",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [3, 2, 3, 4, 0, 3, 2, 3, 0, 1, 1, 5]
}
]
};
window.onload = function(){
document.getElementById("myChart").width = window.innerWidth;
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data);
}
</script>
这是html代码
<canvas id="myChart" width="400" height="400" ></canvas>
最佳答案
在工具提示模板中使用datasetLabel
:
var options = {
multiTooltipTemplate: "<%= datasetLabel %>: <%= value %>"
}
var myLineChart = new Chart(ctx).Line(data, options);
这是一个工作 jsfiddle .
关于javascript - 在 Chart.js 行中显示数据集标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35289855/