自定义高图中 x 轴标签的顺序

Question

对于某些分析，我希望首先在 x 轴上显示所有正值（按升序排列），然后是负范围，也按升序排列。

我尝试将负值和正值分开，并按照所需的顺序将它们合并，然后使用类别。

var data = [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]];
            
var neg = [], pos = [];

for(let i = 0; i < data.length; i++) {
    if(data[i][1] < 0)
    neg.push(data[i]);
  else 
    pos.push(data[i]);
}

neg.sort(function(x, y) {
    if(x[1] < y[1])
    return -1;
  if(x[1] > y[1])
    return 1;
   
  return 0;
});

pos.sort(function(x, y) {
    if(x[1] < y[1])
    return -1;
  if(x[1] > y[1])
    return 1;
   
  return 0;
});

var cat = [], x_axis = [];

for(let i = 0; i < pos.length; i++) {
    cat.push(pos[i][1]);
  x_axis.push(pos[i][0]);
}
for(let i = 0; i < neg.length; i++) {
    cat.push(neg[i][1]);
  x_axis.push(neg[i][0]);
}


console.log(cat);
console.log(x_axis);


Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    xAxis: {
        reversed: false,
        title: {
            enabled: true,
            text: 'Altitude'
        },
        labels: {
            format: '{value} km'
        },
        categories: cat
    },
    yAxis: {
        title: {
            text: 'Temperature'
        },
        labels: {
            format: '{value}°'
        },
        lineWidth: 2
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x} km: {point.y}°C'
    },
    plotOptions: {
        spline: {
            marker: {
                enable: false
            }
        }
    },
    series: [{
        name: 'Temperature',
        data: x_axis

    }]
});

我希望有固定的间隔值（例如 0, 10, 20 ... -90, -80, -70 ...），而不是 x 轴上的精确浮点数 预先感谢

Answer 1

您可以将所有正值转换为负值，将负值转换为正值，对数组进行排序并在工具提示和 x 轴标签中显示反转值。

例如：

const data = [
  [0, 15],
  [10, -50],
  [20, -56.5],
  [30, -46.5],
  [40, -22.1],
  [50, -2.5],
  [60, -27.7],
  [70, -55.7],
  [80, -76.5]
];

const reverseNumber = (value) => {
  if (value > 0) {
    return -Math.abs(value);
  }
  return Math.abs(value);
};

const processedData = data.map(dataEl => [
  reverseNumber(dataEl[1]),
  dataEl[0]
]);

processedData.sort((a, b) => a[0] - b[0]);

Highcharts.chart('container', {
  ...,
  xAxis: {
    ...,
    labels: {
      formatter: function() {
        return reverseNumber(this.value) + ' km';
      }
    }
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br/>',
    pointFormatter: function() {
      const point = this;
      return `${reverseNumber(point.x)} km: ${point.y}°C`;
    }
  }
});

---

现场演示：https://jsfiddle.net/BlackLabel/oh37t8Lb/

API 参考： https://api.highcharts.com/highcharts/tooltip.pointFormatter