帶人力車的混合條和折線圖（用於js的基於d3的圖形庫）

當使用d3繪圖庫Rickshaw時，在圖上設置渲染器（區域，線條或欄）。有無論如何有一個圖表與多個系列，其中一個系列繪製爲一條線，另一個作爲一個酒吧？帶人力車的混合條和折線圖（用於js的基於d3的圖形庫）

來源

2012-06-04 Steven Noble

我試過相同的用例。

我修改了人力車源碼。但是我發現了這個。

nvd3支持mixture graph。

來源

2012-06-27 06:38:03

我發現了一種比解決方案更多的解決方法，但無論如何它可能會有所幫助。

您可以在彼此的上面畫兩個人力車圖：

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

現在對每個圖表的div兩次調用Rickshaw.Graph（）繪製兩個圖表。請注意，您需要複製折線圖中的最後一個點，否則您將無法在x軸上獲得準確的匹配。

我知道這很醜陋，但它對於簡單圖形可能很有用。但是，如果您嘗試使用懸停效果或類似效果，我不知道會發生什麼情況。

如果有一個乾淨的解決方案，我也會感興趣。

來源

2012-11-02 10:28:58 theDmi

有一個pull request用於組合人力車中的多個圖表。顯然這種方法仍然需要一些改進，但代碼似乎主要工作。

當前您可以克隆feature branch並查看它是否適合您的目的。

來源

2013-04-15 20:20:54 dancek

您現在可以組合人力車上的圖表！

渲染器類型被稱爲'多'。它的工作原理是，你給每個單獨的系列它自己獨特的渲染器即

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

這裏完整的示例https://github.com/shutterstock/rickshaw/blob/a240899625c2d83961b3e682cd77ab8e5199a866/tests/Rickshaw.Graph.Renderer.Multi.js

來源

2014-11-19 12:09:30

帶人力車的混合條和折線圖（用於js的基於d3的圖形庫）

回答

相關問題