最近做一个微信的项目，对我比较有考验的是在MVC框架上的使用AJAX完成view 和controller的交互，第二个就是动态的显示数据，并将结果以折线图显示出来。今天主要说折线图的实现，曾经一度认为这个完成不了，潜力真是无极限哈~
我一定是徒手写不出来的，着手时就网上各种查阅，找了一个自己喜欢的小Demo，效果图如下（自己很矫情的做了一个动图）：
如果用使用人家做好的图表，少不了要加载一个js文件，网上有很多，大家喜欢的自行查阅一下就可以get到了。下面是demo的js代码，自己写了一些注释：
<html> <head> <title>JSChart</title> <script type="text/javascript" src="../../../sources/jscharts.js"></script> </head> <body> <div id="graph">Loading graph...</div> <script type="text/javascript"> //这里是关键的地方，数据的改变是通过数组中的内容进行变化的 var myData = new Array( ["1月", 60], ["2月", 40], ["3月", 80]); var myChart = new JSChart('graph', 'line'); myChart.setDataArray(myData); myChart.setTitle('折线图Demo'); myChart.setTitleColor('#8E8E8E'); myChart.setTitleFontSize(11); myChart.setAxisNameX(''); myChart.setAxisNameY(''); myChart.setAxisColor('#8420CA'); myChart.setAxisValuesColor('#949494'); myChart.setAxisPaddingLeft(100); myChart.setAxisPaddingRight(120); myChart.setAxisPaddingTop(50); myChart.setAxisPaddingBottom(40); myChart.setAxisValuesDecimals(3); myChart.setAxisValuesNumberX(10); myChart.setShowXValues(false); myChart.setGridColor('#C5A2DE'); myChart.setLineColor('#BBBBBB'); myChart.setLineWidth(2); myChart.setFlagColor('#9D12FD'); myChart.setFlagRadius(4); //设置图标坐标的样式 //给数据加上了圈圈 myChart.setTooltip(["1月", '']); myChart.setTooltip(["2月", '']); myChart.setTooltip(["3月", '']); myChart.setLabelX(["1月", "1月"]); myChart.setLabelX( ["2月", "2月"]); myChart.setLabelX(["3月", "3月"]); myChart.setSize(616, 321); myChart.setBackgroundImage('chart_bg.jpg'); myChart.draw(); </script> </body> </html>刚刚代码中，大家也看到了，里面的数据都是写死的，显然不是我们想要的结果，如果可以动态加载我们自己的数据，我想图表的使用就完成了。自己做了两个变动，一个是MyData的动态载入，第二个是样式的遍历修改。代码如下：
<script> for (var i = 0; i < data.length; i++) { //图表的设置,数据循环的加入mydata中 //这里的DT是什么鬼，我们一会就会说到！ //parseInt（）可以将字符串，转换成int类型 myData.push([DT(data[i].date), parseInt(data[i].dayMcoin)]); } </script> <script> //遍历设置样式 for (var i = 0; i < data.length; i++) { myChart.setTooltip([DT(data[i].date), '']); myChart.setLabelX([DT(data[i].date), DT(data[i].date)]); } </script>感觉自己说的很多了，相信可以对需要的朋友有所帮助。以下是载入自己数据的效果图：
在实现折线图的时候自己也遇到了好多问题，最后发现其实难的地方也就只有一两处，当然也不算是难，是自己不熟悉的地方。更多的是自己的理解，和想法不要局限了自己。
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; }不知道，最开始展示demo的时候，大家有没有注意到这句话：
var myChart = new JSChart('gr', 'line'); var myChart = new JSChart('gr', 'pie'); var myChart = new JSChart('gr', 'bar');这里的意思就是生成折线图，那么就可以有别的图生成出来，bar是柱状图，pie是饼状图，我们只需要改动这个参数，如下所示：
看我们自己需要了，不过只要一种，其他的内容都是一样的，我想这也是面向接口的优点吧。以上内容，希望大家拍砖斧正~
通过图表的加载，自己对数组和js的内容多多少少也了解了一些，学习没有完，总结一下吧~
