如何更改饼图高图中的字体属性？

Question

我使用的是pie Highchart.js插件，我正在尝试更改某些包含百分比类型的标签的字体属性。

我试过，但没有工作... 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> 

---

我错过了什么？任何想法或建议要做到这一点？提前致谢。

Answer 1

您可以设置由Highschart.js产生的内嵌样式，加入了dataLabels块用的plotOptions - >pie和定义一些样式属性：

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

，这里是你的更新tinker。

如果您还想在style块中控制字体的颜色，则需要使用fill属性。

这是得到默认设置的属性（你可能想用style设置覆盖）：

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

，但你可以定义，如果你需要更多。

注：您也可以通过将dataLabels对象通过data块控制单个标签的样式，你定义你的扇形边的一个风格的方式：

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