gpt4 book ai didi

Chart.JS 垂直线与 Moment.JS 水平轴

转载 作者:行者123 更新时间:2023-12-05 05:22:17 25 4
gpt4 key购买 nike

有没有办法使用 Chart.JS 2.0 创建垂直线(事件线、阶段变化)?

我在网上看到了一些示例 (see this related question),但是,当使用 Moment.js 创建水平轴时,不可能给 LineAtIndex 一个 moment.js 日期以在该日期创建一条线。

    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 = '#ff0000';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});

这是一个演示问题的 fiddle : https://jsfiddle.net/harblz/0am8vehg/

我认为我的问题是我没有正确理解这段代码:

var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];

如果我能够解决这个问题,我会在这里发布一个工作 fiddle ,供将来处理同一项目的用户使用。

感谢您花时间阅读本文:)

最佳答案

我尝试了多个插件,但没有一个可以处理具有 time 类型的笛卡尔轴的图表。我相当简单的解决方案:

首先全局注册图表插件:

Chart.plugins.register({
drawLine: function (chart, xValue, color = 'rgba(87,86,86,0.2)') {
const canvas = chart.chart
const context = canvas.ctx

context.beginPath()
context.moveTo(xValue, 6) // top
context.lineTo(xValue, canvas.height - 73) // bottom
context.strokeStyle = color
context.stroke()
},

afterDraw: function (chart) {
const xScale = chart.scales['x-axis-0']

if (chart.options.verticalLine) {
chart.options.verticalLine.forEach((line) => {
const xValue = xScale.getPixelForValue(line)

if (xValue) {
this.drawLine(chart, xValue)
}
})
}
}
})

然后将verticalLine 数组添加到您的图表定义中:

options: {
scales: { xAxes: [{ type: 'time' }] },
verticalLine: ['2019-04-1', '2019-07-01', '2019-10-01'],
}

关于Chart.JS 垂直线与 Moment.JS 水平轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40826734/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com