html根据字段制作曲线图,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, []],

[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();//清除图表

html根据字段制作曲线图,canvas制作简单的HTML图表，折线或者矩形统计(原创)相关推荐

[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
canvas制作简单钟表
之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用c ...
html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
html5制作线路图,HTML5使用canvas画简单电路图
何问起 var canvas = document.getElementById("canHewenqi"); var cxt = canvas.getContext(" ...
html制作动态坐标轴,HTML5 canvas制作动态随机星图
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 本篇将会介绍如何用canvas制作动态随机移动的星图啦啦啦小白在远离小白道路上的第一步就是搭个博客前言这次的博文不 ...
php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
使用Canvas制作刮刮乐，看看你能刮出什么奖品来？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言今天在一个彩票网站看到了一个刮刮乐的效果,觉得挺有意思的就打算来仿写一个,经过一番简单的思考大概就有了基本都想法.总体效果使用Can ...
canvas制作钟表
之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用c ...
H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...

html根据字段制作曲线图,canvas制作简单的HTML图表，折线或者矩形统计(原创)

html根据字段制作曲线图,canvas制作简单的HTML图表，折线或者矩形统计(原创)相关推荐

最新文章

热门文章