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

所属分类:UI-图表

 23857  244  查看评论 (0)
分享到微信朋友圈
X
canvas制作简单的HTML图表,折线或者矩形统计(原创) ie兼容9

使用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();//清除图表
相关插件-图表

jQuery表头固定

基于superTables做的改造,可以完美锁定表头和列,已经用于实际项目,还有很多改造的空间
  图表
 42854  456

原生js饼图、环形图、环形渐变(原创)

自己开发中使用ets无法实现饼图环形图颜色环形渐变,且目前并未发现有其他插件可以实现,故手写一个,供大家使用,请根据自己实际情况自行修改,欢迎交流。
  图表
 20383  226

抖音业绩销量动态排行,加载数据实现动态排名

git上的部分项目改造,根据自己的需求可以自行进行修改。一般用于大屏演示和数据展示
  图表
 15349  140

layui的复杂表头及数据处理总结(原创)

在layui的官网有些东西是查不到的,这给我 们造成很多的误解,在网上也找不到成套的实例用法。在这里总结了layui框架的复杂表头的拼接及数据的展示,希望给大家的开发,带来些实用的方便。
  图表
 26802  186

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复