js 图表插件 chartjs 2.4

PS:该图表插件对手机端支持挺好

网上的文章大多数的参数都是老版本的过时的，最新api查看官网 http://www.chartjs.org/docs/ 

下载地址  https://github.com/chartjs/Chart.js/releases/tag/v2.4.0

点击 tags可以下载其它版本

使用方法

第一步下载   copy dist文件夹下面的资源文件到项目   接着引入 

1. <script src="${baseURL}/js/3rd-plug/Chart.js-2.4.0/Chart.bundle.js" type="text/javascript"></script>
2. <script src="${baseURL}/js/3rd-plug/Chart.js-2.4.0/utils.js" type="text/javascript"></script>

第二步 然后dom创建一个画布元素设置高宽

1. <div class="chartsdiv" id="chartsdiv">
2. <canvas id="canvas" style="height:300px;" height='300'></canvas>
3. </div>

第三步  js设置config 全局引用  option和data，然后初始化 config，方便以后数据data更新能通知报表更新数据，因为初始化存的是config引用，config每次更新的时候报表都会去取config，如果单独初始化报表的时候直接给一个data数据，当data数据更改的时候，data的引用的指针改变，自然和报表初始化的时候的data指针不同，所以没法更新

全局初始化config配置

1. var config = {
2. type:'line',
3. options:{
4. title:{display:true,text:'成交数据 单位(元)'},
5. tooltips:{mode: 'index',intersect:false},
6. type: 'line',
7. scales: {
8. xAxes: [{
9. display: true,
10. scaleLabel: {
11. display: true,
12. labelString: '月'
13. }
14. }],
15. yAxes:[{
16. display: true,
17. scaleLabel: {
18. display: true,
19. labelString: '单位(元)'
20. }
21. }]
23. }
24. },
25. data:{
27. }
28. }

初始化chartjs data是没有数据的 做全局数据

1. var ctx = document.getElementById("canvas").getContext("2d");
2. $(function() {
3. window.myLineChart = Chart.Line(ctx, config);
4.     })

初始化数据传入 更新报表

1. function refeshCharts(areaFangjiaList){
4. var xcategory = [];
5. var ysaveprice = [];
6. var esavgprice = [];
9. $(areaFangjiaList).each(function(){
10. xcategory.push(this.FDATE)
11. ysaveprice.push(this.FisrtHandAvgPrice)
12. esavgprice.push(this.SeondHandAvgPrice)
13. })
14. config.data={
15. labels: xcategory,
16. datasets: [{
17. label: "一手均价",
18. borderColor: window.chartColors.red,
19. data: ysaveprice
20. }, {
21. label: "二手均价",
22. borderColor: window.chartColors.blue,
23. data: esavgprice
24. }]
25. }
28. window.myLineChart.update();
31. }