Disegna linee orizzontali in Chart.js 2.0

Question

Puoi aiutarmi come estendere Chart.js v2.0. Ho bisogno di tracciare alcune linee orizzontali nelle classifiche, qualcosa di simile a: 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); 

Answer 1

Opzioni

Con chart.js hai 2 opzioni.

1. È possibile creare un tipo di grafico misto (Example Here). Questo ti permetterebbe di aggiungere un grafico a linee per creare le tue linee.
2. È possibile creare un plug-in (vedere Esempio di seguito).

L'opzione 2 è quella che raccomando in quanto consente di avere un maggiore controllo sull'aspetto delle linee.

The Fix

demo of the plugin

Chart.js ora supports plugins. Questo ti consente di aggiungere tutte le funzionalità che vuoi alle tue carte!

Per creare un plug-in è necessario eseguire il codice dopo che si è verificato un evento e modificare il grafico/area di lavoro in base alle esigenze. Il seguente codice dovrebbe darvi un buon punto di partenza:

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