Линейная диаграмма Highchart - ряд данных с несколькими осями - 2-я серия, расположенная посередине оси X

Question

Я хотел бы разместить 2-ю серию данных в середине оси X (перевернутая линейная диаграмма).Вот скрипка, и вот результат, который я хотел бы получить: https://jsfiddle.net/r03bvcj1/ https://i.imgur.com/Irqt4hi.png

Мне удалось заставить его работать частично для оси Y. Однако линия толерантности воздействия исчезла дляпо какой-то причине, и я хотел бы иметь его против оси X.https://jsfiddle.net/r03bvcj1/2/

Любая помощь / указатели будут очень оценены.

var chart;
chart=  Highcharts.chart('div-impactTolerance', {
    chart: {
        type: 'line',
        inverted: true,
        events: {
            load: function() {
                var check = $('#div-impactTolerance').highcharts();
                var min = check.yAxis[0].min;
                var max = check.yAxis[0].max;
                var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
                if (pLine > max) {
                    check.yAxis[0].setExtremes(null, pLine);
                }
                if (pLine < min) {
                    check.yAxis[0].setExtremes(pLine, null);
                }
            }
        }
    },
    tooltip: {
        formatter: function () {
            var formatter = this.y >1 ? ' days':' day';
            var header ='<span style="font-size: 10px">' + this.key + '</span><br/>';
            var point =  this.series.name + ': <b>' + this.y +  formatter + '</b><br/>';
            return header + point;
        }
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Impact Tolerance'
    },

    xAxis: [{
        title: {
            text: "Severity"
        },
        gridLineWidth: 1,
        categories: ['Very High','High','Medium','Low']
    },


{
   visible: true,
          title: {
            text: "T"
        },
        gridLineWidth: 1,
        categories: [1,2,3,4],
          opposite: true
    }, 
],
      yAxis: {
        tickInterval: 1,
        allowDecimals:false,    
        title: {
            text: "Time (days)"
        },

        min: 0,
        gridLineWidth: 0,
        minPadding: 0.30,
        plotLines: [{
            color: '#FF0000',
            width: 2,
            value: 6,
            dashStyle: 'longdashdot',
            label: {
                text: 'Impact Tolerance ' ,
                verticalAlign: 'middle',
                textAlign: 'center',

                x: -15
            },
        }]
    },
    series: [
    {
        name: 'Scenario Testing',
        states: {
            hover: {
                enabled: false
            }
        },
        data: [5,7,9,11,12,14,17,18],
        xAxis: 1,
        lineWidth: 0,
        showInLegend: true,
        marker: {
            radius: 10
        },
        threshold: 6,
        negativeColor: 'green',
        color: 'red',
        tooltip: {
            valueDecimals: 2
        }
    },
                {
        name: 'Outage Duration',
        states: {
            hover: {
                enabled: false
            }
        },
        data: [1,2,3,4],
        xAxis: 0,
        lineWidth: 0,
        showInLegend: true,
        marker: {
            radius: 10
        },
        threshold: 6,
        negativeColor: 'green',
        color: 'red',
        tooltip: {
            valueDecimals: 2
        }
    }
    ]
});

Answer 1

В настоящее время есть две категории справа на одну категорию слева. Вам следует настроить данные таким образом, чтобы значение x не превышало количество категорий:

xAxis: [{
        ...,
        categories: ['Very High', 'High', 'Medium', 'Low']
    },
    {
        ...,
        categories: [1, 2, 3, 4]
    },
],
...,
series: [{
        ...,
        data: [
            [0, 5],
            [0, 7],
            [1, 9],
            [1, 11],
            [2, 12],
            [2, 14],
            [3, 17],
            [3, 18]
        ]
    },
    {
        ...,
        data: [1, 2, 3, 4]
    }
]

Демо: https://jsfiddle.net/BlackLabel/Lhpt2zdb/

Документы: https://www.highcharts.com/docs/chart-concepts/axes