时间戳

首页 > 解决方案 > Highcharts - 如何为每种类型的图形全局设置渐变主题？

javascript - Highcharts - 如何为每种类型的图形全局设置渐变主题？

问题描述

我正在尝试将全局选项设置到 Highcharts 中，因此当我创建一个新图形时，它的样式与我的其他图形完全一样，我设法设置了一个全局颜色数组来替换原来的颜色数组，以及一种渐变类型用于我的所有图表。现在我想为每种类型的图形（样条、列、饼图、面积等）使用不同类型的渐变

有没有人知道如何进行？

（顺便说一句，我使用 React 这就是为什么我必须调用 Highcharts.Highcharts 来访问该对象）

import Highcharts from 'react-highcharts'

const colors = ['#3B86FF', '#77E5AA', '#093fb9', '#6d00f6', '#FF006E', '#FFBE0B', '#1EFFBC', '#ff8b12']
const gradients = ['#87B5FF', '#9AFFC9', '#0078ff', '#852cf5', '#FC3C8F', '#FFD41F', '#7CFFD8', '#FFB364']

export default Highcharts.Highcharts.setOptions({
  colors: Highcharts.Highcharts.map(colors, (color, i) => ({
    linearGradient: {
      x1: 0, x2: 0, y1: 0, y2: 1
    },
    stops: [
      [0, color],
      [1, gradients[i]]
    ]
  }))
})

标签： javascriptreactjshighcharts

解决方案

setOptions您可以像这样再次使用来获得所需的结果：

Highcharts.setOptions({
  plotOptions: {
    line: {
        //color: Highcharts.getOptions().colors[0] - by default
    },
    spline: {
        color: Highcharts.getOptions().colors[1]
    },      
    column: {
        color: Highcharts.getOptions().colors[2]
    }, 
    pie: {
        color: Highcharts.getOptions().colors[3]
    }
  }
});

plotOptions.{your series type}描述给定类型的每个系列的默认选项。

现场演示：http: //jsfiddle.net/BlackLabel/d68m2qq8/

推荐阅读