图例不同于标签、饼图、Angular-nvD3答案

【问题标题】：Legend different from labels, Pie Chart, Angular-nvD3图例不同于标签、饼图、Angular-nvD3
【发布时间】：2015-10-22 03:12:42
【问题描述】：

我想在图例中显示“未确认”和“已确认”，并将金额显示为饼图上的标签。我在指令选项中看不到实现此目的的方法。

http://krispo.github.io/angular-nvd3/#/pieChart

Javascript 选项和数据：

 $scope.pie = {
    options: {
        chart: {
            type: 'pieChart',
            height: 300,
            margin: {
                top: 0,
                right: 20,
                bottom: 0,
                left: 20
            },
            color: ["#97bbcd", "#dcdcdc"],
            x: function(d){return d.y;},
            y: function(d){return d.y;},
            legend: {
                updateState:false
            },
            showLabels: true,
            showLegend: true,
            transitionDuration: 500,
            labelThreshold: 0.01
        }
    },
    data: [
            { 
                key: 'Not Acknowledged', 
                y: 18
            },
            {
                key: 'Acknowledged', 
                y: 44
            }
        ]
};

【问题讨论】：

标签： angularjs nvd3.js

【解决方案1】：

试试这个代码：

$scope.pie = {
    options: {
        chart: {
            type: 'pieChart',
            height: 300,
            margin: {
                top: 0,
                right: 20,
                bottom: 0,
                left: 20
            },
            color: ["#97bbcd", "#dcdcdc"],
            x: function(d){return d.key;},
            y: function(d){return d.y;},
            legend: {
                updateState:false
            },
            showLabels: true,
            labelType: 'value',
            showLegend: true,
            transitionDuration: 500,
            labelThreshold: 0.01
        }
    },
    data: [
            { 
                key: 'Not Acknowledged', 
                y: 18
            },
            {
                key: 'Acknowledged', 
                y: 44
            }
        ]
};

【讨论】：

【解决方案2】：

由于图例是从 x 值生成的，因此您可以返回其 key 而不是 y。然后将labelType 设置为value，这将改为呈现饼图的值。

chart: {
    type: 'pieChart',
    height: 300,
    margin: {
        top: 0,
        right: 20,
        bottom: 0,
        left: 20
    },
    color: ["#97bbcd", "#dcdcdc"],
    x: function(d){return d.key;},
    y: function(d){return d.y;},
    labelType: 'value',
    legend: {
        updateState:false
    },
    showLabels: true,
    showLegend: true,
    transitionDuration: 500,
    labelThreshold: 0.01
}

【讨论】：