3

我一直在尝试在NVD3 饼图上显示百分比，但我不知道该怎么做......我正在寻找这样的东西

首先，是否有图表选项或方法可以在饼图的每个部分内显示某些内容？如果是，是否可以选择显示百分比而不是确切值？

谢谢，周末愉快！

4

2 回答 2

9

从 NVD3 1.1.10 版本开始，可以调整标签的类型

只需调用chart.pie.labelType("percent");以相应的百分比标记每个切片。也可以显示每个切片的键labelType("key")或值labelType("value")。

完整示例：

var slices = [
    {name:"Part 1",value:23},
    {name:"Part 2",value:38},
    {name:"Part 3",value:67}
];

nv.addGraph(function() {
    var chart = nv.models.pieChart()
        .x(function(d) { return d.name })
        .y(function(d) { return d.value })
        .color(d3.scale.category10().range())
        .width(300)
        .height(300);

    chart.pie.pieLabelsOutside(false).labelType("percent");

    d3.select("#chart")
        .datum(slices)
        .transition().duration(1200)
        .attr('width', 300)
        .attr('height', 300)
        .call(chart);

    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

    return chart;
});
于 2013-08-29T11:27:30.390 回答
6

我假设您已经能够使示例NVD3 饼图正常工作。

据我所知，唯一的方法是编辑pieChart.js. 从这里拉 NVD3 源代码，然后/ src / models /打开 pieChart.js并添加编辑：

tooltip = function(key, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + ' % </p>'
      }

或者这里是 pieChart.js 的 NVD3 托管链接，编辑line 19为如下所示'<p>' + y + '</p>'

确保在您的 html 页面中添加脚本，以便在加载时覆盖继承的 pieChart 设置nvd3.js <script src="your/path/to/pieChart.js" type="application/javascript"></script>

更新：

正如您所知，您传递到图表中的数据将按原样呈现，您将进行百分比计算并将其传递到图表中。饼图切片大小将根据您发送到图表中的数据进行计算。只是让你知道，不管你是否已经知道。

更新：2013 年 7 月 30 日

我只是偶然发现了编辑工具提示的正确方法，而无需修改 pieChart.js 文件。

var chart = nv.models.pieChart().x(function(d) {
    return d.key;
}).y(function(d) {
    return d.daily[0].sales;
}).showLabels(true).values(function(d) {
    return d;
}).color(d3.scale.aColors().range()).donut(true).tooltips(true).tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>'
});

只是想让你更新答案。所以现在你知道了两种方法。

希望它可以帮助你。

于 2013-05-31T15:30:19.777 回答