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

Question

我有一个显示标准偏差曲线(钟形曲线)的 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>

Answer 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