当前位置: 首页 > Web前端 > CSS

解决Highcharts中yAxis的max设置无效的问题

时间:2023-03-30 23:47:23 CSS

问题场景$(function(){Highcharts.chart('container',{title:{text:'line'},xAxis:{categories:['Jan','Feb','Mar','Apr','五月','六月','七月','八月','九月','十月','十一月','十二月']},yAxis:{max:350,},系列:[{数据:[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,250.4,294.1,95.6,54.4]}]});});从上图中我们可以发现,即使在yAxis中设置了max为350,但是最终生成的图表还是使用了400作为y轴的最大值numberofticks)attributetoyAxis$(function(){Highcharts.chart('container',{title:{text:'line'},xAxis:{categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']},yAxis:{max:350,tickAmount:8,},小号系列:[{数据:[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,250.4,294.1,95.6,54.4]}]});y轴最大值的结果就目前的测试结果而言,max设置的最大值必须能够除以刻度线划分的区间数,除以特定值.上例中tickAmount设置为8,分为7格,350/7=50,在其他例子的测试中可以正确显示,均分为70或90,遇到过失败,所以还是有必要的根据具体的最大值调整tickAmount的设置。方案2也可以使用tickPositioner属性手动设置坐标轴刻度$(function(){Highcharts.chart('container',{title:{text:'line'},xAxis:{categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']},yAxis:{tickPositioner:函数()}},系列:[{数据:[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,250.4,294.1,95.46],5}]});});也可以使用函数自动计算合适的间隙$(function(){$('#container').highcharts({title:{text:'line'},xAxis:{categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']},yAxis:{tickPositioner:function(){varpositions=[],tick=Math.floor(this.dataMin),increment=Math.ceil((this.dataMax-this.dataMin)/6);for(tick;tick-increment<=this.dataMax;tick+=increment){positions.push(tick);}positions.push(350);返回位置;}},series:[{data:[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,250.4,294.1,95.6,54.4]}],});});为了与上面保持一致,推入了最后的350。使用时根据实际情况调整计算功能。可以参考tickAmountAPItickPositionerAPI