reactjs - 不同的fillOpacity到highcharts中的钟形曲线

问题描述

我正在使用 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 但这不起作用，并且代码实现太长了。

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

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

标签： reactjshighchartsreact-highcharts

根据评论 - 它可以通过使用该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

reactjs - 不同的fillOpacity到highcharts中的钟形曲线

问题描述

解决方案

推荐阅读