你如何制作d3图表标题？

Question

我试着用angular-nvd3制作饼图 - 这个字符很有用，并且是动画的，但我想在“标题”中设置动画的百分比。所以，作为焦炭动画，这个比例会上升。有什么建议么？

$timeout(function(){  
    ctrl.data[0].y = $scope.goal.part; //some number greater than 0 
},500) 

ctrl.data = [{ 
key: "Steps", 
y: 0, 
color: ctrl.colors.color2 
},{ 
key: "Left to goal", 
y: $scope.goal.whole, 
color: ctrl.colors.color 
}]; 

ctrl.options = { 
chart: { 
    type: 'pieChart', 
    height: 325, 
    x: function(d){return d.key;}, 
    y: function(d){return d.y;}, 
    showLabels: false, 
    duration: 1200, 
    labelThreshold: 0.01, 
    labelSunbeamLayout: true, 
    width: 325, 
    title: d3.format('%')(ctrl.data[0].y/ctrl.data[1].y), 
    donut: true, 
    donutRatio: 0.70, 
    tooltips: false, 
    showLegend: false 
} 
}; 




    <nvd3 options="ctrl.options" data="ctrl.data"></nvd3> 

Answer 1

您需要将标题移出图表并在与图表相同的级别创建标题对象。

尝试这样的：

ctrl.options = { 
    chart: { 
    type: 'pieChart', 
    height: 325, 
    x: function(d){return d.key;}, 
    y: function(d){return d.y;}, 
    showLabels: false, 
    duration: 1200, 
    labelThreshold: 0.01, 
    labelSunbeamLayout: true, 
    width: 325, 
    donut: true, 
    donutRatio: 0.70, 
    tooltips: false, 
    showLegend: false 
    }, 
    title :{ 
    enable: true, 
    text: d3.format('%')(ctrl.data[0].y/ctrl.data[1].y), 
    } 
}; 

Described here in the docs Wrapper section