在 highcharts 上具有负值的 nGradient 效果

Question

我有如下渐变效果折线图

plotOptions: {
                area: {
                    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')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            }

对于正值，我想在 0 处停止渐变效果。

对于负值，我希望对 0（反向）产生渐变效果并在 0 处停止。

会类似但是有渐变效果

如果需要，我可以将图表类型更改为面积图。

我需要做哪些改变才能实现这一目标？

Answer 1

这是您想要实现的输出吗？

我只改变了系列类型 areaspline。

演示：https://jsfiddle.net/BlackLabel/7t6x4uzg/

编辑

您可以使用区域为特定范围定义填充颜色。

演示：https://jsfiddle.net/BlackLabel/kx209nzh/

API: https://api.highcharts.com/highcharts/series.line.zones.fillColor

在 highcharts 上具有负值的 nGradient 效果

nGradient effect with negative values on highcharts

highcharts

angular-highcharts