Nvd3.js - Aggiunta di più assi y al grafico cumulativo

Question

Ho bisogno di aggiungere più assi y al mio grafico Nvd3 cumulativo, qualcuno sa quale parte del codice della libreria devo modificare?

Ancora meglio sarebbe se tu lo facessi da solo e potresti fornire un Jsfiddle.

Qualsiasi suggerimento sarebbe apprezzato.

Answer 1

Se si fa riferimento all'aggiunta di più assi y al grafico singolo già disponibile in NVD3 line and bar chart. Snippet di codice parziale mostrato di seguito.

Answer 2

Esistono solo tipi di grafici specifici dotati di funzionalità multi asse Y.

Questo non è disponibile per il grafico a linee cumulative.

È tuttavia disponibile per il Multi-chart. C'è un esempio nella home page di Angluar NVD3 here ma mostra l'esempio con barre e linee.

Ho biforato l'esempio del plunker dalla home page e ho cambiato i tipi di serie in tutte le linee per mostrare come utilizzare il multi per ottenere lo stesso risultato del grafico a linee cumulative.

(Ho cambiato anche il set di dati per semplificare l'esempio)

Pluker Example

La prima cosa è quello di aggiungere le opzioni per l'asse multipla:

$scope.options = { 
      chart: { 
       type: 'multiChart', 
       height: 450, 
       margin : { 
        top: 30, 
        right: 60, 
        bottom: 50, 
        left: 70 
       }, 
       color: d3.scale.category10().range(), 
       //useInteractiveGuideline: true, 
       transitionDuration: 500, 
       xAxis: { 
        tickFormat: function(d){ 
         return d3.format(',f')(d); 
        } 
       }, 
       yAxis1: { 
        tickFormat: function(d){ 
         return d3.format(',.1f')(d); 
        } 
       }, 
       yAxis2: { 
        tickFormat: function(d){ 
         return d3.format(',.1f')(d); 
        } 
       } 
      } 
     }; 

definire i dati:

$scope.data = [{key: 'series1', type: "line", yAxis: 1, values:[{x: 10, y: 20}, {x: 20, y: 35}, {x: 30, y:18}]}, 
     {key: 'series2', type: "line", yAxis: 1,values:[{x: 10, y: 12}, {x: 20, y: 26}, {x: 30, y: 15}]}, 
     {key: 'series3', type: "line", yAxis: 2,values:[{x: 10, y: 0.75}, {x: 20, y: 0.9}, {x: 30, y: 0.8}]}, 
     {key: 'series4', type: "line", yAxis: 2,values:[{x: 10, y: 0.2}, {x: 20, y: 0.3}, {x: 30, y: 0.4}]}] 

Nota ilI tasti 10 e yAxis sono impostati qui rispetto a ciascuna serie.

impostare il proprio <div> come normale:

<nvd3 options="options" data="data"></nvd3> 

E questo è tutto!

Si otterrà lo stesso grafico come si farebbe con un grafico a linee cumulativo ma la possibilità di impostare più assi.