Angular-nvD3为甜甜圈图表添加标题

时间:2015-08-20 22:45:49

标签: javascript angularjs angular-nvd3

我很难获得显示圆环图的标题。这是我的傻瓜:http://plnkr.co/edit/nJBpvU3YFAGaoc5BTXi7?p=preview。以下是我提出的选项:

$scope.options = {
        chart: {
            type: 'pieChart',
            height: 450,
            donut: true,
            x: function(d){return d.key;},
            y: function(d){return d.y;},
            showLabels: true,


            pie: {
                startAngle: function(d) { return d.startAngle/2 -Math.PI/2 },
                endAngle: function(d) { return d.endAngle/2 -Math.PI/2 }
            },
            transitionDuration: 500,
            legend: {
                margin: {
                    top: 5,
                    right: 70,
                    bottom: 5,
                    left: 0
                }
            },
            title: "Hello"
        },
        title: {
          text: "Hello"
        }
    };

我尝试添加标题" Hello"在两个不同的地方,但它没有出现。谁能看到我做错了什么?

1 个答案:

答案 0 :(得分:0)

原来我需要将配置设置为扩展,以便在控制器中设置标题。

$scope.config = {
    extended: true
};

我还需要在html中设置配置:

<nvd3 options="options" data="data" config="config"></nvd3>

然后我可以将标题设置为启用并设置它的文本。我还可以通过将它放在css上来将标题放在圆环图的中间。

title: {
    enable: true,
    text: "TEST",
    css: {
        position: 'relative',
        left: '0px',
        top: '200px'
    }
}

以下是编辑过的plunkr:http://plnkr.co/edit/td4AIZUQV9wrLEHp8zlo?p=preview