Highcharts-如何在我的钟形曲线(标准偏差曲线)上绘制X轴线

问题描述 投票:1回答:1

我有一个Highchart,它显示了标准偏差曲线(贝尔曲线)。当x = 0时,我想绘制一条x轴垂直线。当我添加包含折线的代码时,图表消失了,所以我相信我需要更改的地方很明显:-)。就像信息一样,该图表在xAxis内没有“ plotLines:”也可以完美地工作。您能帮我吗?

查看我的脚本

<script>
var data = <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>;

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: 'red',
                            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: false,
        visible: true
    },
    plotLines: [{
            color: '#FF0000',
            width: 2,
            value: 0
        }]

],

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

    series: [{
        name: 'Bell curve asd',
        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
        }
    }],
    exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
    }
});
</script>

enter image description here

javascript php highcharts
1个回答
1
投票

绘图线应作为轴对象的属性添加:

xAxis: [{
        title: {
            text: 'Data'
        },
        visible: false
    }, {
        title: {
            text: 'Bell curve'
        },
        opposite: false,
        visible: true,
        plotLines: [{
            color: '#FF0000',
            width: 2,
            value: 0
        }]
    }
]

实时演示: http://jsfiddle.net/BlackLabel/4xcno5v9/

API参考: https://api.highcharts.com/highcharts/xAxis.plotLines

© www.soinside.com 2019 - 2024. All rights reserved.