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

关键词：

【中文标题】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

【讨论】：

Highcharts，动态设置图例高度

】Highcharts，动态设置图例高度【英文标题】：Highcharts,setlegendheightdynamically【发布时间】：2018-01-1601:30:21【问题描述】：我想动态设置图例的高度，所以当容器调整大小时，图例高度会自动调整。理想情况下，图例的高度应该是... 查看详情

highcharts之动态数据

...项目中需要用到图表，找了几个开源框架，最后选择 Highcharts，原因是 Highcharts功能强大，稳定，方便，而且开源，社区比较成熟。 首先下载 Highcharts，导入项目。 在HTML页面引入相应的Js文件。我这个项目是情... 查看详情

highcharts柱状图动态加载

  　　　　　　　　　　　　　　highcharts柱状图动态加载(1):导入样式<scripttype="text/javascript"src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script><scripttype="text/j 查看详情

Highcharts - 如何拥有动态高度的图表？

】Highcharts-如何拥有动态高度的图表？【英文标题】：Highcharts-howtohaveachartwithdynamicheight?【发布时间】：2012-02-0706:04:13【问题描述】：我想要一个随浏览器窗口调整大小的图表，但问题是高度固定为400像素。ThisJSFiddleexample也有同... 查看详情

javascript使用highcharts的动态图表(代码片段)

查看详情

如何在highcharts中设置动态数据

】如何在highcharts中设置动态数据【英文标题】：howtosetdynamicdatainhighcharts【发布时间】：2012-07-3107:14:31【问题描述】：我从servlet获取数据，我从servlet发送的json对象的sysout是"jsonArray":["bugzilla":20,"redmind":14]现在我的java脚本是<scri... 查看详情

highcharts饼图动态加载

　　　　　　　　　　　　　　　　饼图的动态加载　　　　　　　　　　　　(1):导入样式<scripttype="text/javascript"src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script><scripttype="text/javascrip 查看详情

如何创建动态更新样条 Highcharts 图表？

】如何创建动态更新样条Highcharts图表？【英文标题】：HowtocreatedynamicupdatesplineHighchartschart?【发布时间】：2019-03-0819:31:06【问题描述】：我在没有运气的情况下摸索了几天。我想创建显示数据库中数据的Highcharts图表。我做了一些... 查看详情

highchart柱状堆叠图动态数据请求

$(function(){varoptions={chart:{renderTo:‘indoor‘,type:‘column‘,},title:{text:‘室内问题‘},xAxis:{categories:[‘MR弱覆盖楼宇‘,‘高2无4‘,‘2G高倒挂‘,‘投诉‘,‘保障需求‘,‘市场需求‘],labels:{rotation:0}},yAxis:{max:1000,min:0,title:{ 查看详情

如何使用 jQuery UI 滑块动态更新 highcharts

】如何使用jQueryUI滑块动态更新highcharts【英文标题】：HowtodynamicallyupdatehighchartsusingjQueryUIsliders【发布时间】：2013-03-1211:44:47【问题描述】：我正在寻找一种基于jQueryUI滑块确定的值动态更新Highcharts的方法。我还不太熟悉AJAX或JSON... 查看详情

在 HighCharts 中从 JSON 动态添加类别和系列

】在HighCharts中从JSON动态添加类别和系列【英文标题】：AddCategoriesandSeriesdynamicallyfromJSONinHighCharts【发布时间】：2018-04-1807:38:13【问题描述】：请考虑JSON：["Categories":["January","February","March","April","May","June","July","August","September", 查看详情

highcharts动态制作3d柱状图(代码片段)

学习参考菜鸟网站：http://www.runoob.com/highcharts/highcharts-tutorial.html我是通过后端返回设备数据，进行前端出图，效果如下：代码如下：django后台：1defft_index(request):2ifrequest.method==‘GET‘:3"""列表以字符串方式返回前端，返回结果如... 查看详情

highcharts动态生成x轴和折线图

highchart动态生成x轴和折线图<!DOCTYPEHTML><html><head><metacharset="utf-8"><linkrel="icon"href="https://static.jianshukeji.com/highcharts/images/favicon.ico"><metaname="viewpor 查看详情

图表插件highcharts的动态化赋值，实现图表数据的动态化设置显示(代码片段)

在很早之前就介绍过图表插件Highcharts的使用了，在2014年的随笔《基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts》，这里基本上都介绍的比较完整，基本的设置也没有太大的差异，本篇介绍的是基于Bootstrap开发... 查看详情

Highcharts：动态设置 y 轴最大值和最小值，而不是在创建时

】Highcharts：动态设置y轴最大值和最小值，而不是在创建时【英文标题】：Highcharts:SetyAxisMaxandMindynamically,andnotatcreation【发布时间】：2013-02-1712:15:33【问题描述】：小问题：有没有办法在创建图表后在Highcharts中设置min/max。我在图... 查看详情

如何在工具提示悬停在点 Highcharts 上动态更改图表标题 .. React JS

】如何在工具提示悬停在点Highcharts上动态更改图表标题..ReactJS【英文标题】：HowtochangethecharttitledynamicallyontooltiphoverinthepointsHighcharts..ReactJS【发布时间】：2021-09-2711:02:48【问题描述】：如何在Highcharts中悬停时动态更改图表标题JSf... 查看详情

highcharts动态获取数据生成图表问题

 动态获取数据说白点就是从后台传值到前台，前台把这些值赋值给x轴与y轴。 柱状图的动态传值：//获取后台数据varx=[];//X轴vary=[];//Y轴 varxtext=[];//X轴TEXT varcolor=["#FFB6C1","#DC143C","#C71585","#D8BFD8","#8B008B","#4B0082","#6A5ACD","#0000FF... 查看详情

highcharts-动态配置csv格式数据

场景：开发一个大型热力图。官网示例中只有设置静态csv数据的例子。一直没有找到如何给热力图加载动态数据。无奈，只好把要加载的数据拼接成csv格式后，供热力图加载。 拼接数据js：(dataArr是从后台获取的数据)varcsv_dat... 查看详情