更改 dc.js 中图例的值答案

【问题标题】：Change value on legend in dc.js更改 dc.js 中图例的值
【发布时间】：2014-03-30 00:33:19
【问题描述】：

我用 dc.js 构建了一个饼图，内容如下：

var chart = dc.pieChart(selector, this.chartGroup)
  .width(200).height(200)
  .dimension(this.dimension)
  .group(this.group)
  ...
  .legend(dc.legend().x(10).y(255).gap(5).horizontal(true))

chart.render()

有没有办法用类似以下的方式来格式化图例上的标签：

function (d) {
  return d.key + ': ' + d.value;
}

【问题讨论】：

标签： javascript charts d3.js dc.js

【解决方案1】：

最后一个答案似乎部分正确。我建议如下：

    .legend(dc.legend().x(100).y(400).itemHeight(13).gap(5).autoItemWidth(true).legendText(function (d) {
        return d.name + " " + Math.round((d.data / totalPrice) * 100) + "%"
    }));

其中 d.name 是您将在图例中看到的实际标签。 d.data 是实际值。

【讨论】：

Not documented 但有效。
如何计算变量totalPrice
@Rusty：从下面@nico 的回答中，您可以使用以下内容，尽管它确实意味着计算每个图例项的总值：d.chart.group().all().reduce(function(a, v){ return a + v.value; }, 0);

【解决方案2】：

我还需要在几个图表的饼图图例中添加 (%)。我最终从 dc.js-2.0.0-beta.5\src 修改了 legend.js 的副本，并将其包含在我的页面中。

有关工作示例，请参阅 http://jsfiddle.net/za8ksj45/36/

    The first ~260 lines is the modified legend.js that can be put in a separate file.
    (I don't have a place I could serve it from so I had to include the file content).

    The main modification starts at line ~88

            itemEnter.append('text')
            .text(function(d) { 
                var legendText = d.name;
                if (_showPercent) {
                    var groupTotal = d.chart.group().all().reduce(function(a, v){ return a + v.value; }, 0);
                    //legendText = legendText + " (" + (100*d.data/groupTotal).toFixed(_percentDecimals) + "%)";
                    //legendText = legendText + " = " + (100*d.data/groupTotal).toFixed(_percentDecimals) + "%";
                    legendText = legendText + " - " + (100*d.data/groupTotal).toFixed(_percentDecimals) + "%";                                              
                }
                return legendText; 
            })
            .attr('x', _itemHeight + LABEL_GAP)
            .attr('y', function () {
                return _itemHeight / 2 + (this.clientHeight ? this.clientHeight : 13) / 2 - 2;
            });

修改包括legend()的两个新方法
.displayPercent（默认=false 以保持原始行为相同）
.percentDecimals（默认=1）

最难弄清楚的部分是以下行：

 var groupTotal = d.chart.group().all().reduce(function(a, v){ return a + v.value; }, 0);

它计算驱动饼图的当前过滤组的总数，该饼图可用于计算百分比。

我使用了几个不同的字符串来显示百分比。它可能应该被替换为这样的字符串： - (%%) 其中 %% 被替换为实际百分比。这样您就可以为每个图例自定义它，而无需接触代码。

非常适合我目前使用的一堆饼图。我想在 stackoverflow 上分享这个，因为我自己从这个网站得到了很多帮助。如果这有用，我可以稍微扩展一下并将其提交以包含在将来的某个版本中。

【讨论】：

好像是四年后的事了，但如果你不提交这个我认为这将是对 dcjs 的一个很好的补充！

【解决方案3】：

现在您可以简单地在dc.legend() 对象中使用.legendText() 方法！

在您的特定情况下，解决方案是：

var chart = dc.pieChart(selector, this.chartGroup)
  .width(200).height(200)
  .dimension(this.dimension)
  .group(this.group)
  ...
  .legend(dc.legend().x(10).y(255).gap(5).horizontal(true).legendText(function(d) {
    return d.key + ': ' + d.value;
  }))

chart.render();

此方法定义为here。

【讨论】：