Angular-nvD3將標題添加到油炸圈餅圖

Question

我很難獲得顯示油炸圈餅圖的標題。這是我有的plunkr：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" 
     } 
    }; 

我試着在兩個不同的地方添加標題「你好」，但它沒有顯示出來。任何人都可以看到我做錯了什麼？

Answer 1

原來我需要將配置設置爲擴展才能在控制器中設置標題。

$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