0

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

首先，我尝试寻找类似的东西，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。

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

4

1 回答 1

1

编辑：您提出了一个我没有考虑的重要观点，即当您从馅饼中删除部分时，总数（以及每个馅饼段的百分比部分）将发生变化。研究了如何解决这个问题，我发现您可以监视图表的 a 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);
    }
  },...
};

我已经用新代码更新了示例饼图 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>';
  }
}

希望有帮助！

于 2016-02-29T23:19:32.420 回答