web-dev-qa-db-fra.com

Chart.js 2.0 - lignes verticales

Quelqu'un peut-il me dire comment étendre Chart.js v2.0. J'ai besoin de lignes verticales dans un graphique à courbes et je veux mettre en œuvre quelque chose de similaire à http://jsfiddle.net/dbyze2ga/ .

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

    var point = this.datasets[0].points[this.options.lineAtIndex]
    var scale = this.scale

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

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

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

UPDATE: Voir https://stackoverflow.com/a/45092928/360067 pour une solution plus simple et plus robuste utilisant le plugin Chart Annotations.

Vous pouvez étendre le type line pour ajouter un support pour dessiner une ligne

Aperçu

 enter image description here

Script

var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.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.top);
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
      ctx.stroke();
      ctx.restore();
    }
  }
});

et alors

var config = {
  type: 'line',
  data: {
    labels: ...
    datasets: [
        ...
    ],
    lineAtIndex: 2
  }
};

Fiddle - http://jsfiddle.net/mn8x6fso/

21
potatopeelings

Pour la v2.0, le meilleur moyen consiste à utiliser le plug-in Chart Annotations ( https://github.com/chartjs/chartjs-plugin-annotation ).

Violon - https://codepen.io/anon/pen/ZywgKr

Script

var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, {
    type: "line",
    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]
        }
      ]
    },
    options: {
      annotation: {
        annotations: [
          {
            type: "line",
            mode: "vertical",
            scaleID: "x-axis-0",
            value: "MAR",
            borderColor: "red",
            label: {
              content: "TODAY",
              enabled: true,
              position: "top"
            }
          }
        ]
      }
    }
  }
);

Croix posté de https://github.com/chartjs/Chart.js/issues/4495#issuecomment-315238365

9
potatopeelings

Pour ceux qui recherchent des lignes horizontales, voici ce que j'ai obtenu jusqu'à présent:

  ctx.save();
  ctx.beginPath();
  ctx.moveTo(xaxis.left, limits[i].value);
  ctx.strokeStyle = limits[i].color;
  ctx.lineTo(xaxis.right, limits[i].value);
  ctx.stroke();
  ctx.restore();

jsFiddle

1
AHahn