canvas系列教程04-柱状图项目2
来源:互联网 发布:淘宝店铺怎么装修上新 编辑:程序博客网 时间:2024/06/05 07:11
我们提前做些准备工作,比如画图前先把坐标边距做出来,还有各种字体大小算出来。
这里需要一点面向对象的知识,
```
'use strict';
//模仿 http://echarts.baidu.com/demo.html#bar-gradient
window.onload = function(){
var data = [
{"label":"一月","value":getRandomInt(0,400)},
{"label":"一月","value":getRandomInt(1,400)},
{"label":"一月","value":getRandomInt(1,400)}
];
var targetId = 'bchart';
var cw = 800;
var ch = 600;
function Bcharts(targetId,cw,ch,data){
//基础信息
var c = this;//为啥这么做?我懒,c = chart = this;
c.targetId = targetId;
c.cw = cw;
c.ch = ch;
c.data = data;
//坐标准备,为啥要准备?因为坐标和字体都应该是动态算出来的不能是写死的否则实用性不够
c.axeRadio = 10;//定义一个比例,为啥是10,看图大体是这个随便定的,别忒离谱就好
c.horGap = (cw*axeRadio)/100;
c.verGap = (ch*axeRadio)/100;
//标识准备
c.fontRadio = 3;//原因同上
c.horFontSize = (cw*fontRadio)/100;
c.verFontSize = (ch*fontRadio)/100;
}
var charts = new Bcharts(targetId,cw,ch,data);
};
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 偷个懒,基础函数不写了
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
```
说一点,你如果不懂就先按照我写的弄出来,别自己发明创造,写多了你也就知道为什么我这么写了。当然上面这个写法挺恶心的,让我想起了,没有整理过的女生宿舍,
![脏乱.jpg](http://upload-images.jianshu.io/upload_images/745192-1aa215cc78ead5ea.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
一坨坨代码,所以我们我们整理下结构。
```
'use strict';
//模仿 http://echarts.baidu.com/demo.html#bar-gradient
window.onload = function(){
var data = [
{"label":"一月","value":getRandomInt(0,400)},
{"label":"一月","value":getRandomInt(1,400)},
{"label":"一月","value":getRandomInt(1,400)}
];
var targetId = 'bchart';
var cw = 800;
var ch = 600;
function Bcharts(targetId,cw,ch,data){
//基础信息
var c = this;//为啥这么做?我懒,c = chart = this;
c.configureChart(targetId,cw,ch,data);
}
Bcharts.prototype.configureChart = function(targetId,cw,ch,data){
var c = this;
c.setCanvasParameters(targetId,cw,ch,data);
c.setChartParameters(targetId,cw,ch,data);
};
Bcharts.prototype.setCanvasParameters = function(targetId,cw,ch,data){
var c = this;
c.targetId = targetId;
c.cw = cw;
c.ch = ch;
c.data = data;
};
Bcharts.prototype.setChartParameters = function(targetId,cw,ch,data){
var c = this;
c.axeRadio = 10;//定义一个比例,为啥是10,看图大体是这个随便定的,别忒离谱就好
c.horGap = (c.cw*c.axeRadio)/100;
c.verGap = (c.ch*c.axeRadio)/100;
//标识准备
c.fontRadio = 3;//原因同上
c.horFontSize = (c.cw*c.fontRadio)/100;
c.verFontSize = (c.ch*c.fontRadio)/100;
};
var charts = new Bcharts(targetId,cw,ch,data);
};
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 偷个懒,基础函数不写了
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
```
忽然感觉就像整理过的女生宿舍有么有,太整齐了!
![整洁.jpg](http://upload-images.jianshu.io/upload_images/745192-ede02c33d4f66d34.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
好,整理好了代码,先怼一个canvas画布进去,这里注意我也用的面向对象方式,定义了一个init函数,注意我把targetId改了一下,之前写错了。
最终代码如下,
```
'use strict';
//模仿 http://echarts.baidu.com/demo.html#bar-gradient
window.onload = function(){
var data = [
{"label":"一月","value":getRandomInt(0,400)},
{"label":"一月","value":getRandomInt(1,400)},
{"label":"一月","value":getRandomInt(1,400)}
];
var targetId = 'div1';
var cw = 800;
var ch = 600;
function Bcharts(targetId,cw,ch,data){
//基础信息
var c = this;//为啥这么做?我懒,c = chart = this;
c.configureChart(targetId,cw,ch,data);
c.init();
}
Bcharts.prototype.configureChart = function(targetId,cw,ch,data){
var c = this;
c.setCanvasParameters(targetId,cw,ch,data);
c.setChartParameters(targetId,cw,ch,data);
};
Bcharts.prototype.setCanvasParameters = function(targetId,cw,ch,data){
var c = this;
c.id = targetId;
c.cw = cw;
c.ch = ch;
c.data = data;
};
Bcharts.prototype.setChartParameters = function(targetId,cw,ch,data){
var c = this;
c.axeRadio = 10;//定义一个比例,为啥是10,看图大体是这个随便定的,别忒离谱就好
c.horGap = (c.cw*c.axeRadio)/100;
c.verGap = (c.ch*c.axeRadio)/100;
//标识准备
c.fontRadio = 3;//原因同上
c.horFontSize = (c.cw*c.fontRadio)/100;
c.verFontSize = (c.ch*c.fontRadio)/100;
};
//初始化
Bcharts.prototype.init = function(){
var c = this;
c.createCanvas();
};
Bcharts.prototype.createCanvas = function(){
var c = this;
var canvas = document.createElement('canvas');
canvas.id = c.id + '-' + Math.random();
canvas.width = c.cw;
canvas.height = c.ch;
document.getElementById(c.id).innerHTML = '';
document.getElementById(c.id).appendChild(canvas);
c.canvas = canvas;
c.context = c.canvas.getContext('2d');
};
var charts = new Bcharts(targetId,cw,ch,data);
};
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 偷个懒,基础函数不写了
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
```
这里需要一点面向对象的知识,
```
'use strict';
//模仿 http://echarts.baidu.com/demo.html#bar-gradient
window.onload = function(){
var data = [
{"label":"一月","value":getRandomInt(0,400)},
{"label":"一月","value":getRandomInt(1,400)},
{"label":"一月","value":getRandomInt(1,400)}
];
var targetId = 'bchart';
var cw = 800;
var ch = 600;
function Bcharts(targetId,cw,ch,data){
//基础信息
var c = this;//为啥这么做?我懒,c = chart = this;
c.targetId = targetId;
c.cw = cw;
c.ch = ch;
c.data = data;
//坐标准备,为啥要准备?因为坐标和字体都应该是动态算出来的不能是写死的否则实用性不够
c.axeRadio = 10;//定义一个比例,为啥是10,看图大体是这个随便定的,别忒离谱就好
c.horGap = (cw*axeRadio)/100;
c.verGap = (ch*axeRadio)/100;
//标识准备
c.fontRadio = 3;//原因同上
c.horFontSize = (cw*fontRadio)/100;
c.verFontSize = (ch*fontRadio)/100;
}
var charts = new Bcharts(targetId,cw,ch,data);
};
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 偷个懒,基础函数不写了
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
```
说一点,你如果不懂就先按照我写的弄出来,别自己发明创造,写多了你也就知道为什么我这么写了。当然上面这个写法挺恶心的,让我想起了,没有整理过的女生宿舍,
![脏乱.jpg](http://upload-images.jianshu.io/upload_images/745192-1aa215cc78ead5ea.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
一坨坨代码,所以我们我们整理下结构。
```
'use strict';
//模仿 http://echarts.baidu.com/demo.html#bar-gradient
window.onload = function(){
var data = [
{"label":"一月","value":getRandomInt(0,400)},
{"label":"一月","value":getRandomInt(1,400)},
{"label":"一月","value":getRandomInt(1,400)}
];
var targetId = 'bchart';
var cw = 800;
var ch = 600;
function Bcharts(targetId,cw,ch,data){
//基础信息
var c = this;//为啥这么做?我懒,c = chart = this;
c.configureChart(targetId,cw,ch,data);
}
Bcharts.prototype.configureChart = function(targetId,cw,ch,data){
var c = this;
c.setCanvasParameters(targetId,cw,ch,data);
c.setChartParameters(targetId,cw,ch,data);
};
Bcharts.prototype.setCanvasParameters = function(targetId,cw,ch,data){
var c = this;
c.targetId = targetId;
c.cw = cw;
c.ch = ch;
c.data = data;
};
Bcharts.prototype.setChartParameters = function(targetId,cw,ch,data){
var c = this;
c.axeRadio = 10;//定义一个比例,为啥是10,看图大体是这个随便定的,别忒离谱就好
c.horGap = (c.cw*c.axeRadio)/100;
c.verGap = (c.ch*c.axeRadio)/100;
//标识准备
c.fontRadio = 3;//原因同上
c.horFontSize = (c.cw*c.fontRadio)/100;
c.verFontSize = (c.ch*c.fontRadio)/100;
};
var charts = new Bcharts(targetId,cw,ch,data);
};
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 偷个懒,基础函数不写了
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
```
忽然感觉就像整理过的女生宿舍有么有,太整齐了!
![整洁.jpg](http://upload-images.jianshu.io/upload_images/745192-ede02c33d4f66d34.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
好,整理好了代码,先怼一个canvas画布进去,这里注意我也用的面向对象方式,定义了一个init函数,注意我把targetId改了一下,之前写错了。
最终代码如下,
```
'use strict';
//模仿 http://echarts.baidu.com/demo.html#bar-gradient
window.onload = function(){
var data = [
{"label":"一月","value":getRandomInt(0,400)},
{"label":"一月","value":getRandomInt(1,400)},
{"label":"一月","value":getRandomInt(1,400)}
];
var targetId = 'div1';
var cw = 800;
var ch = 600;
function Bcharts(targetId,cw,ch,data){
//基础信息
var c = this;//为啥这么做?我懒,c = chart = this;
c.configureChart(targetId,cw,ch,data);
c.init();
}
Bcharts.prototype.configureChart = function(targetId,cw,ch,data){
var c = this;
c.setCanvasParameters(targetId,cw,ch,data);
c.setChartParameters(targetId,cw,ch,data);
};
Bcharts.prototype.setCanvasParameters = function(targetId,cw,ch,data){
var c = this;
c.id = targetId;
c.cw = cw;
c.ch = ch;
c.data = data;
};
Bcharts.prototype.setChartParameters = function(targetId,cw,ch,data){
var c = this;
c.axeRadio = 10;//定义一个比例,为啥是10,看图大体是这个随便定的,别忒离谱就好
c.horGap = (c.cw*c.axeRadio)/100;
c.verGap = (c.ch*c.axeRadio)/100;
//标识准备
c.fontRadio = 3;//原因同上
c.horFontSize = (c.cw*c.fontRadio)/100;
c.verFontSize = (c.ch*c.fontRadio)/100;
};
//初始化
Bcharts.prototype.init = function(){
var c = this;
c.createCanvas();
};
Bcharts.prototype.createCanvas = function(){
var c = this;
var canvas = document.createElement('canvas');
canvas.id = c.id + '-' + Math.random();
canvas.width = c.cw;
canvas.height = c.ch;
document.getElementById(c.id).innerHTML = '';
document.getElementById(c.id).appendChild(canvas);
c.canvas = canvas;
c.context = c.canvas.getContext('2d');
};
var charts = new Bcharts(targetId,cw,ch,data);
};
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// 偷个懒,基础函数不写了
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
```
阅读全文
0 0
- canvas系列教程04-柱状图项目2
- canvas系列教程03-柱状图项目1
- canvas系列教程05-柱状图项目3
- canvas系列教程06-柱状图项目4
- canvas系列教程2-基本知识
- [Canvas系列]Canvas画布系列教程
- canvas(柱状图)
- canvas系列教程08-canvas各种坑
- canvas系列教程1-前言
- Canvas之画柱状图
- canvas系列教程07-canvas动画基础1
- html5 Canvas画图系列教程目录
- canvas系列教程01-编辑器和helloword
- canvas系列教程02-直线和曲线
- 用canvas画的柱状图
- Canvas教程 Canvas tutorial
- Canvas教程 Canvas tutorial
- Canvas教程 Canvas tutorial
- easymybatis——mybatis开发利器
- siebel编程
- Java中String的不可变性和创建String的内存变化
- An overview of gradient descent optimization algorithms
- jquery指定输入框获得焦点
- canvas系列教程04-柱状图项目2
- ffmpeg 的那些坑
- scau 9716 矩形的并
- 顺序容器初识
- SpringBoot:AOP Aspect切面编程
- CentOs7下搭载分布式Hadoop2.9
- linux添加新磁盘和创建分区
- xmind破解方法
- python3 连接 mysql 遇到乱码问题解决方案