高图中钟形曲线的不同填充不透明度

编程问答 2022-06-14

问题描述

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

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

var pointsInInterval = 5;

Highcharts.chart('container',{
    chart: {
        margin: [50,50,50],events: {
            load: function () {
                Highcharts.each(this.series[0].data,function (point,i) {
                    var labels = ['4σ','3σ','2σ','σ','μ','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'
        },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，但这不起作用，并且代码实现太长了。

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

有没有简单的方法可以实现这种行为？

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

highchartsreact-highchartsreactjsreactjs