Highcharts 图表主题是包含样式相关配置的配置文件,我们提供了多款主题文件,可以到 下载中心 下载获取。主题使用也非常方便,只需要在 highcharts.js 后引入对应的文件即可
如何创建主题文件
将图表的样式和数据配置分离是非常有必要的,样式分离后独立成主题可以在对页面上所有图表有效。
创建主题文件很简单,只需要将样式相关配置通过 Highcharts.setOptions()
函数生效(这也是我们提供的主题使用的方法),实例代码如下:
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
'#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle:{
color: 'gray'
}
}
};
// 使主题配置生效
Highcharts.setOptions(Highcharts.theme);