您好我想在我的条形图中添加一条水平线。这是我的图表代码:
var singleBarOptions = {
scaleBeginAtZero: true,
scaleShowGridLines: true,
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleGridLineWidth: 1,
barShowStroke: true,
barStrokeWidth: 1,
barValueSpacing: 5,
barDatasetSpacing: 1,
responsive: true
};
var singleBarData = {
labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
datasets: [
{
label: "My Second dataset",
fillColor: "rgba(0,191,255,0.5)",
strokeColor: "rgba(0,191,255,0.8)",
highlightFill: "rgba(100,149,237,0.75)",
highlightStroke: "rgba(100,149,237,1)",
data: [60, 50, 40, 30, 20, 10, 20]
}
]
};
var ctx = document.getElementById("singleBarOptions").getContext("2d");
var myNewChart = new Chart(ctx).Bar(singleBarData, singleBarOptions);
有没有简单的方法来绘制这条线? 如果我稍后可以改变线的位置也会很好。
stackoverflow上有解决方案,但他们不会处理设置。
答案 0 :(得分:0)
是的,使用Annotations插件:Chart.Annotation.js
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '26',
borderColor: 'tomato',
borderWidth: 1
}],
drawTime: "afterDraw" // (default)
}
结果:
Codepen:Chart.js Annotations BarChart
注意:我使用的是V 2.2.1,我的语法是我以前的版本,所以我只使用你的数据和一些选项。