Highcharts - Как установить градиентную тему для каждого типа графиков глобально? - PullRequest
0 голосов
/ 30 апреля 2018

Я пытаюсь установить глобальные параметры в 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]]
    ]
  }))
})

1 Ответ

0 голосов
/ 01 мая 2018

Вы можете достичь желаемого результата, снова используя 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...