基于百分比的 Highchart 背景

Question

我正在使用 angular ionic 中的 highchart 从 2 天开始尝试这个设计我无法理解为什么我没有得到颜色我可以根据我需要的端点获得值与下面使用高图表附加的设计相同，除了价值没有显示任何其他选择，或者我们也可以在高图表中实现它

this.moistureGraphOptions = {
            chart: {
                events: {
                    load: function () {
                        var chart = this,
                            xAxis = chart.xAxis[0],
                            plotLines = xAxis.plotLinesAndBands,
                            newOptions,
                            coordinates = [];

                        plotLines.forEach(function (plot, index) {
                            if (plot.id === 'gradient-plot-line') {
                                var plotLine = plot,
                                    path = plot.svgElem.d.split(' ');

                                coordinates = [
                                    +path[1],
                                    +path[2],
                                    +path[4],
                                    +path[5]
                                ];

                                newOptions = plotLine.options;
                                newOptions.color = {
                                    linearGradient: [0, 0, 0, coordinates[1] + 247],
                                    stops: [
                                        [0, '#F7A35C'],
                                        [1, '#7ACCC8']
                                    ]
                                };
                            }
                            xAxis.removePlotLine('gradient-plot-line');
                        });
                        xAxis.addPlotLine(newOptions);
                    }
                }
            },
            title: {
                text: null
            },
            xAxis: {
                categories: [],
                labels: {
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Helvetica-light'
                    }
                },
                plotLines: [{
                    id: 'gradient-plot-line',
                    width: 400,
                    value: 5.5
                }]
            },
            yAxis: [
                {
                    title: {
                        text: 'Value',
                    },
                },
            ],
            credits: { enabled: false },
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
            },
            series: [
                {
                    name: 'Values',
                    yAxis: 0,
                    data: [],
                    color: '#d03c3f'
                }
            ],
            exporting: {
                enabled: false
            },
        };

Highcharts image

Answer 1

您可以在 load 事件中使用 yAxis.plotBands 而不是自定义代码。

    yAxis: [{
        reversed: true,
        title: {
            text: 'Value',
        },
        plotBands: [...]
    }]

---

现场演示： http://jsfiddle.net/BlackLabel/qdwp843m/

API参考：https://api.highcharts.com/highcharts/yAxis.plotBands