工具提示中的 angular-nvd3 内容百分比答案

【问题标题】：angular-nvd3 content percentage in tooltip工具提示中的 angular-nvd3 内容百分比
【发布时间】：2016-02-29 22:16:09
【问题描述】：

我正在研究如何在工具提示中显示与当前图表相比的饼图百分比。

首先我尝试寻找类似于chart.labelType: 'percent' 的东西，但似乎没有这样的选项。

我现在要做的是根据文档计算chart.tooltip.contentGenerator 中的百分比，该函数应该传递5 个参数function (key, x, y, e, series) -> String 但是我只收到第一个参数。

我正在使用 angular 1.5.0、d3 3.5.16、nvd3 1.8.2 和 angular-nvd3 1.0.5。

在工具提示中显示百分比的最佳做法是什么？

【问题讨论】：

标签： angularjs d3.js angular-nvd3

【解决方案1】：

编辑：您提出了一个我没有考虑的重要观点，即当您从饼图中删除段时，总数（以及每个饼段的百分比部分）会发生变化。研究了如何解决这个问题，我发现您可以监控图表中的 stateChange，并配置发送此事件时发生的情况。

所以，我所做的是在触发该事件时通过过滤掉任何禁用的值来更新总数：

chart: {
  ...,
  dispatch: {
    stateChange: function(e) { 
      total = _.reduce(_.filter($scope.data, function(value) {
        return !value.disabled;
      }), function(result, value, key) {
        return result += parseFloat(value.y);
      }, 0);
      console.log(total);
    }
  },...
};

我已经用新代码更新了the example pie chart plunker，但其他一切都保持不变，除了我在工具提示中添加了每个键和更新后的总数，以便您可以验证它是否正常工作。但是您仍然会在图表首次加载时初始化总值：

var total = _.reduce($scope.data, function(result, value, key) {
  return result += parseFloat(value.y);
}, 0);

...并使用chart.tooltip.contentGenerator 方法自定义工具提示消息，您可以将其设置为返回如下内容：

tooltip: {
  contentGenerator: function (key, x, y, e, series) {
    return '<h4>' + ((key.data.y / total) * 100).toFixed(2) + '% of total</h4>';
  }
}

希望有帮助！

【讨论】：

我考虑过那样做。我对这种方法的主要问题是，如果你删除一块馅饼，总数不会得到更新。
是的，看起来可能就是这样。我试图避免每次发生变化时都进行额外的计算，但看起来这可能是最好的选择。我可能会使用 memoize 函数来解决这个问题。