javascript 如何更改饼图高图中的字体属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16349299/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the font properties in a pie highchart?
提问by harrison4
I'm using the pie Highchart.jsplugin, and I'm trying to change some font properties of the labels which contains the type of the percentajes.
我正在使用pie Highchart.js插件，并且我正在尝试更改包含百分比类型的标签的一些字体属性。
I tried this but does not work... http://tinker.io/3fc64/6
我试过这个但不起作用...... http://tinker.io/3fc64/6
JS
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
CSS
@import url(http://fonts.googleapis.com/css?family=Lato);
HTML
HTML
<div id="container" style="width:100%; height:400px;"></div>
What I miss? Any idea or advice to do this? Thanks in advance.
我想念什么？任何想法或建议来做到这一点？提前致谢。
回答by Martin Turjak
You can set the inline style that is produced by Highschart.js, by adding a dataLabelsblock with to the plotOptions-> pieand defining some style properties:
您可以设置由 Highschart.js 生成的内联样式，方法是dataLabels在plotOptions-> 中添加一个块pie并定义一些样式属性：
plotOptions: {
pie: {
cursor: 'pointer',
dataLabels: {
enabled: true,
color: 'red',
style: { fontFamily: '\'Lato\', sans-serif', lineHeight: '18px', fontSize: '17px' }
}
}
}
and here is your updated tinker.
这是您更新的修补程序。
If you want to control the color of the font also in the styleblock, you need to use the fillproperty.
如果要在style块中也控制字体的颜色，则需要使用该fill属性。
This are the properties that get set by default (and you might want to override with the stylesettings):
这是默认设置的属性（您可能希望使用style设置覆盖）：
font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666;
line-height:14px;
fill:#666;
but you can define a lot more if you need.
但如果需要，您可以定义更多。
Note:You can also control the style for individual labels by passing the dataLabelsobject through the datablock, the way you defined the style of one of your pie wedges:
注意：您还可以通过将dataLabels对象传递给data块来控制单个标签的样式，就像您定义饼状楔形的样式一样：
{
name: 'Example1',
y: 40,
sliced: true,
color: 'rgb(10,200,23)',
dataLabels: { style:{ /* your style properties here */ }}
}
