Графики цветов Areat Chart в несколько линий

Question

Привет, я работаю над градиентными цветами верхних графиков, когда у меня есть несколько линий, цвет градиента был все еще синим, он, по-видимому, основан на цвете легенды, я пробовал много вещей, но это не сработало, [Js Fiddle link] [1]

 [1]: https://jsfiddle.net/GnanaSagar/0etnkqa7/2/

Answer 1

Вы также можете определить цвета градиента как свойство colors, например:

var colors = ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"];

Highcharts.chart('container', {
    colors: (function() {
        var gradientColors = [];

        colors.forEach(function(color) {
            gradientColors.push({
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).setOpacity(0).get('rgba')]
                ]
            })
        });

        return gradientColors;
    })(),
    ...
});

Демонстрационная версия: https://jsfiddle.net/BlackLabel/ngzv6rhf/

API: https://api.highcharts.com/highcharts/colors

Answer 2

Вы должны определить градиент для каждой серии, а не в plotOptions, например:

  series: [{
    name: 'USA',
    data: [
      6, 11, 32, 110, 235,
      369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468
    ],
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, Highcharts.getOptions().colors[0]],
        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
      ]
    },
  }, {
    name: 'USSR/Russia',
    data: [
      5, 25, 50, 120, 150, 200, 426, 660, 869, 1060
    ],
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, Highcharts.getOptions().colors[1]],
        [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0).get('rgba')]
      ]
    },

  }]

Fiddle