在DC.js github上,作爲使用dc.js庫的示例列出了Stock Market Selection Strategy by Lon Riesberg。如何用dc.js創建一行堆棧的行圖?
Lon能夠創建堆疊的行圖並將其顯示爲單行。
我希望能夠完成同樣的事情。我只能弄清楚如何創建一個行圖,如in my codepen及以下所示。
HTML
<script src="https://rawgit.com/mbostock/d3/master/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<script type="text/javascript" src="https://rawgit.com/dc-js/dc.js/master/dc.js" ></script>
<div id="rowChart"></div>
的Javascript
items = [
{Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111},
{Id: "02", Name: "White", Price: "10.00", Quantity: "1",TimeStamp:222},
{Id: "04", Name: "Blue", Price: "9.50", Quantity: "10",TimeStamp:434},
{Id: "03", Name: "Red", Price: "9.00", Quantity: "2",TimeStamp:545},
{Id: "06", Name: "Red", Price: "100.00", Quantity: "2",TimeStamp:676},
{Id: "05",Name: "Blue", Price: "1.20", Quantity: "2",TimeStamp:777}
];
var ndx = crossfilter(items);
var Dim = ndx.dimension(function (d) {return d.Name;})
var RowBarChart1 = dc.rowChart("#rowChart")
RowBarChart1
.width(250).height(500)
.margins({top: 20, left: 15, right: 10, bottom: 20})
.dimension(Dim)
.group(Dim.group().reduceCount())
.elasticX(true)
.label(function (d) {return d.key + " " + d.value;})
.ordering(function(d) { return -d.value })
.xAxis().tickFormat(function(v){return v}).ticks(3);
dc.renderAll();
我怎麼會做出這樣的層疊排表,其中每個部分是「紅色」,「白色」或「藍」,並顯示在一個行?
我的目標是建立一個可以構建的工作示例。迄今爲止的答案已經有所幫助,但我仍然無法構建這一點。
加...您可以通過CSS控制大小和其他選項。 – 2015-05-26 19:05:31
我試圖利用這個,但似乎無法得到它的工作:http://codepen.io/chriscruz/pen/yNVZYL。它似乎已經失去了Lon在這裏創建的一些交互功能(http://stackoverflow.com/questions/29360042/how-to-create-stacked-row-chart-with-one-row-with-dc -js)。例如,當我點擊Lon創建的欄時,它會更改其他圖表。那有意義嗎? – Chris 2015-05-27 16:59:18
嘿,你有另一個代碼這裏 http://codepen.io/luarmr/pen/yNVZMN 我添加工具提示從http://cbracco.me/a-simple-css-tooltip/ 而行動點擊爲好。你只需要重畫圖... 問題是...你想展示什麼數據? – 2015-05-27 17:28:03