一、前言

最近做一个微信的项目，对我比较有考验的是在MVC框架上的使用AJAX完成view 和controller的交互，第二个就是动态的显示数据，并将结果以折线图显示出来。今天主要说折线图的实现，曾经一度认为这个完成不了，潜力真是无极限哈~

二、Charts的demo

2.1 效果图

我一定是徒手写不出来的，着手时就网上各种查阅，找了一个自己喜欢的小Demo，效果图如下（自己很矫情的做了一个动图）：

2.2 阅读js文件

如果用使用人家做好的图表，少不了要加载一个js文件，网上有很多，大家喜欢的自行查阅一下就可以get到了。下面是demo的js代码，自己写了一些注释：

JSChart
   
    Loading graph...

三、动态加载数据

刚刚代码中，大家也看到了，里面的数据都是写死的，显然不是我们想要的结果，如果可以动态加载我们自己的数据，我想图表的使用就完成了。自己做了两个变动，一个是MyData的动态载入，第二个是样式的遍历修改。代码如下：

感觉自己说的很多了，相信可以对需要的朋友有所帮助。以下是载入自己数据的效果图：

3.1 问题总结

在实现折线图的时候自己也遇到了好多问题，最后发现其实难的地方也就只有一两处，当然也不算是难，是自己不熟悉的地方。更多的是自己的理解，和想法不要局限了自己。

1.时间戳和日期的转换

自己的数据都是通过Json传到view页面的，返回来的时候时间变成了如下图所示：

这种数据显然直接写不进数组中，而且，即使写进去了那又要如何显示呢？下面是我写的一个函数，进行转换一下：

//返回固定的时间格式 几月几日function DT(str) {     str = eval(str.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));     var date = new Date(str);     //alert(date);     M = (date.getMonth() + 1 < 10 ? '' + (date.getMonth() + 1) : date.getMonth() + 1).toString() + '月';     D = date.getDate().toString()+'日' ;     return M + D; }

3.2 其他类型的图

不知道，最开始展示demo的时候，大家有没有注意到这句话：

var myChart = new JSChart('gr', 'line');

var myChart = new JSChart('gr', 'pie');

var myChart = new JSChart('gr', 'bar');

这里的意思就是生成折线图，那么就可以有别的图生成出来，bar是柱状图，pie是饼状图，我们只需要改动这个参数，如下所示：

看我们自己需要了，不过只要一种，其他的内容都是一样的，我想这也是面向接口的优点吧。以上内容，希望大家拍砖斧正~

四、尾声

通过图表的加载，自己对数组和js的内容多多少少也了解了一些，学习没有完，总结一下吧~

你可能感兴趣的文章