不同的fillOpacity到highcharts中的钟形曲线答案

【问题标题】：Different fillOpacity to a bellcurve in highcharts不同的fillOpacity到highcharts中的钟形曲线
【发布时间】：2020-09-10 03:38:31
【问题描述】：

我正在使用 HighCharts 和 Highcharts-react-official 在我的项目中使用 highcharts。我能够绘制钟形曲线图。这是代码实现：

var data = [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4,
    4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2,
    3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3,
    3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3,
    2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3,
    2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3,
    2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6,
    3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2,
    2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7,
    3.2, 3.3, 3, 2.5, 3, 3.4, 3
];

var pointsInInterval = 5;

Highcharts.chart('container', {
    chart: {
        margin: [50, 0, 50, 50],
        events: {
            load: function () {
                Highcharts.each(this.series[0].data, function (point, i) {
                    var labels = ['4σ', '3σ', '2σ', 'σ', 'μ', 'σ', '2σ', '3σ', '4σ'];
                    if (i % pointsInInterval === 0) {
                        point.update({
                            color: 'black',
                            dataLabels: {
                                enabled: true,
                                format: labels[Math.floor(i / pointsInInterval)],
                                overflow: 'none',
                                crop: false,
                                y: -2,
                                style: {
                                    fontSize: '13px'
                                }
                            }
                        });
                    }
                });
            }
        }
    },

    title: {
        text: null
    },

    legend: {
        enabled: false
    },

    xAxis: [{
        title: {
            text: 'Data'
        },
        visible: false
    }, {
        title: {
            text: 'Bell curve'
        },
        opposite: true,
        visible: false
    }],

    yAxis: [{
        title: {
            text: 'Data'
        },
        visible: false
    }, {
        title: {
            text: 'Bell curve'
        },
        opposite: true,
        visible: false
    }],

    series: [{
        name: 'Bell curve',
        type: 'bellcurve',
        xAxis: 1,
        yAxis: 1,
        pointsInInterval: pointsInInterval,
        intervals: 4,
        baseSeries: 1,
        zIndex: -1,
        marker: {
            enabled: true
        }
    }, {
        name: 'Data',
        type: 'scatter',
        data: data,
        visible: false,
        marker: {
            radius: 1.5
        }
    }]
});

正确绘制贝尔曲线，但我想为不同范围的数据实现不同的填充不透明度。我尝试过使用 zone-Stops 但这不起作用并且代码实现太长。

我也提供了我的要求的图片。

有什么简单的方法可以实现这种行为吗？

【问题讨论】：

这是您想要达到的结果吗？演示：jsfiddle.net/BlackLabel/c8y20xed
@SebastianWędzel 是的，而是垂直显示区域，希望它水平显示。
@SebastianWędzel 我在问题中添加了一张图片。我也想达到同样的效果。

标签： reactjs highcharts react-highcharts

【解决方案1】：

根据 cmets - 它可以通过使用zones 功能并将series.zoneAxis 定义为“x”来实现。

演示：https://jsfiddle.net/BlackLabel/3g8061k5/

{
    ...,
    zoneAxis: 'x',
    zones: [{
      value: 2.18,
      color: 'rgb(255, 0, 0, 0.25)'
    }, {
      value: 2.62,
      color: 'rgb(0, 102, 255, 0.25)'
    }, {
      value: 3.49,
      color: 'rgb(51, 204, 51, 0.25)'
    }, {
      value: 3.92,
      color: 'rgb(0, 102, 255, 0.25)'
    }, {
      color: 'rgb(255, 0, 0, 0.25)'
    }, ]
 }

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

API：https://api.highcharts.com/highcharts/series.line.zoneAxis

【讨论】：