canvas系列教程05-柱状图项目3

vboy1010 发布于2019-08-21 18:19 / 827人阅读

摘要：书接上文，我们提前做些准备工作，比如画图前先把坐标边距做出来，还有各种字体大小算出来。

书接上文，我们提前做些准备工作，比如画图前先把坐标边距做出来，还有各种字体大小算出来。

这里需要一点面向对象的知识，

</>复制代码 
"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
}

说一点，你如果不懂就先按照我写的弄出来，别自己发明创造，写多了你也就知道为什么我这么写了。当然上面这个写法挺恶心的，让我想起了，没有整理过的女生宿舍，

</>复制代码 
"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
}

忽然感觉就像整理过的女生宿舍有么有，太整齐了！

好，整理好了代码，先怼一个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
}

这里注意，准备canvas完毕我们就准备两个函数一个是后台数据过来处理函数，一个是处理完的数据针对图表重新计算的函数。

</>复制代码 
"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();
        //这里只是把后台给你的数据整理好了，并不是图表直接能画的数据
        //比如最大值是234，其实我们要花240，不可能是不整齐的
        c.handleData();
        //所以需要处理数据
        c.prepareData();
        console.log(c);
    };
    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");
    };
    Bcharts.prototype.handleData = function(){
        //因为后台肯定给你标准的数组格式一堆，但是你没法直接用，得自己666一把
        var c = this;
        c.label = [];//这个数组放循环内容的名字，比如[一月，二月]
        c.values = [];//放值[200,45……]
        c.data.forEach(function(item){
          c.label.push(item.label);
          c.values.push(item.value);
        });
    };
    Bcharts.prototype.prepareData = function(){
        var c = this;
        c.itemNum = c.data.length;
        c.MaxValue = Math.max.apply(null,c.values);
        c.MinValue = Math.min.apply(null,c.values);
        //算坐标宽高
        c.horAxiWidth = c.cw - 2*c.horGap;
        c.verAxiWidth = c.ch - 2*c.verGap;
        //计算最大上边界，比如最大数是234，坐标得到240，而不是234
        //确定横竖格子数
        c.verBound = Math.ceil(c.MaxValue/10)*10;
        c.horFeq = c.verBound/c.itemNum;
        c.verFeq = c.horAxiWidth/c.itemNum;
    };
    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
}

其实图表的绘画最难的不是绘画，而是数据的整理，到这一步，基本上最难的就结束了，后面我们开始画，就轻松多了。

云服务器 GPU云服务器柱状图画柱状图柱状图各种图形 mpandroidchart柱状图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90345.html

canvas系列教程03-柱状图项目1

摘要：弄了一堆线方块和函数，感觉挺玄乎，然并卵。我们直接写个项目看看。一个比较拽的应用就是图表和游戏，我们从浅入深，先玩图表，图表我们今天说一个最简单柱状图。第三件事，数据我用的模拟，实际项目一般是后台提供。弄了一堆线方块和函数，感觉挺玄乎，然并卵。我们直接写个项目看看。 canvas一个比较拽的应用就是图表和游戏，我们从浅入深，先玩图表，图表我们今天说一个最简单柱状图。showImg(h...

xiaolinbang 2019-08-22 11:23 评论0 收藏0
canvas系列教程06-柱状图项目4

摘要：最终效果图下面代码只有一个难点怎么算横轴纵轴坐标位置其余就容易多了，有一个注意问题，我其实写复杂了各种位置都是动态算的，因为实际项目你用写死的数值浏览器适配就会出问题。上一篇文章我已经说过数据准备好画图就非常简单了，如果你担心不回话好办，我给你个最简单的小例子，你先练练。showImg(https://segmentfault.com/img/remote/146000001252...

wangym 2019-08-21 18:19 评论0 收藏0

发表评论

登陆后可评论

0条评论

vboy1010

男|高级讲师

我要关注我要私信

TA的文章

菜鸟笔记(5)——VS（Visual Studio）的一些常用的设置，( 使用printf和scan

阅读 2662·2021-09-27 13:36
前端面试必问题答疑（2）

阅读 2281·2019-08-29 18:47
CSS预编译语言Less的用法总结

阅读 2267·2019-08-29 15:21
CSS 字体(例如font-awesome)，使用子域名之后不能正确显示

阅读 1547·2019-08-29 11:14
雪碧图sprity 合并多图使用心得

阅读 2105·2019-08-28 18:29
向CSS创始人之一Bert Bos提问！

阅读 1753·2019-08-28 18:04
IE 8 浏览器 placeholder 兼容性处理

阅读 688·2019-08-26 13:58
JavaScript sort() 对json进行排序(数组)

阅读 3343·2019-08-26 12:12

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

canvas系列教程05-柱状图项目3

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

canvas系列教程03-柱状图项目1

canvas系列教程06-柱状图项目4

发表评论

0条评论

vboy1010

男|高级讲师

TA的文章

菜鸟笔记(5)——VS（Visual Studio）的一些常用的设置，( 使用printf和scan

前端面试必问题答疑（2）

CSS预编译语言Less的用法总结

CSS 字体(例如font-awesome)，使用子域名之后不能正确显示

雪碧图sprity 合并多图使用心得

向CSS创始人之一Bert Bos提问！

IE 8 浏览器 placeholder 兼容性处理

JavaScript sort() 对json进行排序(数组)

最新活动