使用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('https://www.****.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();//清除图表