Mix Bar und Liniendiagramme mit Rickshaw (d3 basierte Grafikbibliothek für js)

Question

Wenn Sie die d3 Plotting-Bibliothek Rickshaw verwenden, wird der Renderer (entweder Bereich, Linie oder Balken) in der Grafik gesetzt. Gibt es überhaupt ein Diagramm mit mehreren Reihen, in denen eine Reihe als Linie und eine andere als Balken gezeichnet wird?

Answer 1

Ich versuchte den gleichen Anwendungsfall.

Ich modifizierte Rikscha Quelle. Aber ich habe dieses gefunden.

nvd3 unterstützt mixture graph.

Answer 2

Ich fand mehr eine Abhilfe als eine Lösung, aber es kann trotzdem hilfreich sein.

Sie können zwei Rickshaw grafische Darstellungen auf dem jeweils anderen ziehen:

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

nun die beiden Charts mit zwei Anrufen Rickshaw.Graph() für jeden der Chart divs ziehen. Beachten Sie, dass Sie den letzten Punkt im Liniendiagramm duplizieren müssen, da sonst keine genauen Übereinstimmungen auf der X-Achse erhalten werden.

Ich weiß, dass dies hässlich ist, aber es kann für einfache Graphen nützlich sein. Ich weiß nicht, was passiert, wenn Sie das mit Hover-Effekten oder ähnlichem versuchen.

Wenn es eine saubere Lösung dafür gibt, würde mich das auch interessieren.

Answer 3

Es gibt eine pull request zum Kombinieren mehrerer Diagramme in Rickshaw. Offensichtlich muss der Ansatz noch verfeinert werden, aber der Code scheint größtenteils zu funktionieren.

Derzeit können Sie die feature branch klonen und sehen, ob es Ihren Zwecken entspricht.

Answer 4

Sie können jetzt Diagramme auf Rikscha kombinieren!

Der Renderer-Typ wird 'multi' genannt. Wie es funktioniert ist, dass Sie jede einzelne Serie geben seine eigene eindeutige Renderer heißt

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 } 
      ] 
     }, 
    ] 
}); 

Voll Beispiel hier https://github.com/shutterstock/rickshaw/blob/a240899625c2d83961b3e682cd77ab8e5199a866/tests/Rickshaw.Graph.Renderer.Multi.js