图例不同于标签，饼图，Angular-nvD3

Question

我想展示＆＃34; Not notged＆＃34;和＃34;已确认＆＃34;在图例中，金额在饼图上显示为标签。我没有看到在指令选项中实现这一目标的方法。

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

  

Javascript选项＆amp;数据：

 $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
            }
        ]
};

Answer 1

由于图例是根据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
}

Answer 2

试试这段代码：

$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
            }
        ]
};