canvas制作简单的HTML图表，折线或者矩形统计(原创)

查看演示立即下载

插件描述：canvas制作简单的HTML图表，折线或者矩形统计使用canvas制作简单的HTML图表，折线或者矩形统计。

使用canvas制作简单的HTML图表，折线或者矩形统计，简单而实用。图形由 Ctable类创建，类我已经写好了（如果有兴趣，可以自己看看源码），直接引入使用。

注意，这个类文件不依赖任何库（JQuery等）， Ctable.js 文件点此在此。

具体使用方法如下：

/*
    图表 尺寸由 ID 为 ctable 的css 大小控制
*/
//创建实例
var ctb = new Ctable('ctable');
//测试数据
var data_tmp = [
    [0, 7, '2019-06', '日', '次', 15, []],
    [1, 5, '2019-06', '日', '次', 15, []],
    [2, 3, '2019-06', '日', '次', 15, []],
    [3, 39, '2019-06', '日', '次', 15, []],
    [4, 1, '2019-06', '日', '次', 15, []],
    [4, 9, '2019-06', '日', '次', 15, []],
    [4, 9, '2019-06', '日', '次', 15, []],
    [4, 9, '2019-06', '日', '次', 15, []],
    [4, 9, '2019-06', '日', '次', 15, []],
    [0, 7, '2019-06', '日', '次', 15, []]
];
/*
$.get('/****.com/api',function(res) {
    //api使用
    var ar=JSON.parse(res);
    console.log(ar);
    ctb.setData(ar);
    ctb.drawline(1);
})
*/
//设置数据
ctb.setData(data_tmp);
//绘制图形
ctb.drawline(1); //折线图   差数 1|true 表示是否创建刻度（坐标系）
//ctb.drawrect(1);//矩形图
//ctb.clear();//清除图表

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： js抽奖插件jQuery-SlotMachine
下一个特效： jQuery Tabs滑动选项卡