zoukankan      html  css  js  c++  java
  • Chart.js: 一个简单的 JS Chart Library

    Chart.js 是一个 Open Source 的 JavaScript Chart Library。它一共有 6 中 Chart,全都是 HTML5 based。

    底下是 Chart.js 所提供的 6 中 Charts的实例图形,包括了折线图、柱形图、圆饼图等,这样很容易在html网页中实现动态图的效果:

    Line Chart 

    image
    Bar Chart 
    image
    Radar Chart 
    image
    Pie Chart 
    image
    Polar Area Chart 
    image
    Doughnut Chart 
    image
    快速上手

    你可以到 github下载Chart.js: https://github.com/nnnick/Chart.js。Chart.js 只需要一个 .js 文件,你可以选择一般版的 Chart.js,也可以选择瘦身版的 Chart.min.js。

    從从github 下载后,在 samples 资料夹就有 6 中 Chart 的范例。比如打開 samples/line.html 後,浏览器马上就出现这样一张 Line Chart:

    image

    line.html 的內容如下 (JavaScript 部份):

     

    如何动态增加数据点?

    Chart.js 沒有提供动态增加数据点的方法,这实在有点可惜。不过,我花了点时间研究了一下,发现还是有办法的。我的方法是这样的:在修改 datasets 的內容后,就再调用 new Chart() 重新产生 Chart。程式代码范例如下:

     

    有一点要特別注意,因為 Chart.js 在画图时会有动画,所以必须把 animation 设成 flase 把动画关掉。

    然后就可以动态增加数据点:

    image

  • 相关阅读:
    quick-cocos2dx 3.5集成protobuf
    lua和luajit在cocos2dx mac模拟器的简单测试
    cocos2dx-lua手游客户端框架设计
    cocos2dx动画技术选型
    lua中的面向对象
    html 学习
    OC 与js 互相调用
    Carthage的安装和使用
    Bomb后端云使用
    FMDB简单使用
  • 原文地址:https://www.cnblogs.com/sowhat4999/p/4478367.html
Copyright © 2011-2022 走看看