Chart.js

Question

我想使用 Chart.js 在图表中画一条水平线。但是我做不到。

我读过这个问题 - - 但我无法转换绘制水平线非垂直线的代码。

我希望你能帮助我（尤其是土豆皮:)）。

Answer 1

这里是 JavaScript 绘制水平线的代码。

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

var ctx = document.getElementById("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
    },
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale
        console.log(this);

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(scale.startPoint+12, point.y);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(this.chart.width, point.y);
        this.chart.ctx.stroke();

        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2
});

http://jsfiddle.net/7a4hhzge/455/

这是基于，它可能并不完美，但您应该能够对其进行调整以满足您的需要。

Answer 2

如果您需要许多行具有特定 Y 值，请尝试此代码

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

var ctx = document.getElementById("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var lines = this.options.limitLines;

        for (var i = lines.length; --i >= 0;) {

            var xStart = Math.round(this.scale.xScalePaddingLeft);
            var linePositionY = this.scale.calculateY(lines[i].value);

            this.chart.ctx.fillStyle = lines[i].color ? lines[i].color : this.scale.textColor;
            this.chart.ctx.font = this.scale.font;
            this.chart.ctx.textAlign = "left";
            this.chart.ctx.textBaseline = "top";

            if (this.scale.showLabels && lines[i].label) {
                this.chart.ctx.fillText(lines[i].label, xStart + 5, linePositionY);
            }

            this.chart.ctx.lineWidth = this.scale.gridLineWidth;
            this.chart.ctx.strokeStyle = lines[i].color ? lines[i].color : this.scale.gridLineColor;

            if (this.scale.showHorizontalLines) {
                this.chart.ctx.beginPath();
                this.chart.ctx.moveTo(xStart, linePositionY);
                this.chart.ctx.lineTo(this.scale.width, linePositionY);
                this.chart.ctx.stroke();
                this.chart.ctx.closePath();
            }

            this.chart.ctx.lineWidth = this.lineWidth;
            this.chart.ctx.strokeStyle = this.lineColor;
            this.chart.ctx.beginPath();
            this.chart.ctx.moveTo(xStart - 5, linePositionY);
            this.chart.ctx.lineTo(xStart, linePositionY);
            this.chart.ctx.stroke();
            this.chart.ctx.closePath();
        }
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    limitLines: [
        {
            label: 'max',
            value: 17,
            color: 'rgba(255, 0, 0, .8)'
        },
        {
            label: 'min',
            value: 1
        },
        {
            value: 7,
            color: 'rgba(0, 255, 255, .8)'
        }
    ],
});

http://jsfiddle.net/vsh6tcfd/3/

Answer 3

在没有任何额外代码的情况下，我设法通过使用这些选项添加一个新条目作为数据集来画一条线：

只需替换为您的数据集的大小，以及该行代表的值。

{
  data: Array.apply(null, new Array(<length>)).map(Number.prototype.valueOf, <value>),
  fill: false,
  radius: 0,
  backgroundColor: "rgba(0,0,0,0.1)"
}

0 的半径会以某种方式隐藏点和 fill: false 会使它显示为一条线。

Answer 4

根据dFelinger的消息我做了一个新的char类型，在折线图上画一条平均线。这是代码，只需复制并调用一个名为 'lineWithAverage' 的新图表，仅适用于 CHARTJS 2

    Chart.controllers.lineWithAverage = Chart.controllers.line.extend({
        initialize: function () {
            Chart.controllers.line.prototype.initialize.apply(this, arguments);
        },
        draw: function () {
            Chart.controllers.line.prototype.draw.apply(this, arguments);

            var scale = this.scale
            var sum = 0;
            this.getDataset().data.forEach(function(value) {
              sum = sum + value;
            });

            var average = sum / this.getDataset().data.length;

            var averageCoord = this.calculatePointY(average);

            // draw line
            this.chart.chart.canvas.ctx = this.chart.chart.canvas.getContext('2d');
            this.chart.chart.canvas.ctx.beginPath();
            this.chart.chart.canvas.ctx.moveTo(0, averageCoord);
            this.chart.chart.canvas.ctx.strokeStyle = '#979797';
            this.chart.chart.canvas.ctx.lineTo(this.chart.chart.width, averageCoord);
            this.chart.chart.canvas.ctx.stroke();
        }
    });

Answer 5

我发现创建水平线的最简单方法是创建一个新数据集，并将每个条目设置为某个常量值（例如 y = 75）。然后我将 pointRadius 和 pointHitRadius 设置为零以隐藏图表上的工具提示和点。

datasets: [
  {
    data: your_data,
    ...
  },
  {
    data: your_data.map(r => 75),
    pointRadius: 0,
    pointHitRadius: 0,
  },
]

Chart.js - 绘制水平线

Chart.js - draw horizontal line

javascript