• 通过Html5 Canvas画柱状图


         离开园子一年多了,现在回来了。问我去哪里了?哈哈,其实哪里都没去,只是潜水潜了一年啊。时间真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://github.com/scottkiss/H5Draw下载。

         

    作者:Sirk  
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

     
  • 相关阅读:
    FFmpeg简单使用:解封装 ---- 基本流程
    SDL播放PCM音频数据
    JDK8时间新API-2
    RocketMq延时队列的实现原理
    Kibana复杂查询语句
    Es基础api
    Redis sscan命令
    如何实现分布式的延时队列
    客户端从broker拉取的messagequeue的样子
    RocketMq多个consumerQueue长什么样子
  • 原文地址:https://www.cnblogs.com/vimsk/p/2551852.html
Copyright © 2020-2023  润新知