Chart.js - 绘制任意垂直线 [英] Chart.js — drawing an arbitrary vertical line
问题描述
如何使用Chart.js在x轴上的特定点绘制垂直线?
特别是,我想画一条线来表示LineChart上的当天。这是图表的模型:
更新 - 这个答案适用于Chart.js 1.x,如果您正在寻找2.x答案,请查看评论和其他答案。
您可以扩展折线图并包含用于在绘图功能中绘制线条的逻辑。
预览
HTML
< div>
< canvas id =LineWithLinewidth =600height =400>< / canvas>
< / div>
脚本
var data = {
labels:[JAN,FEB,MAR,APR,MAY,JUN,JUL, AUG,SEP,OCT,NOV,DEC],
数据集:[{
数据:[12,3,2,1,8,8,2, 2,3,5,7,1]
}]
};
var ctx = document.getElementById(LineWithLine)。getContext(2d);
Chart.types.Line.extend({
name:LineWithLine,
draw:function(){
Chart.types.Line.prototype.draw .apply(this,arguments);
var point = this.datasets [0] .points [this.options.lineAtIndex]
var scale = this.scale
//绘制线
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(point.x,scale.startPoint + 24);
this.chart .ctx.strokeStyle ='#ff0000';
this.chart.ctx.lineTo(point.x,scale.endPoint);
this.chart.ctx.stroke();
//写TODAY
this.chart.ctx.textAlign ='center';
this.chart.ctx.fillText(TODAY,point.x,scale.startPoint + 12);
}
});
new Chart(ctx).LineWithLine(data,{
datasetFill:false,
lineAtIndex:2
});
选项属性lineAtIndex控制在哪一点画线。
小提琴 - http://jsfiddle.net/dbyze2ga/14/ / p>
How can I draw an vertical line at a particular point on the x-axis using Chart.js?
In particular, I want to draw a line to indicate the current day on a LineChart. Here's a mockup of the chart: http://i.stack.imgur.com/VQDWR.png
Update - this answer is for Chart.js 1.x, if you are looking for a 2.x answer check the comments and other answers.
You extend the line chart and include logic for drawing the line in the draw function.
Preview
HTML
<div>
<canvas id="LineWithLine" width="600" height="400"></canvas>
</div>
Script
var data = {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
}]
};
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend({
name: "LineWithLine",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var point = this.datasets[0].points[this.options.lineAtIndex]
var scale = this.scale
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(point.x, scale.endPoint);
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
}
});
new Chart(ctx).LineWithLine(data, {
datasetFill : false,
lineAtIndex: 2
});
The option property lineAtIndex controls which point to draw the line at.
Fiddle - http://jsfiddle.net/dbyze2ga/14/
这篇关于Chart.js - 绘制任意垂直线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!