我试图创建一个饼图传说dc.js. 然而,没有传说。 它只是......不出来。 一切似乎和以前一样我用了传说中的命令。
这里是JSBin
这里是传说中的代码:
.legend(dc.legend().x(80).y(70).itemHeight(13).gap(5));
下面是相关代码的其余部分:
var companyDimension = data.dimension(function(d) {return d.company;});
var totalSalesByCompany = companyDimension.group().reduceSum(function(d) {return d.total;});
var pieChartCompanySales = dc.pieChart("#pie-chart-sales-by-company");
pieChartCompanySales
.width(150).height(150)
.dimension(companyDimension)
.group(totalSalesByCompany)
.legend(dc.legend().x(80).y(70).itemHeight(13).gap(5));
dc.renderAll();
我从得到我的传说码本教程 ,而且似乎与检查出官方的文档 。 我究竟做错了什么?
我想你没有做错什么。 它的问题与您正在使用dc.js的版本。 请检查http://jsbin.com/xasenusu/1/ 。 我已经改变dc.js的版本,以及给了DIV多一点空间,SVG。
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js"></script>
<script type="text/javascript" src="http://dc-js.github.io/dc.js/js/dc.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#pie-chart-sales-by-company svg{width:350px;}</style>
</head>
<body>
<div id="pie-chart-sales-by-company"></div>
</body>
</html>
对我来说,这个解决方案并不作品。 所以我手动开发的传奇。 对于每一个值,我把一些CSS来表示颜色,那里的百分比。 这是不是最好的解决办法,但工程。 我希望在2.0版本稳定的很快就会到来!
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("<div id=" + item.key + " class='elemento-legenda'><div class='quadradinho' style='background: " + cores_legenda[item.key] + "'></div> <div class='texto-legenda'>" + item.key + "\t\t\t (" + (item.value / total * 100).toFixed(1) + "%) " + "</div></div>");
});
HTML
<div class="chart-stage">
<div id="precos-chart"></div>
<div id="precos-legenda">
</div>