2013-09-02 3 views
0

Я следующий круговую диаграмму: http://jsfiddle.net/wjqrh/76/Центрирующие этикетки в пироге. Highcharts

new Highcharts.Chart({ 
     chart: { 
      renderTo: 'f-chart-container', 
      type: 'pie', 
      backgroundColor: 'rgba(255, 255, 255, 0)' 
     }, 
     title: { 
      text: '' 
     }, 
     plotOptions: { 
      pie: { 
       shadow: true, 
       dataLabels: { 
        formatter: function() { 
         return '<span style="color: ' + this.point.color + '; font-weight: bold; font-size: 115%">' 
          + this.point.percentage.toFixed(1) 
          + '%</span>'; 
        }, 
        distance: 3, 
        connectorWidth: 0, 
        x: 0, 
        y: 0 
       } 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.point.name + '</b>: ' 
        + this.point.y 
      } 
     }, 
     series: [ 
      { 
       name: '', 
       data: data, 
       size: '73%', 
       innerSize: '50%', 
       showInLegend: false 
      } 
     ], 
     colors: colors 
    }); 

Метка фиолетового сектора помещается где-то правы, но я хотел бы, чтобы поместить его точно в центре, как и третий (зеленый) этикетке сектора отображается , То же самое относится к позиционированию ярлыков с оранжевыми и голубыми секторами.

Как заставить ярлыки размещать в центре сектора?

ответ

1

Только то, что приходит мне на ум, использует функцию translate(), которая позволяет перемещать элементы SVG.

http://jsfiddle.net/wjqrh/77/

chart.series[0].data[5].dataLabel.translate(275,520); 
+0

Спасибо, но это значит, что я не в состоянии применить исправления автоматически для других наборов данных? – ivkremer

+0

К сожалению, нет, потому что мы каждый раз определяем каждую позицию. –