Question

我想将第二系列数据放置在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

当前，右侧有两个类别，左侧是一个类别。您应该以{{1}}值不超过类别数的方式调整数据：

实时演示： https://jsfiddle.net/BlackLabel/Lhpt2zdb/

文档： https://www.highcharts.com/docs/chart-concepts/axes

Highchart折线图–具有多轴的数据系列-位于X轴中间的第二系列

1 个答案: