Highcharts yAxis.max 动态管理刻度间隔

Posted 2023-03-14

【中文标题】Highcharts yAxis.max 动态管理刻度间隔

【英文标题】：Highcharts yAxis.max manage tick intervals dynamically

【发布时间】：2020-03-30 12:43:18

【问题描述】：

我正在尝试根据数据动态设置 y 值的最大值和最小值，但它对某些值有一些问题。我认为 highchart 无法设置没有正确刻度的值。

例如：最小值：3 和最大值 10。然后，highchart 不会设置这些值，而是设置一个范围为 0...14 的值。这只是一个示例值，有时我会得到 36000.14 的最小值和 454533.18 的最大值。

所以我的逻辑在这种情况下不起作用。 这是我目前拥有的部分代码：

data = [3.43, 3.58, 4.86, 8.55, 8.77, 4.44, 9.67]

maximum_val = Math.ceil(maximum_val) eg: 10
minimum_val = Math.floor(minimum_val) eg: 3
evolution_options.yAxis[$('#div_count_'+div).find('#y_axis_lbl').text()] = 
  min: minimum_val,
  max: maximum_val,
  title: false,
  labels: 
    style: 
      color: 'black'
    
  

更新

小提琴：http://jsfiddle.net/e3fy1vu9/

进一步的头脑风暴

我认为这是因为最小值不是最大值的倍数，所以 Highchart 无法计算如何分割刻度。如果有什么办法，我可以将最大值设置为最小值的倍数。

【问题讨论】：

你能在一些在线编辑器上重现你的案例吗？

用小提琴更新

【参考方案1】：

这是我的建议，如何根据定义的数据计算 yAxis 的最大值和最小值。

演示：https://jsfiddle.net/BlackLabel/0qwt1kx7/

  yAxis: 
    min: Math.floor(Math.min(...data)),
    max: Math.round(Math.max(...data)),
    tickAmount: Math.round(Math.max(...data)) - Math.floor(Math.min(...data)) + 1 //1 count the min or max as itself
  ,

请测试一下，如果它符合您的要求，请告诉我。因为 tickAmount 值取决于数据数组中包含多少值，并且可能需要对较大的数据进行一些修改。

编辑：

尝试使用此自定义解决方案来计算 yAxis 位置：

演示：http://jsfiddle.net/BlackLabel/ztaj6Lkd/

var positions = [],
    tickNumbers = 5,
    tick = Math.floor(Math.min(...data));

for(let i = 0; i < tickNumbers; i++) 
    positions.push((Math.round(tick * 100) / 100));
  tick += Math.round(Math.max(...data)) / tickNumbers

//add the max 
positions.push(Math.round(Math.max(...data)))

【讨论】：

这适用于我在示例数据中提到的较小值。但正如我所提到的，我也会得到比我想要一个通用的 tickAmount 计算器更大的值。感谢您的回复。

@Amal 请使用这些选项测试您的数据：jsfiddle.net/BlackLabel/rz8x04jh

抱歉，它对我不起作用。我已经设置了 tickAmount 但到目前为止还没有运气。

非常感谢，但是当我使用两个 y 轴处理这些数据时。我将在结果图中仅获得 3 分。仅 3 个刻度位置。

我认为这是因为最小值不是最大值的倍数，所以 Highchart 无法计算如何分割刻度。如果有什么办法，我可以将最大值设置为最小值的倍数。

【参考方案2】：

您好，我已经通过设置 alignTicks:false 选项修复了它。

evolution_options.yAxis[$('#div_count_'+div).find('#y_axis_lbl').text()] = 
  min: minimum_val,
  max: maximum_val,
  title: false,
  labels: 
    style: 
      color: 'black'
    
  ,
  alignTicks: false