区域图表多线渐变颜色答案

【问题标题】：Areat Chart multi lines gradient colors区域图表多线渐变颜色
【发布时间】：2019-02-18 23:29:01
【问题描述】：

嗨，我正在研究 highcharts 的渐变颜色，当我有多条线时，渐变的颜色仍然是蓝色，它应该基于图例颜色，我尝试了很多东西，但没有奏效， [Js Fiddle 链接][1]

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

【问题讨论】：

标签： highcharts

【解决方案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

【讨论】：

感谢您的回复，有什么方法可以为 plotOptions 对象中的多行应用渐变颜色，而不是在系列对象中

【解决方案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

【讨论】：