为了进行某种分析,我希望首先在x轴上列出所有正值(以递增顺序排列),然后是负范围,也以递增顺序排列.

For eg. here i'd want 0, 10, 20 before (-90 to -10)

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

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

    }]
});

This is what i achieved 而不是x轴上的精确浮点数,我希望有固定的间隔值(例如0,10,20.—90、—80、—70...) thanks in advance

推荐答案

您可以将所有正值转换为负值,将负值转换为正值,对数组进行排序,并在工具提示和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`;
    }
  }
});

Live demo:https://jsfiddle.net/BlackLabel/oh37t8Lb/

API Reference:https://api.highcharts.com/highcharts/tooltip.pointFormatter

Javascript相关问答推荐

积分计算和 colored颜色 判断错误

具有相同参数的JS类

为什么我的includes声明需要整个字符串?

react/redux中的formData在expressjs中返回未定义的req.params.id

Google Apps脚本中的discord邀请API响应的日期解析问题

浮动Div的淡出模糊效果

在Vite React库中添加子模块路径

在grafana情节,避免冲突的情节和传说

为什么!逗号和空格不会作为输出返回,如果它在参数上?

实现JS代码更改CSS元素

如何使onPaste事件与可拖动的HTML元素一起工作?

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法?

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存?

提交链接到AJAX数据结果的表单

连接到游戏的玩家不会在浏览器在线游戏中呈现

一个实体一刀VS每个实体多刀S

用于部分字符串的JavaScript数组搜索

无法检索与Puppeteer的蒸汽游戏的Bundle 包价格

未找到用于 Select 器的元素:in( puppeteer 师错误)

如何让noWrap在嵌套在Alert/AlertTitle组件中的排版组件中工作?