Charts Chartjs：可以在折线图中添加阶段吗？

您好，我想创建一个如下所示的动态图表：

ChartJs是否可以在某些里程碑处创建垂直线？（如有可能，还应为每个相位提供另一种颜色）

如果没有，还有哪些库可以处理支持阶段的动态折线图库？

使用可以帮助您做到这一点。它们允许您处理在图表创建过程中触发的特定事件，如

beforeInit

、

afterUpdate

或

afterDraw

，并且易于实现：

var myPlugin={
后置绘图：功能（图表）{
//这将在绘制图表后触发
}
};
Chart.pluginService.register（myPlugin）；

---

一个插件做你正在寻找的将在下面链接，但首先让我解释一下它是如何工作的

在图表选项中，您需要添加一个名为

phases

的新属性，它是一个数组：

//下面的示例并不适用于所有图表
选项：{
比例：{
xAxes：[{
//`from`&`to`必须存在于您的xAxe标记中
阶段：[{
从：“一月”，
致：“三月”，
//您也可以在此处定义颜色
颜色：“蓝色”
},
{
从：“五月”，
致：“六月”，
颜色：“红色”
}]
}]
}
}

然后，这里是使用此信息的插件：

var phasePlugin={
//您需要处理'afterDraw'事件，因为您需要绘制相位边
//一切都画好之后
后置绘图：功能（图表）
{
//插件需要遵循的所有变量。。。
var ctx=chart.chart.ctx；
var xAxeId=chart.config.options.scales.xAxes[0].id；
var xAxe=chart.scales[xAxeId]；
var yAxeId=chart.config.options.scales.yAxes[0].id；
var yAxe=图表.刻度[yAxeId]；
var ticks=xAxe.ticks；
var phases=chart.config.options.scales.xAxes[0].phases；
//对于每个阶段。。。
对于（变量i=0；i

您可以看到一个完全有效的示例，其结果如下：