您扩展您使用的图表,然后使用辅助方法编写标签
HTML
<canvas id="myChart" width="500" height="400"></canvas>
在下面的JS中,注意参数calculateY
是 yvalue,同时对于calculateX
,它是标签index
Chart.types.Line.extend({
name: "LineAlt",
draw: function(){
Chart.types.Line.prototype.draw.apply(this, arguments);
this.chart.ctx.textAlign = "center"
// y value and x index
this.chart.ctx.fillText("ZONE1", this.scale.calculateX(3.5), this.scale.calculateY(20.75))
this.chart.ctx.fillText("ZONE2", this.scale.calculateX(11.5), this.scale.calculateY(13))
this.chart.ctx.fillText("ZONE3", this.scale.calculateX(2), this.scale.calculateY(9.75))
this.chart.ctx.fillText("ZONE4", this.scale.calculateX(14.5), this.scale.calculateY(22.75))
}
});
var data = {
labels: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
datasets: [{
data: []
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx).LineAlt(data, {
scaleOverride: true,
scaleSteps: 16,
scaleStepWidth: 1,
scaleStartValue: 8,
animation: false
});
小提琴 -https://jsfiddle.net/bpfvvxpn/ https://jsfiddle.net/bpfvvxpn/
不确定您如何创建折线图,因此没有将其添加到小提琴中