Размер шрифта легенды Highcharts
Я использую Highcharts для своей веб-страницы, и я не могу понять, как правильно изменить размер шрифта заголовка и ключа внизу. Я использую базовый столбец с зеленым фоном: http://www.highcharts.com/demo/column-basic/dark-green
В настоящее время это мой код:
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:
<div id="content" style="min-width: 300px; height: 1000px; margin: 2px; margin-bottom: 3px"></div>
и, как указано, я использую зеленую тему Highcharts, предоставленную веб-сайтом, когда вы нажимаете визуальную тему.
Теперь моя проблема в том, когда я меняю:
legend: {
itemStyle: {
color: 'white',
fontWeight: 'bold',
fontSize: '20px'
}
в зависимости от того, насколько большой размер моего шрифта составляет 4 значения (2009, 2010, 2011, 2012), либо не видимы, либо выходят за рамки под диаграммой. Сам ящик не изменяет размер (что он делает в jfiddle, который не включает тему). То же самое происходит с:
title: {
text: 'Title',
style:{
color: 'white',
fontSize: '25px'
}
},
цвет меняется в зависимости от моего значения, но размер шрифта - нет. Любая помощь будет оценена по достоинству.
Ответы
Ответ 1
В этой теме используется шрифт вместо fontSize. Таким образом, легенда определяется как:
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
Если вы определяете свой шрифт и fontSize, он будет работать (кажется мне ошибкой, но, возможно, это особенность):
legend: {
itemStyle: {
fontSize:'20px',
font: '20pt Trebuchet MS, Verdana, sans-serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
Я предполагаю, что заголовок имеет то же самое, что и происходит.
http://jsfiddle.net/kHzr9/
