Html Highcharts 图例字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17730205/
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
Highcharts legend font sizes
提问by Ryan Sayles
I'm using Highcharts for my web page and I can't seem to figure out how to correctly change the font size of the title and key at the bottom. I'm using the basic column with green background: http://www.highcharts.com/demo/column-basic/dark-green
我正在为我的网页使用 Highcharts，但我似乎无法弄清楚如何正确更改底部标题和键的字体大小。我正在使用绿色背景的基本列：http: //www.highcharts.com/demo/column-basic/dark-green
Currently this is my code:
目前这是我的代码：
Function:
$(function () {
$('#content').highcharts({
chart: {
type: 'column'
},
legend: {
itemStyle: {
color: 'white',
fontWeight: 'bold',
fontSize: '20px'
}
},
title: {
text: 'Title',
style:{
color: 'white',
fontSize: '25px'
}
},
subtitle: {
text: 'Subtitle'
},
xAxis: {
categories: [
' '
]
},
yAxis: {
min: 0,
title: {
text: 'MMBTUs x 10,0000',
style:{
color: 'white',
fontSize: '25px'
}
},
labels: {
style: {
color: 'white',
fontSize:'25px'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2009',
data: [4900000]
}, {
name: '2010',
data: [4900000]
}, {
name: '2011',
data: [5500000]
}, {
name: '2012',
data: [5200000]
}]
});
});
Html call:
html调用：
<div id="content" style="min-width: 300px; height: 1000px; margin: 2px; margin-bottom: 3px"></div>
and as stated I'm using the Highcharts green theme provided by the website when you click view visual theme.
如前所述，当您单击查看视觉主题时，我正在使用网站提供的 Highcharts 绿色主题。
Now my problem is when I change:
现在我的问题是当我改变时：
legend: {
itemStyle: {
color: 'white',
fontWeight: 'bold',
fontSize: '20px'
}
depending on how big my font size is the 4 values (2009, 2010, 2011, 2012) are either not visable or the move out of the box below the chart. The box itself doesn't resize (which it does in jfiddle which doesn't include the theme). The same thing happens with:
根据我的字体大小有多大，4 个值（2009、2010、2011、2012）要么不可见，要么移出图表下方的框。盒子本身不会调整大小（它在不包含主题的 jfiddle 中会这样做）。同样的事情发生在：
title: {
text: 'Title',
style:{
color: 'white',
fontSize: '25px'
}
},
the color changes based on my value but the font size doesn't. Any help would be appreciated.
颜色会根据我的值而变化，但字体大小不会。任何帮助，将不胜感激。
回答by Barbara Laird
That theme uses font instead of fontSize. So, it's legend is defined as:
该主题使用字体而不是 fontSize。因此，它的图例定义为：
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
If you define your's with both font and fontSize, it'll work (seems like a bug to me, but maybe it's a feature):
如果你用 font 和 fontSize 定义你的，它会工作（对我来说似乎是一个错误，但也许它是一个功能）：
legend: {
itemStyle: {
fontSize:'20px',
font: '20pt Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
I assume the title has the same thing going on.
我假设标题有同样的事情发生。
