Chartjs：是否可以在折线图中添加阶段？答案

【问题标题】：Chartjs: Is it possible to add phases in line chart?Chartjs：是否可以在折线图中添加阶段？
【发布时间】：2016-09-15 23:51:26
【问题描述】：

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

ChartJs 是否可以在某些里程碑创建垂直线？（如果可能，也给每个阶段另一种颜色）

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

【问题讨论】：

标签： charts chart.js linechart phase

【解决方案1】：

使用Chart.js plugins 可以帮助您解决这个问题。它们让您可以处理在图表创建期间触发的特定事件，例如 beforeInit、afterUpdate 或 afterDraw，并且也易于实现：

var myPlugin = {
    afterDraw: function(chart) {
        // This will be triggered after the chart is drawn
    }
};

Chart.pluginService.register(myPlugin);

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

在您的图表选项中，您需要添加一个名为 phases 的新属性，它是一个数组：

// The following is an example that won't work with every chart

options: {
    scales: {
        xAxes: [{

            // `from` & `to` must exist in your xAxe ticks
            phases: [{
                from: "January",
                to: "March",
                // You can also define the color here
                color: "blue"
            },
            {
                from: "May",
                to: "June",
                color: "red"
            }]
        }]
    }
}

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

var phasePlugin = {
    // You need to handle the `afterDraw` event since you draw phases edges
    // after everything is drawn
    afterDraw: function(chart) 
    {
        // All the variables the plugin needs follow ...
        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 = chart.scales[yAxeId];
        var ticks = xAxe.ticks;
        var phases = chart.config.options.scales.xAxes[0].phases;

        // For every phase ...
        for (var i = 0; i < phases.length; i++) {

            // We check if the tick actually exists
            if (ticks.indexOf(phases[i].from) == -1 || (ticks.indexOf(phases[i].to) == -1)) {
                // Else, we skip to the next phase
                continue;
            }

            // We get the x position of the first limit tick
            var xPos = ((xAxe.width - xAxe.paddingRight) / xAxe.maxIndex) * ticks.indexOf(phases[i].from) + xAxe.left + 1;

            // And draw the dashed line
            ctx.setLineDash([8, 8]);
            ctx.strokeStyle = phases[i].color;
            ctx.strokeRect(xPos, yAxe.top, 0, yAxe.height);

            // Same for the other limit
            xPos = ((xAxe.width - xAxe.paddingRight) / xAxe.maxIndex) * ticks.indexOf(phases[i].to) + xAxe.left + 1;
            ctx.strokeStyle = phases[i].color;
            ctx.strokeRect(xPos, yAxe.top, 0, yAxe.height);
            ctx.setLineDash([1,0]);
        }
    }
};

您可以看到一个完整的示例in this jsFiddle，这是它的结果：

【讨论】：