Question

我正在尝试使用angular-nvd3制作一个饼图 - 这个char工作并且是动画的，但我想在“标题”中设置百分比的动画。因此，随着char动画，百分比将上升。有什么建议吗？

$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

你如何动画d3图表标题？

1 个答案: