码迷,mamicode.com
首页 > Web开发 > 详细

web多终端开发学习系列(四)--- web图表插件

时间:2015-05-21 22:42:06      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:多终端   web   图表   chart.js   highcharts   

        对于数据的显示除了可以用表格外,还可以使用图表来更好、更直观地表达数据,比如数据的趋势可以用折线图,数据的比例可以用饼图等等。所以在web的开发过程中图表的应用非常广泛,对于图表的js框架我找到了Chart.js和Highcharts。Chart支持响应式布局,而Highcharts不支持,但是Highcharts的功能更全面。


介绍

        Chart.js的官网是:http://www.bootcss.com/p/chart.js/,Chart.js不依赖于第三方类库,只需导入Chart.js即可。并且支持响应式布局,对于手机端的数据展示Chart.js非常适用。
        Highcharts的官网是:http://www.hcharts.cn/,Highcharts依赖于Jquery,需要同时导入Jquery库。虽然Highcharts不支持响应式布局,但是功能非常全面,并且强大,非常适用一些复杂数据展示的桌面端web后台管理系统。

环境搭建

        对于Chart.js只需要导入一个js文件
    <script src="../Chart.js"></script>
        对于Highcharts需要先导入Jquery再导入Highcharts库
    <script src="js/jquery.min.js"></script>
    <script src="js/highcharts.js"></script> 

实例

        Chart.js请参考http://www.bootcss.com/p/chart.js/docs/

总结

        在这样一个大数据的背景下,人们对于数据越来越敏感,我们可以根据数据来分析出发展趋势、用户行为等等一系列的可能行为的预测,产生的结果可以通过图表来直观的表达。作为web图表的类库Chart.js与Highcharts的应用将会越来越广泛,当然也可能会产生新的图表类库迎合发展的趋势。所以在日常的web后台系统的开发中,我们可以尝试地应用这两个类库。

web多终端开发学习系列(四)--- web图表插件

标签:多终端   web   图表   chart.js   highcharts   

原文地址:http://blog.csdn.net/eye_cng/article/details/45896265

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!