首页 文章

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

提问于
浏览 次
0

我想在图例中显示“未确认”和“已确认”，并将金额显示为饼图上的标签 . 我没有看到在指令选项中实现这一点的方法 .

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

enter image description here

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

2 回答

  • 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
}
    回复于
  • 0

    试试这段代码：

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

相关问题