关于DC.js github , 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();
我如何制作一个堆叠的行图表,其中每个部分是“红色”、“白色”或“蓝色”并显示在一行中?
我的目标是拥有一个可以构建的工作示例。到目前为止的答案有所帮助,但我仍然无法构建它。
最佳答案
你可以用 d3.js 创建一个 div 并添加 flex 的属性......
http://codepen.io/luarmr/pen/BNQYov
var chart = d3.select("#rowChart");
var bar = chart.selectAll("div")
.data(data)
.enter().append("div")
.attr('style',function(d,i){
return (
'flex:' + d.Quantity + '; '
+ 'background:' + color(i) + ';'
)
})
attr.style 可以改进。
可以为webkit添加前缀
http://caniuse.com/#search=flex
编辑
关于javascript - 如何使用 dc.js 创建单行堆叠行图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29360042/