Barra di missaggio e grafici a linee con Rickshaw (libreria di grafi basata su d3 per js)

Question

Quando si utilizza la libreria di d3 di tracciamento, il rendering (area, linea o barra) viene impostato sul grafico. Esiste comunque un grafico con più serie in cui una serie viene tracciata come una linea e un'altra come una barra?

Answer 1

Ho provato lo stesso caso d'uso.

Ho modificato la sorgente Rickshaw. Ma ho trovato questo.

nvd3 supporta mixture graph.

Answer 2

Ho trovato più una soluzione alternativa che una soluzione, ma potrebbe essere comunque utile.

È possibile disegnare due grafici Rickshaw uno sopra l'altro:

<div style="height: 0; overflow: visible;"> 
    <div id="barChart" style="height: 300px;"></div> 
</div> 

<div style="height: 0; overflow: visible;"> 
    <div id="lineChart" style="height: 300px;"></div> 
</div> 

Ora disegnare i due grafici con due chiamate a Rickshaw.Graph() per ciascuno dei div grafico. Si noti che è necessario duplicare l'ultimo punto nel grafico a linee, altrimenti non si otterranno corrispondenze accurate sull'asse x.

So che questo è brutto, ma può essere utile per grafici semplici. Non so cosa succede se provi questo con effetti hover o simili, comunque.

Se c'è una soluzione pulita per questo, sarei interessato anche io.

Answer 3

C'è uno pull request per combinare più grafici in Rickshaw. Apparentemente l'approccio ha ancora bisogno di un po 'di perfezionamento, ma il codice sembra funzionare principalmente.

Attualmente è possibile clonare lo feature branch e vedere se soddisfa i propri scopi.

Answer 4

Ora è possibile combinare grafici in risciò!

Il tipo di renderer è chiamato "multi". Come funziona è che si dà ogni singola serie di essa la propria renderer distinta cioè

var graph = new Rickshaw.Graph({ 
    element: el, width: 960, height: 500, 
    padding: { top: 0, right: 0, bottom: 0, left: 0 }, 
    renderer: 'multi', 
    series: [ 
     { 
      renderer: 'line', 
      data: [ 
       { x: 0, y: 40 }, 
       { x: 1, y: 49 } 
      ] 
     }, 
     { 
      renderer: 'bar', 
      data: [ 
       { x: 0, y: 30 }, 
       { x: 1, y: 60 } 
      ] 
     }, 
    ] 
}); 

esempio completo qui https://github.com/shutterstock/rickshaw/blob/a240899625c2d83961b3e682cd77ab8e5199a866/tests/Rickshaw.Graph.Renderer.Multi.js