Pie Chart Legend In Dc.js 1.7 Not Showing Up
I'm trying to create a pie chart legend in dc.js. However, there is no legend. It just... doesn't show up. Everything appears the same as before I used the legend command. Here
Solution 1:
I think you are not doing anything wrong. Its the problem with the version of dc.js you are using. Please check http://jsbin.com/xasenusu/1/. I have changed the version of dc.js as well as gave the div a little more space to svg.
<!DOCTYPE html><html><head><scriptsrc="http://d3js.org/d3.v3.min.js"></script><scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js"></script><scripttype="text/javascript"src="http://dc-js.github.io/dc.js/js/dc.js"></script><metacharset="utf-8"><title>JS Bin</title><style>#pie-chart-sales-by-company svg{width:350px;}</style></head><body><divid="pie-chart-sales-by-company"></div></body></html>Solution 2:
For me, this solutions doesn't works. So I developed the legend manually. For each value, I put some CSS to indicate the color and the percentage there. This is not the best solution but works. I hope the version 2.0 stable come on very soon!
CSS
#precos-legenda {
float:left;
width: 150px;
height: 150px;
text-align:left;
}
.quadradinho{
width: 13px;
height: 13px;
background: #ff7373;
float:left;
}
.elemento-legenda{
display: table-row;
}
JS
f.forEach(function(item) {
$("#precos-legenda").append("<divid=" + item.key + "class='elemento-legenda'><divclass='quadradinho'style='background: " + cores_legenda[item.key] + "'></div><divclass='texto-legenda'>" + item.key + "\t\t\t (" + (item.value / total * 100).toFixed(1) + "%) " + "</div></div>");
});
HTML
<div class="chart-stage">
<divid="precos-chart"></div><divid="precos-legenda"></div>
Post a Comment for "Pie Chart Legend In Dc.js 1.7 Not Showing Up"