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

我需要类似的东西，但不是直线图形我需要的是一个真正的平的覆盖线。

只是像这样扩展图表：

    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 的回答作为基础非常出色，但我需要条形图上的数据驱动垂直线，因此对其进行了如下修改：

首先我在 options 数组中添加了一个属性（添加另一个数据集可能更简洁，但我不得不告诉 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 个小节，尽管我怀疑这是数据数组中的栅栏错误，而不是图表计算。但是，希望这对其他人来说是一个有用的进步。