我正在使用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调用:
<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'
}
},
我的颜色会根据数值变化,但字体大小不会改变。感谢任何帮助。
color:'white'
并不是最好的想法,我认为... - Paweł Fus