Areat Chart多行渐变颜色

Question

嗨我正在研究highcharts的渐变颜色，当我有多行时，渐变的颜色仍然是蓝色，它显示基于图例颜色，我尝试过很多东西但是没有用，[Js Fiddle链接] [1 ]

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

Answer 1

您必须为每个系列定义渐变，而不是在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

Answer 2

您还可以将渐变颜色定义为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