Chart.js - tracciare la linea orizzontale

Question

Vorrei disegnare una linea orizzontale in un grafico utilizzando Chart.js. Ma non sono in grado di farlo.

Ho letto questa domanda - Chart.js — drawing an arbitrary vertical line - ma non riesco a trasformare il codice per disegnare righe orizzontali non verticale.

Spero che tu possa aiutarmi (in particolare i potatopeelings :)).

Answer 1

Ecco il codice jquery per tracciare una linea orizzontale.

var 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] 
    }] 
}; 

var ctx = document.getElementById("LineWithLine").getContext("2d"); 

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

     var point = this.datasets[0].points[this.options.lineAtIndex] 
     var scale = this.scale 
     console.log(this); 

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

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

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

http://jsfiddle.net/7a4hhzge/455/

Questo si basa off di the code used to draw an arbitrary vertical line, potrebbe non essere perfetto, ma si dovrebbe essere in grado di regolare in base alle proprie esigenze.

Answer 2

Se avete bisogno di molte linee con certo valore Y, provare questo codice

var 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] 
    }] 
}; 

var ctx = document.getElementById("LineWithLine").getContext("2d"); 

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

     var lines = this.options.limitLines; 

     for (var i = lines.length; --i >= 0;) { 

      var xStart = Math.round(this.scale.xScalePaddingLeft); 
      var linePositionY = this.scale.calculateY(lines[i].value); 

      this.chart.ctx.fillStyle = lines[i].color ? lines[i].color : this.scale.textColor; 
      this.chart.ctx.font = this.scale.font; 
      this.chart.ctx.textAlign = "left"; 
      this.chart.ctx.textBaseline = "top"; 

      if (this.scale.showLabels && lines[i].label) { 
       this.chart.ctx.fillText(lines[i].label, xStart + 5, linePositionY); 
      } 

      this.chart.ctx.lineWidth = this.scale.gridLineWidth; 
      this.chart.ctx.strokeStyle = lines[i].color ? lines[i].color : this.scale.gridLineColor; 

      if (this.scale.showHorizontalLines) { 
       this.chart.ctx.beginPath(); 
       this.chart.ctx.moveTo(xStart, linePositionY); 
       this.chart.ctx.lineTo(this.scale.width, linePositionY); 
       this.chart.ctx.stroke(); 
       this.chart.ctx.closePath(); 
      } 

      this.chart.ctx.lineWidth = this.lineWidth; 
      this.chart.ctx.strokeStyle = this.lineColor; 
      this.chart.ctx.beginPath(); 
      this.chart.ctx.moveTo(xStart - 5, linePositionY); 
      this.chart.ctx.lineTo(xStart, linePositionY); 
      this.chart.ctx.stroke(); 
      this.chart.ctx.closePath(); 
     } 
    } 
}); 

new Chart(ctx).LineWithLine(data, { 
    datasetFill : false, 
    limitLines: [ 
     { 
      label: 'max', 
      value: 17, 
      color: 'rgba(255, 0, 0, .8)' 
     }, 
     { 
      label: 'min', 
      value: 1 
     }, 
     { 
      value: 7, 
      color: 'rgba(0, 255, 255, .8)' 
     } 
    ], 
}); 

http://jsfiddle.net/vsh6tcfd/3/

Answer 3

Senza alcun codice aggiuntivo, sono riuscito a disegnare una linea con l'aggiunta di una nuova voce come un set di dati con questi opzioni:

Basta sostituire con la dimensione del set di dati e con il valore rappresentato dalla linea.

{ 
    data: Array.apply(null, new Array(<length>)).map(Number.prototype.valueOf, <value>), 
    fill: false, 
    radius: 0, 
    backgroundColor: "rgba(0,0,0,0.1)" 
} 

Il raggio di 0 in qualche modo nasconde i punti e il riempimento: falso lo farà apparire come una linea.

Answer 4

In base al messaggio dFelinger ho creato un nuovo tipo di carattere che disegna una linea media sul grafico a linee. Ecco il codice, copia e chiama un nuovo grafico con il nuovo tipo chiamato 'lineWithAverage' FUNZIONA SOLO PER CHARTJS 2

Chart.controllers.lineWithAverage = Chart.controllers.line.extend({ 
     initialize: function() { 
      Chart.controllers.line.prototype.initialize.apply(this, arguments); 
     }, 
     draw: function() { 
      Chart.controllers.line.prototype.draw.apply(this, arguments); 

      var scale = this.scale 
      var sum = 0; 
      this.getDataset().data.forEach(function(value) { 
       sum = sum + value; 
      }); 

      var average = sum/this.getDataset().data.length; 

      var averageCoord = this.calculatePointY(average); 

      // draw line 
      this.chart.chart.canvas.ctx = this.chart.chart.canvas.getContext('2d'); 
      this.chart.chart.canvas.ctx.beginPath(); 
      this.chart.chart.canvas.ctx.moveTo(0, averageCoord); 
      this.chart.chart.canvas.ctx.strokeStyle = '#979797'; 
      this.chart.chart.canvas.ctx.lineTo(this.chart.chart.width, averageCoord); 
      this.chart.chart.canvas.ctx.stroke(); 
     } 
    });