PS:该图表插件对手机端支持挺好
网上的文章大多数的参数都是老版本的过时的,最新api查看官网http://www.chartjs.org/docs/ 



点击 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. }]
  22. }
  23. },
  24. data:{
  25. }
  26. }

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

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

初始化数据传入 更新报表

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



js 图表插件 chartjs 2.4的更多相关文章

  1. Vis.js图表插件

    Vis.js是一款基于JavaScript的可视化图表库,Vis.js不像其他的图表库那样仅仅支持几种常用的数据图表,比如线形图.柱状图.饼图等,Vis.js支持上百种不同类型的可视化图表类型,比如时 ...

  2. 转-——推荐几个web中常用的一些js图表插件 - zccst

    http://www.tuicool.com/articles/bqq2Qn 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph f ...

  3. 推荐几个web中常用js图表插件

    作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart elycharts jquery ...

  4. js图表插件绘制各种类型图表

    官网:http://www.bootcss.com/p/chart.js/ 中文参考手册:http://www.bootcss.com/p/chart.js/docs/ 一.生成折线图 :test.h ...

  5. JS图表插件(柱形图、饼状图、折线图)

    http://www.open-open.com/lib/view/open1406378625726.html

  6. 一个朋友js图表开发遇到的问题 解决思路c和js

    引言            不求知道一切, 只求发现一件 -- 乔治·西蒙·欧姆 附注:那些存在于梦幻中的事迹,那些儿时梦中的人物,每每看起,都觉得 .哎 .... 岁月 ... 一直在努力 ...  ...

  7. canvas的Chart图表插件

    今天写页面页面需求到柱状图标,今天介绍一下我所用的Chart.js图表插件 官网:http://www.bootcss.com/p/chart.js/         里面会有下载js文件和中文文档 ...

  8. 一个朋友 js图表开发问题 用 c和 js 解决

    引言            不求知道一切, 只求发现一件 -- 乔治·西蒙·欧姆 附注:那些存在于梦幻中的事迹,那些儿时梦中的人物,每每看起,都觉得 .哎 .... 岁月 ... 一直在努力 ...  ...

  9. 13个JavaScript图表(JS图表)图形绘制插件【转】

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

随机推荐

  1. 在Html.ActionLink中运用二维判断语句

    @Html.ActionLink("公告信息", "notice", "article", null, new { @class = Vie ...

  2. eclipse 图片预览插件

      eclipse 图片预览插件 CreateTime--2018年4月22日22:59:55 Author:Marydon 下载地址:eclipse 图片预览插件 将插件文件夹直接拷贝到eclips ...

  3. SettingsTortoiseSVN

      迁移时间:2017年5月20日11:16:05CreateTime--2016年9月18日18:20:15Author:Marydon在windows下安装SVN软件 说明:64位的系统只能安装6 ...

  4. KNOCKOUTJS DOCUMENTATION-绑定(BINDINGS)-自定义绑定

    除了ko内建的绑定,还可以自定义绑定,灵活地封装复杂的行为使之可重用. 自定义绑定 注册自定义绑定 向 ko.bindingHandles添加一个子属性来注册一个绑定. ko.bindingHandl ...

  5. java 和 C 代码运行效率的比较(整理)

    最近和朋友无意间讨论起了 有关java 和C 的 效率问题, (我是java 推介者, 他是 c 语言推介者, 他做的是嵌入式) 故,想通过网络查询一下, 总结一下,两者到底效率如何,其有何差异,原因 ...

  6. iOS10 推送必看 UNNotificationContentExtension

    来源:徐不同(@2016徐小爷) 链接:http://www.jianshu.com/p/45933f5450a4 大伙久等啦~这绝对是最全最详细的 UNNotificationContentExte ...

  7. javascript高级程序设计第一章

    看后总结: 1.javascript的组成成分:ECMAscript+DOM+BOM

  8. Android之getSystemService

    getSystemService是Android很重要的一个API,它是Activity的一个方法,根据传入的NAME来取得对应的Object,然后转换成相应的服务对象.以下介绍系统相应的服务. 传入 ...

  9. IP数据报格式和IP地址路由

    一.IP数据报格式 IP数据报格式如下: 注:需要注意的是网络数据包以大端字节序传输,当然头部也得是大端字节序,也就是说: The most significant bit is numbered 0 ...

  10. vim 折叠

    zR 打开全部折叠 zr 打开当前折叠 zM 关闭全部折叠 zm 关闭当前折叠