javascript - ChartJS : how to make a bar chart with a horizontal guideline:

Question

是否可以制作如下例所示的图表？

我还没有找到带有叠加层的示例。我在meteor应用程序中的大气插件上下文中使用它，因此我可能无法轻松地将插件添加到我的chartjs实例中。

我已经构建了相当多的图表，因此，出于这个原因，我强烈建议让其工作而不是切换到另一个图表库，但如果没有其他方法可以将它们移植过来还为时不晚。这项工作。

Answer 1

您可以扩展条形图以添加水平线

Chart.types.Bar.extend({
        name: "BarLine",
        draw: function () {

            Chart.types.Bar.prototype.draw.apply(this, arguments);

            var scale = this.scale,
                barHeight = this.scale.calculateY(83);


            // draw line
            this.chart.ctx.beginPath();
            this.chart.ctx.moveTo(30, barHeight);

            this.chart.ctx.strokeStyle = '#ff0000';
            this.chart.ctx.lineWidth = 3;
            this.chart.ctx.lineTo(this.chart.width, barHeight);
            this.chart.ctx.stroke();

            // write Label Text
            this.chart.ctx.fillStyle = '#000000';
            var text = this.options.labelText ? this.options.labelText : "DEFAULT TEXT" 
            this.chart.ctx.textAlign = 'center';
            this.chart.ctx.font = '22px Arial';
            this.chart.ctx.fillText(text, this.chart.width  * 0.5, 95);
            this.chart.ctx.closePath();                            

        }
    });`

我确信您可以在绘图函数中添加条形值，但我通常在图表的“onanimationcomplete”函数中执行此操作，如下所示:

resultChart = new Chart(resultGraphCanvas.getContext("2d")).BarLine(chart, {

                        scaleBeginAtZero: true,
                        scaleOverride: true,
                        scaleSteps: 10,
                        scaleStepWidth: 10,
                        maintainAspectRatio: false,
                        labelText: "TEST DRAWN NEAR THE LINE",

                        showTooltips: false, //Needs to be set to false for the onAnimationComplete drawing to persist
                        onAnimationComplete: function () {


                            var ctx = this.chart.ctx;
                            ctx.font = this.scale.font;
                            ctx.fillStyle = this.scale.textColor
                            ctx.textAlign = "center";
                            ctx.textBaseline = "bottom";

                            this.datasets.forEach(function (dataset) {
                                dataset.bars.forEach(function (bar) {

                                    ctx.fillText(bar.value, bar.x, bar.y );
                                });
                            })
                        },
                    });

这将在条形顶部绘制值，我将把它们放置在其他地方:)