如何从Chart.js添加折线图的自定义标签?

时间:2017-04-22 14:05:53

标签: javascript charts chart.js data-visualization

让我们想象一下,我在09-04-2017的应用程序中引入了新版本的todo列表。我正在获得调查结果,询问用户对该待办事项列表的费率和意见。我想看看从那一天开始的利率。请告诉我如何从chart.js插件添加线图的其他自定义标签。我会得到这样的东西:

enter image description here

我希望看到鼠标在它上面时的文字,如果点会在曲线上显示,甚至连接那两个点的浅灰色虚线也会很棒。这可能在chart.js中吗?或者你可能知道其他一些插件可以做到吗?

我的基本折线图如下所示:



logging

var canvas = document.getElementById('myChart');
var data = {
    labels: ["March Week 1", "March Week 2", "March Week 3", "March Week 4", "April Week 1", "April Week 2", "April Week 3", "April Week 4"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [49, 51, 48, 52, 56, 73, 77, 73, 74],
        }
    ]
};
var option = {
	scales: {
  	yAxes:[{
    		stacked:true,
        gridLines: {
        	display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
    		gridLines: {
        	display:false
        }
    }]
  }
};

var myBarChart = Chart.Line(canvas,{
	data:data,
  options:option
});




请求帮助,

亚瑟

0 个答案:

没有答案