Question

我正在尝试在dc.js中创建一个饼图图例。但是，没有传说。它只是...没有显示出来。所有内容都与我使用图例命令之前的内容相同。

以下是图例代码：

.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();

我从this tutorial获取了我的传奇代码，它似乎以official docs结帐。我做错了什么？

Answer 1

我认为你没有做错任何事。它是你正在使用的dc.js版本的问题。请检查http://jsbin.com/xasenusu/1/。我已经改变了dc.js的版本，并为div提供了更多的空间。

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

Answer 2

对我来说，这个解决方案不起作用。所以我手动开发了图例。对于每个值，我放置一些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>

dc.js 1.7中的饼图图例未显示

2 个答案: