javascript - Highcharts yAxis.max 动态管理刻度间隔
问题描述
我正在尝试根据数据动态设置 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 无法计算如何分割刻度。如果有任何方法,我可以将最大值设置为最小值的倍数。
解决方案
这是我的建议,如何根据定义的数据计算 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)))
推荐阅读
- hyperledger-fabric - 在超级账本结构中的现有联盟中添加新组织时出错
- python - Azure DevOps 自托管 Windows 代理到 Azure Linux 函数应用部署
- bash - 如何使用扩展运算符和 bash 变量与 mkdir(创建子文件夹) - Bash 脚本
- xml - 根据参数、谓词和当前值设置节点值
- javascript - 赋予边界半径值以显示组件
- sql - REGEXP_SUBSTR 去除不需要的字符 (-)
- android - 如何在 Android Studio 中提取本地文件的位置?
- javascript - 在 Javascript 中添加多个持续时间
- python - 使用 PyTorch 进行二进制分类
- node.js - Api 调用适用于从 Postman 获取的令牌,但不适用于通过 nodejs 应用程序获取的令牌