Highcharts - 在面积图中如何为多个系列使用渐变色？答案

【问题标题】：Highcharts - In area chart how to use gradient color for multiple series?Highcharts - 在面积图中如何为多个系列使用渐变色？
【发布时间】：2016-12-26 06:24:22
【问题描述】：

期待每个系列区域都有不同的渐变颜色。

试过我已经阅读了 Highcharts 演示，了解如何用渐变颜色填充一个区域系列：

fillColor: {
  liearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
  stops: [0, 'red'],
         [1, 'white']
}

但是，我不知道如何为每个系列区域设置不同的渐变颜色。

因为我英文不好，上传两张图把我的问题说清楚，右边是我预期的结果。

更新：感谢@Alex Denisov，每个系列都有不同的 linearGradient 颜色，但现在问题是颜色下的点，尤其是最后一个。

总之，是否有可能设置每个系列独立的linearGradient颜色，没有覆盖。

更新：https://jsfiddle.net/TabGre/fyxqsq4L/1/

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

您可以将每个系列的fillColor 包含在series 数据中，如下所示：

plotOptions: {
        area: {
            stacking: 'normal'
        }
    },

series: [{
        name: 'Series 1',
        data: [502, 635, 809, 947, 1402, 3634, 5268],
        lineWidth: 3,
        lineColor: 'rgba(58, 204, 188, 1)',
        marker: {
          lineWidth: 1,
          lineColor: 'rgba(58, 204, 188, 1)',
          fillColor: 'rgba(58, 204, 188, 1)'
        },
        fillColor: {
            linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
            stops: [
                [0, 'rgba(58, 204, 188, 1)'],
                [1, 'rgba(255,255,255,.25)']
            ]
        },
    }, {
        name: 'Series 2',
        data: [106, 107, 111, 133, 221, 767, 1766],
        lineWidth: 3,
        lineColor: 'rgba(247, 106, 1, 1)',
        marker: {
          lineWidth: 1,
          lineColor: 'rgba(247, 106, 1, 1)',
          fillColor: 'rgba(247, 106, 1, 1)',
          symbol: 'circle'
        },
        fillColor: {
            linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
            stops: [
                [0, 'rgba(247, 106, 1, 1)'],
                [1, 'rgba(255,255,255,.25)']
            ]
        },
    }]

【讨论】：

谢谢，它有效，但现在我想我应该深入了解 `linearGradient' 的价值以及最好的不透明度设置是什么
稍微编辑了我的代码，以允许为每个系列独立设置线和点属性的样式，这是一个有效的 JSFiddle - jsfiddle.net/23w97oLe/2 - 关于“封面”，你能分享你的代码的 JSFiddle正在合作吗？
干得好，关键是区域'堆叠'等于'正常'来实现这一点吗？
在这种情况下，指定 plotOptions 是可选的，因为默认值可以正常工作。以下是关于 plotOptions.area.stacking 的更多信息：api.highcharts.com/highcharts/plotOptions.area.stacking