网页图表 开源工具Chart.js中关于Y轴数据从浮点数修改至整数展示的方法

项目需求：最近一个项目中的一个需求是在web端展示后台处理的二维数据

所用资源：chart.js，该项目是一个开源的js工具，大家可以展示诸如二维曲线图(Line Chart)、柱状图(Bar Chart)、雷达图或蛛网图(Redar Chart)等比较友好易于理解的图形

chart.js项目的下载地址http://www.chartjs.org/

中文文档地址http://www.bootcss.com/p/chart.js/docs/

有兴趣的同学可以下载浏览

所遇到的问题：在曲线图中Y轴数据展示会遇到浮点数的问题，但是对于人数统计这类数据展示就会遇到人数怎么会有小数的问题

找了很多解决方法国内的网站似乎没有好的解决方式，在国外的一个网站上找到了解决这个问题的灵感http://stackoverflow.com/questions/15751571/how-to-change-the-y-axis-values-from-real-numbers-to-integer-in-chartjs?answertab=active#tab-top

PS：感谢stackoverflow！！！

下面是具体步骤

1，在http://www.chartjs.org/官网中点击"Download"会跳转至该项目的GitHub主页，点击右侧的“Download ZIP”下载其源码文件

2，解压下载好的文件包打开其中的样例文件夹中的line.html文件“../samples/line.html”

3，直接在网页中运行你会看见如上图的情况Y轴是浮点数表示

在代码中datasets : [...]后添加config : [...]（注意datasets : [...]和config : [...]之间用逗号相隔），注意关键之处来了，这个config:[...]中间的内容就是你要传递给chart.js

文件中的相关配置项，在chart.js文件中

scaleOverride : false,
scaleSteps : null,
scaleStepWidth : null,
scaleStartValue : null,

这几行代码是控制Y轴显示的关键，你可以做如下修改

在line.html的config : [...]中添加一些参数然后在chart.js中去利用这些参数控制图标的显示样式，我就直接写个例子给大家参考吧

line.html中js脚本段代码如下图

chart.js段代码如下

这样问题就得到了简单的解决

有什么问题或写的不足之处还望大家谅解！