Javascript 更改dc.js中图例的值

我用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;
}

    .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) + "%"
    }));

是否有一种方法可以使用以下内容格式化图例上的标签：

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;
}

    .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) + "%"
    }));

我还需要为几个图形向pieChart图例添加（%）。我最终修改了dc.js-2.0.0-beta.5\src中的一个legend.js副本，并将其包含在我的页面中

有关工作示例，请参见

    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;
            });

修改包括两个新的图例（）方法
.displayPercent（默认值=false以保持原始行为不变）
.percentDecimals（默认值=1）

最难理解的部分是下面一行：

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

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

我玩了两个不同的弦来显示百分比。可能应该用如下字符串替换：-（%%），其中%%替换为实际百分比。这样，您就可以为每个图例自定义它，而无需触摸代码

---

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

现在您只需在

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

此方法已定义。
最后一个答案似乎部分正确。我建议如下：

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;
}

    .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、 数据就是实际值。
这就像四年后，但如果您不提交此文件，我认为这将是对dcjs的一个伟大补充！如何计算变量
totalPrice
@Rusty:从下面@nico的答案中，您可以使用以下公式，尽管这确实意味着计算每个图例项的总值：
d.chart.group（）.all（）.reduce（函数（a，v）{return a+v.value；}，0）