chart.js图上的叠加线

Question

我想知道是否有可能在chart.js图表​​的顶部覆盖一条线,例如折线图？例如,在x轴上,水平线将在图表上的值20处绘制

Answer 1

我已经创建了一个称为叠加图表的东西,我已经添加到我的fork.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代码不兼容(渲染全面横向).