Я использую 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'
}
},
цвет меняется в зависимости от моего значения, но размер шрифта - нет. Любая помощь будет оценена по достоинству.