Javascript Chart.js绘制两点之间的直线
在我的图表上(只是一条水平线),我想画第二条水平线。第二条线只是两个任意点之间的一条线。 到目前为止,我还没有画出第二条线。第二行不渲染Javascript Chart.js绘制两点之间的直线,javascript,chart.js,Javascript,Chart.js,在我的图表上(只是一条水平线),我想画第二条水平线。第二条线只是两个任意点之间的一条线。 到目前为止,我还没有画出第二条线。第二行不渲染 // labels (dates) var startDate = new Date('2019-10-01'), endDate = new Date('2019-10-10'); var dt = new Date(startDate); let labels = new Array(); while (dt <= endDate
// labels (dates)
var startDate = new Date('2019-10-01'), endDate = new Date('2019-10-10');
var dt = new Date(startDate);
let labels = new Array();
while (dt <= endDate) {
labels.push(new Date(dt));
dt.setDate(dt.getDate() + 1);
}
const numbers = new Array();
const numbers1 = new Array();
// data for first line (just a horizontal line)
for (var a = 0; a < 10; a++) {
numbers.push(5);
}
// data for the second line, also a horizontal line but smaller
for (var a = 0; a < 10; a++) {
if (a == 3 || a == 7) {
numbers1.push(6);
} else {
numbers1.push(null);
}
}
this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');
// display chart
const myChart = new Chart(this.ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Daily prices',
data: numbers,
fill: false,
borderWidth: 2,
borderColor: 'black'
}, {
label: 'Pattern',
data: numbers1,
fill: false,
borderWidth: 2,
borderColor: 'red'
}]
},
options: {
elements: {point: {radius: 0}},
responsive: false,
display: true
}
});
}
//标签(日期)
var startDate=新日期('2019-10-01'),endDate=新日期('2019-10-10');
var dt=新日期(起始日期);
让标签=新数组();
而(dtChart.js)在默认情况下不会在非相邻点之间画一条线。这可以在每个数据集上使用以下选项启用:
如果true
,将在无数据或null
数据的点之间绘制线。如果false
,具有NaN
数据的点将在线中创建一个中断
...
{
label: 'Pattern',
data: numbers1,
fill: false,
borderWidth: 2,
borderColor: 'red',
spanGaps: true
}
...