没有良好排序的X轴值

Question

在附图中，x轴上的值不是有序的，它从1增加到112然后从101减少到0。

我问是否有任何方法可以使用Highcharts做同样的事情。

谢谢

Answer 1

示例如何做到这一点：http://jsfiddle.net/7wwpLLzt/9/

$('#container').highcharts({
    chart: {
        zoomType: 'xy'
    },
    xAxis: [{ // Primary yAxis
        min: 1,
        max: 224,
        startOnTick: false,
        endOnTick: false,
        maxPadding: 0,
        minPadding: 0,
        tickPositions: [1, 15, 33, 55, 78, 98, 112]
    }, {
        offset: 0,
        min: 1,
        max: 224,
        startOnTick: false,
        endOnTick: false,
        reversed: true,
        maxPadding: 0,
        minPadding: 0,
        showLastLabel: false,
        tickPositions: [1, 15, 33, 55, 78, 98, 112]
    }],
    tooltip: {
        shared: true
    },
    series: [{
        name: 'S1',
        type: 'spline',
        xAxis: 1,
        data: [
            [13, 7],
            [44, 3],
            [56, 4]
        ],
    }, {
        name: 'S2',
        type: 'spline',
        data: [
            [1, 2],
            [14, 3],
            [100, 6]
        ]
    }]
});

使用两个轴，一个用于左侧，一个用于右侧。

Answer 2

另一种方法是格式化x轴标签：jsfiddle.net/7wwpLLzt/5

xAxis: [{ // Primary yAxis

        labels: {
            formatter: function () {
                  var maxValue=112.6;  // max value on x 
                if ( this.value > maxValue )
                {
                    return  parseFloat(maxValue - ( this.value - maxValue)).toFixed(1);  
                }
                else
                {
                    return  parseFloat(this.value).toFixed(1);     
                }


            }
        }

    }],
        tooltip: 
      {
        formatter: function () {
            var xa = this.x;
            var maxValue=112.6;  // max value 
            if ( xa >maxValue )
            {
                xa = parseFloat(maxValue - ( xa - maxValue)).toFixed(1);
            }
            var s = '<b>' + xa + '</b>';

            $.each(this.points, function () {
                s += '<br/>' + this.series.name + ': ' +
                    this.y + 'm';
            });

            return s;
        },
        shared: true
    },