在Chart.js行中显示数据集标签

Question

我能够使用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>

​

​

Answer 1

在工具提示模板中使用datasetLabel：

var options = {
    multiTooltipTemplate: "<%= datasetLabel %>: <%= value %>"
}
var myLineChart = new Chart(ctx).Line(data, options);

这是一个工作的小提琴。

Answer 2

您使用的是什么版本的chart.js？

我可以确认工具提示使用v1.0.1-beta2工作。

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script>

但是不要使用0.2.0版本。

版本1.0.1-beta2 2可从cdnjs获得。