angular-工具提示中的 nvd3 含量百分比

Question

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

首先我尝试寻找类似于 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。

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

Answer 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方法自定义工具提示消息，您可以将其设置为return，如下所示：

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

希望对您有所帮助！

angular-工具提示中的 nvd3 含量百分比

angular-nvd3 content percentage in tooltip

d3.js

angularjs

angular-nvd3