博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
通过Html5 Canvas画柱状图
阅读量:4708 次
发布时间:2019-06-10

本文共 722 字,大约阅读时间需要 2 分钟。

     离开园子一年多了,现在回来了。问我去哪里了?哈哈,其实哪里都没去,只是潜水潜了一年啊。时间真TM的快,三年前第一次来园子,那时候差不多刚上大学,而现在一下子大学就毕业了。在这里要感谢博客园,感谢dudu,感谢园子里的码农们,让我这几年大学没白读,每天能在这里看精彩的博文我已经很满足了。呃,废话不多说了,嘿嘿。

     今天带来一个最近抽空弄的html5的“chart”插件,为什么打引号?因为它太弱了,只是为了学习html5的canvas才弄的一个学习demo,姑且就让我叫它残缺的"chart",而且目前也只有柱状图的显示。下面代码就是简单的通过调用相关类库,画的一个柱状图:

    

 

       上面的程序首先引入了需要js文件,分别是H5Draw.js和h5Charts.js。其中H5Draw.js是对canvas api的简单封装,在h5Charts.js中会使用H5Draw.js中提供的绘图函数,h5Charts.js便是绘制柱状图的内部实现。在这里,我们不需要知道内部具体如何实现,只要实例化一个柱状图的chart对象,然后给chart对象设置需要的属性即可,其中dataProvider属性就是需要进行可视化展示的用户数据,这里的type是column便是柱状图。最后调用chart对象的addTo函数,将该对象添加到指定的canvas元素中,就完成了。

        对于H5Draw.js和h5Charts.js的代码,这里就不详细说了,因为都只是简单的封装,如果您感兴趣,可以直接从前面代码中的src地址中下载,或者可以去下载。

     

转载于:https://www.cnblogs.com/vimsk/archive/2012/06/16/2551852.html

你可能感兴趣的文章
zoj 3229 有源汇有上下界的最大流模板题
查看>>
Python使用mechanize模拟浏览器
查看>>
android调用音乐播放器,三种方
查看>>
read/sysread区别
查看>>
《JavaScript高级程序设计》阅读笔记(十八):跨平台的事件
查看>>
长列表优化之滚动替换数据方案小记
查看>>
20180827 360笔试客观题
查看>>
【转】使用YCSB测试mongodb分片集群性能
查看>>
StartSSL免费证书申请笔记
查看>>
Server.MapPath查询路径那几件事
查看>>
简单易懂的snmpd.conf配置文件说明
查看>>
引用 IP电话的原理结构及其关键技术
查看>>
cocos2d-x App 图标
查看>>
Eclipse中Outline里各种图标的含义
查看>>
css原生变量var()
查看>>
c++读文件-对try-throw-catch的应用
查看>>
常见的日期问题计算
查看>>
sql参数判断
查看>>
图形世界分裂的两派——理清D3D和OpenGL的脉络
查看>>
js字符串
查看>>