问题场景

    $(function () {
Highcharts.chart('container', {
title: {
text: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
max: 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]
}]
});
});
  • 通过上图我们可以发现,即使在 yAxis 中将 max 设置成了350,但是最终生成的图表仍然以400作为y轴的最大值

解决方案

  • 为了解决这个问题,我们需要为 yAxis 同时添加 tickAmount(刻度总数) 属性

    $(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,
},
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作为y轴最大值的结果了
  • 就目前的测试结果而言,max 所设置的最大值要能够被刻度线划分出来的间隔数以特定的值整除

    • 以上面的例子而言 tickAmount 设置为8,划分出了7个格子,350 / 7 = 50 ,可以正确的显示
    • 在其他例子的测试中,整除成70或者90,也遇到过失效的情况
    • 所以还是需要根据具体的 max 值来调整 tickAmount 的设置

解决方案2

  1. 还可以使用 tickPositioner 属性来手动设置坐标轴刻度

    $(function () {
Highcharts.chart('container', {
title: {
text: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
tickPositioner: function () {
var positions = [0,100,200,300,350];
return positions;
}
},
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]
}]
});
});
  1. 你也可以使用函数自动计算出合适的间隙

    $(function () {
$('#container').highcharts({
title: {
text: 'line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
tickPositioner: function () {
var positions = [],
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);
return positions;
}
},
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 为了与上方保持一致 push 进去的,使用时根据实际情况调整计算函数即可

参考

tickAmount API
tickPositioner API

解决 Highcharts 中 yAxis 的 max 设置无效的问题的更多相关文章

  1. 解决vue中element组件样式修改无效

    vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...

  2. HighCharts中Y轴颜色设置

    yAxis: [{ title: { text: '', style: { color: '#2EBBD9' } }, labels: { formatter: function () { retur ...

  3. EditText中imeOptions属性使用及设置无效解决

    虽然通常输入法软键盘右下角会是回车按键 但我们经常会看到点击不同的编辑框,输入法软键盘右下角会有不同的图标 点击浏览器网址栏的时候,输入法软键盘右下角会变成“GO”或“前往” 而我们点击Google搜 ...

  4. vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法

    当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,w ...

  5. 表格Table宽度设置无效的解决方法

    表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...

  6. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

  7. 解决iOS中 tabBarItem设置图片(image+title切图在一起)时造成的图片向上偏移

    解决iOS中 tabBarItem设置图片(image+title切图在一起)时造成的图片向上偏移 解决办法1:设置tabBarItem的imageInsets属性 代码示例: childContro ...

  8. postman插件部分Header设置无效的解决办法

    在使用chrome的postman插件模拟http请求的时候,碰到了设置的部分Headers无效的问题,比如说Referer设置后就无效,经过查询发现了问题原因,原因的具体说明参考postman官网的 ...

  9. 【AngularJS】解决ng-if中的ng-model值无效的问题(转)

    from:http://blog.csdn.net/u013451157/article/details/60866210 与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if ...

随机推荐

  1. Linux基础篇四:常用命令

    .     一个点表示是 当前目录 ..    两个点表示当前目录的上一层目录 .   与   ..  相对路径的一种表现形式 cd ~/test/     ~当前用户的家目录    绝对路径 注意: ...

  2. 吴裕雄--天生自然python学习笔记:python 用 Open CV抓取摄像头视频图像

    Open CV 除了可以读取.显示静态图片外 , 还可 以加载及播放动态影片, 以 及 读取内置或外接摄像头的图像信息 . 很多笔记本电脑都具有摄像头 , OpenCV 可通过 VideoC aptu ...

  3. okhttp 拦截问题

    builder.addInterceptor(chain -> { Request request = chain.request(); Response response = chain.pr ...

  4. The Chosen One+高精度

    题目描述 Welcome to the 2017 ACM-ICPC Asia Nanning Regional Contest. Here is a breaking news. Now you ha ...

  5. swift中的category,扩展

    1.创建选择 :swift file 2.名称:UIBarButtonItem-Extension 3.category,便利构造函数 extension UIColor { /* 1.extensi ...

  6. POJ-1811-Prime Test(pollard_rho模板,快速找最小素因子)

    题目传送门 sol:Pollard_Rho的模板题,刚看了Pollard_Rho和Miller_Rabin很多原理性的东西看不懂,只是记住了结论勉强能敲代码. Pollard_Rho #include ...

  7. MAVEN实现多环境搭建

    在实际的开发中,会遇到开发环境的不同(开发环境,测试环境,线上环境),会来回根据环境的不同修改配置文件,一不小心修改错误导致无法正常运行,故障排除导致开发效率低.使用maven可以根据环境的不同,自动 ...

  8. 4K时代,你不能不知道的HEVC

    最近追的美剧更新啦!但手机没连wifi,看视频心疼流量:画面不清晰,老是卡机:真是令人苦恼不已.别着急,或许在HEVC大范围普及之后,这一切烦恼都将不复存在了. HEVC是什么?它是High Effi ...

  9. python3之urllib基础

    urllib简单应用html=urllib.request.urlopen(域名/网址).read().decode('utf-8')----->--->urlopen-->获取源码 ...

  10. mac安装并配置nexus3.5.1版本

    一.安装nexus 前置条件 :已经安装了JDK 1:下载nexus(http://www.sonatype.com/download-oss-sonatype) 最新版本(我的是3.5.1). 2: ...