简体   繁体   English

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

[英]display dataset label in Chart.js line

I am able to generate the line graph using Charts.js tool. 我能够使用Charts.js工具生成折线图。 There are two datasets, for the years 2014 and 2015. The tool tip displays only the monthly value, but not the dataset value. 有2014年和2015年的两个数据集。工具提示仅显示每月值,而不显示数据集值。 How to enable it? 如何启用? Neither tooltipTemplate not multiTooltipTemplate solves it. tooltipTemplate multiTooltipTemplatetooltipTemplate它。 I need to display the years too. 我也要显示年份。 Here is the javascript code. 这是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>

Here is the html code 这是HTML代码

<canvas id="myChart" width="400" height="400" ></canvas>

在此处输入图片说明

Use datasetLabel in the tooltip template: 在工具提示模板中使用datasetLabel

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

Here is a working jsfiddle . 这是一个工作的jsfiddle

What version of chart.js are you using? 您正在使用什么版本的chart.js?

I can confirm that tooltips work using v1.0.1-beta2 我可以确认工具提示可以使用v1.0.1-beta2

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

but do not work using v0.2.0. 但不能使用v0.2.0。

Version 1.0.1-beta2 is available from cdnjs. 可从cdnjs获得1.0.1-beta2版本。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM