在 Chart.js 2.0 中绘制水平线 [英] Draw horizontal lines in Chart.js 2.0

问题描述

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

Can you help me how to extend Chart.js v2.0. I need to draw some horizontal lines in the charts, something similar to: http://jsfiddle.net/vsh6tcfd/3/

var originalLineDraw = Chart.controllers.bar.prototype.draw;

Chart.helpers.extend(Chart.controllers.bar.prototype, {
  draw: function() {
    originalLineDraw.apply(this, arguments);

    var chart = this.chart;
    var ctx = chart.chart.ctx;

    var index = chart.config.data.lineAtIndex;
    if (index) {
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];

      ctx.save();
      ctx.beginPath();
      ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.left);
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.right);
      ctx.stroke();
      ctx.restore();
    }
  }
});

var config = {
    type: type,
    data:  jQuery.extend(true, {}, data),
    options: this.chartdata.options,
    lineAtIndex: 2
};

new Chart(ctx, config);  

推荐答案

选项

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

Options

With chart.js you have 2 options.

1. 您可以创建混合图表类型(此处示例).这将允许您添加折线图来创建您的线条.
2. 您可以创建一个插件(参见下面的示例).

1. You could create a mix chart types (Example Here). This would allow you to add a line charts to create your lines.
2. You could create a plugin (See Example Below).

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

Option 2 would be the one I recommend as it allows you to have more control over the appearance of the lines.

插件演示

Chart.js 现在支持插件.这允许您向图表添加任何您想要的功能！

Chart.js now supports plugins. This allows you to add any features you want to your charts!

要创建插件，您需要在事件发生后运行代码并根据需要修改图表/画布.下面的代码应该给你一个很好的起点:

To create a plugin you will need to run code after an event has occurred and modify the chart/canvas as needed. The following code should give you a good starting point:

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);

这篇关于在 Chart.js 2.0 中绘制水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！