我在谷歌上找到的这个例子，它运行得很好。当我们分别传递x和y值时，会在索引上创建垂直线
example() {
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function () {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
ctx.strokeStyle = 'red';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [12, 3, 2, 1, 8, 8, 2],
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
}],
lineAtIndex: [2,5]
},
};
new Chart('canvas', config);
}
这是我的代码，我正在尝试在图表上创建垂直线。这是显示股市符号表现的财务图表。我必须通过时间和价值观
demochart() {
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function () {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
ctx.strokeStyle = 'red';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'line',
data: {
datasets: [{
label: "My First dataset",
data: [{ x: 1591900200000, y: 1936.88 }, { x: 1592159400000, y: 379.38 },
{ x: 1592245800000, y: 2495.94 }, { x: 1592332200000, y: -938.44 },
{ x: 1592418600000, y: -1697.19 }, { x: 1592505000000, y: -1058.44 },
{ x: 1592764200000, y: 439.38 }, { x: 1592850600000, y: 758.75 }],
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
}],
lineAtIndex: 2
}
};
new Chart('canvas', config);
}
获取正确像素的代码不正确，如果您将其更改为这样，它将起作用：xaxis.getPixelForValue(chart.config.data.datasets[0].data[index].x)
实例：
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(chart.config.data.datasets[0].data[index].x), yaxis.top);
ctx.strokeStyle = 'red';
ctx.lineTo(xaxis.getPixelForValue(chart.config.data.datasets[0].data[index].x), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'line',
data: {
datasets: [{
label: "My First dataset",
data: [{
x: moment(1591900200000),
y: 1936.88
}, {
x: moment(1592159400000),
y: 379.38
},
{
x: moment(1592245800000),
y: 2495.94
}, {
x: moment(1592332200000),
y: -938.44
},
{
x: moment(1592418600000),
y: -1697.19
}, {
x: moment(1592505000000),
y: -1058.44
},
{
x: moment(1592764200000),
y: 439.38
}, {
x: moment(1592850600000),
y: 758.75
}
],
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
}],
lineAtIndex: 2
},
options: {
scales: {
xAxes: [{
type: 'time'
}]
}
}
};
new Chart('chartJSContainer', config);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
</body>