chart.js 图上的叠加线

Question

我想知道是否可以在 chart.js 图形（例如折线图）上叠加一条线？例如，在 x 轴上，将在图中的值 20 处绘制一条水平线

Answer 1

我创建了一种称为叠加图表的东西，我已将其添加到我的 chart.js (https://github.com/leighquince/Chart.js) 分支中，可以在这种情况下使用。它的工作原理与折线图或条形图相同，唯一的区别是您声明了一个名为 type 的额外属性，它可以是 'line' 或 'bar'。然后只需调用 new Chart(ctx).Overlay(data).

因此，对于您的示例，您可以只使用条形图，然后提供另一个数据集（颜色比我使用的颜色更好）来显示线条。

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My First dataset",
    //new option, barline will default to bar as that what is used to create the scale
    type: "line",
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(0,0,0,0.6)",
    pointColor: "rgba(0,0,0,0.6)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    datasetFill:false,
    data: [20, 20, 20, 20, 20, 20, 20]
  }, {
    label: "My First dataset",
    //new option, barline will default to bar as that what is used to create the scale
    type: "bar",
    fillColor: "rgba(220,20,220,0.2)",
    strokeColor: "rgba(220,20,220,1)",
    pointColor: "rgba(220,20,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [32, 25, 33, 88, 12, 92, 33]
  }]
};
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Overlay(data, {
  responsive: false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>

<canvas id="canvas" width="400"></canvas>

Answer 2

我需要类似的东西，但我需要的不是直线 graph，而是一条真正的平面覆盖线。

像这样扩展图表：

    Chart.types.Bar.extend({
        name: 'BarOverlay',
        draw: function (ease) {
            Chart.types.Bar.prototype.draw.apply(this);
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(35, this.scale.calculateY(100));
            ctx.lineTo(this.scale.calculateX(this.datasets[0].bars.length), this.scale.calculateY(100));
            ctx.stroke();
        }
    });

我的代码被硬编码为在“100”标记处画一条线（在本例中，我们的目标是 100%）。

然后这样称呼它：

new Chart(ctx).BarOverlay(data, options);

我还发现 Quince 的代码已过时并且与 1.0.2 Chart.js 代码不兼容（渲染完全横向）。

Answer 3

StrangeWill 的回答作为基础非常好，但我需要条形图上的数据驱动垂直线，因此修改如下：

首先，我向选项数组添加了一个属性（添加另一个数据集可能更清晰，但我不得不告诉 ChartJS 忽略它），其中每个选项都是我想要的数据值索引重点介绍，大致如下：

ChartDefaults.verticalOverlayAtBar = [itemOne, itemTwo]
...
var HistoryChart = new Chart(ctx).BarOverlay(ChartData, ChartDefaults);

然后我修改了 StrangeWill 的代码，将其扩展为从上方迭代项目数组并在指示的栏上绘制垂直线。

Chart.types.Bar.extend({
    name: 'BarOverlay',
    draw: function (ease) {

        // First draw the main chart
        Chart.types.Bar.prototype.draw.apply(this);

        var ctx = this.chart.ctx;
        var barWidth = this.scale.calculateBarWidth(this.datasets.length);

        for (var i = 0; i < this.options.verticalOverlayAtBar.length; ++i) {

            var overlayBar = this.options.verticalOverlayAtBar[i];

            // I'm hard-coding this to only work with the first dataset, and using a Y value that I know is maximum
            var x = this.scale.calculateBarX(this.datasets.length, 0, overlayBar);
            var y = this.scale.calculateY(2000);

            var bar_base = this.scale.endPoint

            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(x, bar_base);
            ctx.lineTo(x, y);
            ctx.stroke();
        }
        ctx.closePath();
    }
});

它并不完美，因为我不熟悉内部 ChartJs 代码，特别是我的线条偏离了 2 个小节，尽管我怀疑这是数据数组中的栅栏错误而不是图表计算。但是，希望这对其他人来说是一个有用的进步。

chart.js 图上的叠加线

Overlay Line on chart.js Graph

javascript

chart.js