主题

优质

小牛编辑

132浏览

2023-12-01

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);