在Chart.js 2.0中绘制水平线

Question

你能帮我看看如何扩展Chart.js v2.0。我需要在图表中绘制一些水平线，类似于：http://jsfiddle.net/vsh6tcfd/3/

usort

Answer 1

选项

使用chart.js，您有2个选项。

1. 您可以创建混合图表类型（Example Here）。这样您就可以添加折线图来创建线条。
2. 您可以创建一个插件（参见下面的示例）。

选项2将是我推荐的选项，因为它可以让您更好地控制线条的外观。

修复

demo of the plugin

Chart.js现在supports plugins。这允许您将所需的任何功能添加到图表中！

要创建插件，您需要在事件发生后运行代码，并根据需要修改图表/画布。 以下代码应该为您提供一个很好的起点：

var horizonalLinePlugin = {
  afterDraw: function(chartInstance) {
    var yValue;
    var yScale = chartInstance.scales["y-axis-0"];
    var canvas = chartInstance.chart;
    var ctx = canvas.ctx;
    var index;
    var line;
    var style;

    if (chartInstance.options.horizontalLine) {
      for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
        line = chartInstance.options.horizontalLine[index];

        if (!line.style) {
          style = "rgba(169,169,169, .6)";
        } else {
          style = line.style;
        }

        if (line.y) {
          yValue = yScale.getPixelForValue(line.y);
        } else {
          yValue = 0;
        }

        ctx.lineWidth = 3;

        if (yValue) {
          ctx.beginPath();
          ctx.moveTo(0, yValue);
          ctx.lineTo(canvas.width, yValue);
          ctx.strokeStyle = style;
          ctx.stroke();
        }

        if (line.text) {
          ctx.fillStyle = style;
          ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
        }
      }
      return;
    }
  }
};
Chart.pluginService.register(horizonalLinePlugin);