如何设置HighCharts中纵轴显示非负整数

 时间:2026-04-21 16:54:53

1、第一步,首先,打开MyEclipse,在其中新建一个Web项目,这里我命名为HighCharts,如下图所示:

如何设置HighCharts中纵轴显示非负整数

2、第二步,将HighCharts相关的JS放到新建scripts,在新建的pages文件夹中创建页面LineChart.jsp,并将jsp中的获取路径去掉,这样可以防止出现路径错误,如下图所示:

如何设置HighCharts中纵轴显示非负整数

3、第三步,将jquery和HighCharts的核心js引入,注意将jquery放到HighCharts的js上方,

<script type="text/javascript" src="../scripts/jquery-1.11.2.js"></script>

<script type="text/javascript" src="../scripts/highcharts.js"></script>

如下图所示:

如何设置HighCharts中纵轴显示非负整数

4、第四步,在jsp中的<body></body>中引入HighCharts图形的容器,并设置div标签元素的id属性值,

<div id="lineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>

如下图所示:

如何设置HighCharts中纵轴显示非负整数

5、第五步,在<script type="text/javascript"></script>中编辑HighCharts生成图形的js,设置图形的数据源,

如下图所示:

如何设置HighCharts中纵轴显示非负整数

如何设置HighCharts中纵轴显示非负整数

6、第六步,上述js编写完成后,将项目部署到Tomcat中,并启动Tomcat服务器;在浏览器中查看图形,预览图形效果,

如下图所示:

如何设置HighCharts中纵轴显示非负整数

7、第七步,从上图可以看出,图形的纵轴出现了负数和小数,但是需求却要求纵轴显示的是非负整数。这时,就要利用HighCharts中的相关属性

在yAxis中添加如下属性

min:0,

 allowDecimals:false,

如下图所示:

如何设置HighCharts中纵轴显示非负整数

8、第八步,最后,刷新页面,查看页面显示情况,纵轴显示非负整数,这里需要验证下,如下图所示:

如何设置HighCharts中纵轴显示非负整数

  • 如何在Powerdesigner中设置字段的取值列表?
  • Echarts怎么设置y轴最大值最小值
  • labview波形图表横轴设置成时间方法
  • 如何在powerdesigner模型中设置字段限制值?
  • Excel中如何快速计算横轴数与纵列数相乘
  • 热门搜索
    怎么做馒头又软又好吃 蚂蚁微贷怎么申请 何首乌怎么吃治白发最有效 耳膜穿孔怎么办 包包子怎么发面 怎么做生意 肛门有一坨肉收不回去怎么办 电脑没有声音怎么回事 怎么裁剪图片 拳皇97怎么爆气