我正在使用 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>
我想念什么?有什么想法或建议吗?提前致谢。
最佳答案
您可以设置由 Highschart.js 生成的内联样式,方法是将 dataLabels
block 添加到 plotOptions
-> pie
并定义一些样式属性:
plotOptions: {
pie: {
cursor: 'pointer',
dataLabels: {
enabled: true,
color: 'red',
style: { fontFamily: '\'Lato\', sans-serif', lineHeight: '18px', fontSize: '17px' }
}
}
}
这是您更新的 tinker .
如果你想在 style
block 中也控制字体的颜色,你需要使用 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
block 来控制单个标签的样式,就像您定义你的一个馅饼楔子的风格:
{
name: 'Example1',
y: 40,
sliced: true,
color: 'rgb(10,200,23)',
dataLabels: { style:{ /* your style properties here */ }}
}
关于javascript - 如何更改饼图 Highcharts 中的字体属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16349299/