Jak zmienić właściwości czcionki w wykresie kołowy?

Question

Używam wtyczki pie Highchart.js i próbuję zmienić niektóre właściwości czcionki etykiet, które zawierają typ procentów.

próbowałem tego, ale nie działa ... http://tinker.io/3fc64/6

JS

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      style: { 
       fontFamily: 'Lato', 
       color: "red" 
      } 
     }, 
     plotOptions: { 
      pie: { 
       cursor: 'pointer' 
      } 
     }, 
     credits: false, 
     title: false, 
     tooltip: false, 
     series: [{ 
      type: 'pie', 

      data: [ 
       { 
        name: 'Example1', 
        y: 40, 
        sliced: true, 
        color: "rgb(10,200,23)" 
       }, 
       ['Example2', 12.0], 
       ['Example3',  26.8], 
       ['Example4', 8.5], 
       ['Example5',  6.2], 
       ['Example6', 0.7] 
      ] 
     }] 
    }); 
}); 

CSS

@import url(http://fonts.googleapis.com/css?family=Lato); 

HTML

<div id="container" style="width:100%; height:400px;"></div> 

---

Co mnie ominęło? Masz pomysł lub poradę? Z góry dziękuję.

Answer 1

Można ustawić styl inline, który jest produkowany przez Highschart.js, dodając dataLabels z bloku do plotOptions ->pie i zdefiniowanie pewnych właściwości stylu:

plotOptions: { 
    pie: { 
     cursor: 'pointer', 
     dataLabels: { 
      enabled: true, 
      color: 'red', 
      style: { fontFamily: '\'Lato\', sans-serif', lineHeight: '18px', fontSize: '17px' } 
     } 
    } 
} 

i tutaj jest aktualizowany tinker.

Jeśli chcesz kontrolować kolor czcionki również w bloku style, musisz użyć właściwości fill.

To są właściwości, które się domyślnie ustawione (a może chcesz nadpisać z ustawieniami style):

font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; 
font-size:11px; 
color:#666; 
line-height:14px; 
fill:#666; 

ale można zdefiniować wiele więcej, jeśli trzeba.

Uwaga: Można również kontrolować styl dla poszczególnych etykiet przekazując obiekt dataLabels przez blok data, sposób zdefiniowany styl jednego z klinów:

{ 
name: 'Example1', 
y: 40, 
sliced: true, 
color: 'rgb(10,200,23)', 
dataLabels: { style:{ /* your style properties here */ }} 
}