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

问题描述

能帮我如何扩展Chart.js v2.0。我需要在图表中绘制一些水平线，类似于： 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），
选项：this.chartdata.options， 
 lineAtIndex：2 
}; 
 
新Chart（ctx，config）; 
  

解决方案

选项

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

1. 您可以创建混合图表类型（此处的示例）。


2. 您可以创建一个插件（请参见下面的示例）。

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

修复

插件的演示

Chart.js现在<一个href = http://www.chartjs.org/docs/#advanced-usage-creating-plugins rel = noreferrer>支持插件。

要创建插件，您需要在事件发生后运行代码并根据需要修改图表/画布。

以下代码应为您提供一个良好的起点：

  var horizo​​nalLinePlugin = {
 afterDraw：function（chartInstance）{ 
 var yValue; 
 var yScale = chartInstance.scales [ y轴-0]； 
 var canvas = chartInstance.chart; 
 var ctx = canvas.ctx; 
 var索引； 
 var行； 
 var样式； 
 
 if（chartInstance.options.horizo​​ntalLine）{
 for（index = 0; index< chartInstance.options.horizo​​ntalLine.length; index ++）{
 line = chartInstance.options .horizo​​ntalLine [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 =样式； 
 ctx.stroke（）; 
} 
 
 if（line.text）{
 ctx.fillStyle = style; 
 ctx.fillText（line.text，0，yValue + ctx.lineWidth）; 
} 
} 
回报； 
} 
} 
}; 
 Chart.pluginService.register（horizo​​nalLinePlugin）; 
  

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

解决方案

Options

With chart.js you have 2 options.

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

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

The Fix

demo of the plugin

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屋！