web-dev-qa-db-ja.com

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),
    options: this.chartdata.options,
    lineAtIndex: 2
};

new Chart(ctx, config);
chart.jschart.js2
14
Munna Khan

オプション

Chart.jsには2つのオプションがあります。

  1. 混合チャートタイプを作成できます（ ここの例 ）。これにより、折れ線グラフを追加して折れ線を作成できます。
  2. プラグインを作成できます（以下の例を参照）。

オプション2は、ラインの外観をより詳細に制御できるため、私が推奨するオプションです。

修正

プラグインのデモ

Chart.jsが プラグインをサポート になりました。これにより、グラフに必要な機能を追加できます。

プラグインを作成するには、イベントの発生後にコードを実行し、必要に応じてチャート/キャンバスを変更する必要があります。次のコードは、出発点として適しています。

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);
23
L Bahr