Question

我正在研究与工具提示中的当前图形相比，我可以显示切片的百分比的方法。

首先，我尝试寻找与chart.labelType: 'percent'类似的内容，但看起来没有这样的选择。

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

我使用的是角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方法自定义工具提示消息，您可以将其设置为返回如下内容：

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

希望有所帮助！

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

1 个答案: