Highcharts 图表主题是包含样式相关配置的配置文件,我们提供了多款主题文件,可以到 下载中心 下载获取。主题使用也非常方便,只需要在 highcharts.js 后引入对应的文件即可

在线试一试

如何创建主题文件

将图表的样式和数据配置分离是非常有必要的,样式分离后独立成主题可以在对页面上所有图表有效。

创建主题文件很简单,只需要将样式相关配置通过 Highcharts.setOptions() 函数生效(这也是我们提供的主题使用的方法),实例代码如下:

  1. Highcharts.theme = {
  2. colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
  3. '#FF9655', '#FFF263', '#6AF9C4'],
  4. chart: {
  5. backgroundColor: {
  6. linearGradient: [0, 0, 500, 500],
  7. stops: [
  8. [0, 'rgb(255, 255, 255)'],
  9. [1, 'rgb(240, 240, 255)']
  10. ]
  11. },
  12. },
  13. title: {
  14. style: {
  15. color: '#000',
  16. font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
  17. }
  18. },
  19. subtitle: {
  20. style: {
  21. color: '#666666',
  22. font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
  23. }
  24. },
  25. legend: {
  26. itemStyle: {
  27. font: '9pt Trebuchet MS, Verdana, sans-serif',
  28. color: 'black'
  29. },
  30. itemHoverStyle:{
  31. color: 'gray'
  32. }
  33. }
  34. };
  35. // 使主题配置生效
  36. Highcharts.setOptions(Highcharts.theme);

原文: https://www.hcharts.cn/docs/themes