canvas系列教程05-柱狀圖項目3

vboy1010 發布于2019-08-21 18:19 / 749人閱讀

摘要：書接上文，我們提前做些準備工作，比如畫圖前先把坐標邊距做出來，還有各種字體大小算出來。

書接上文，我們提前做些準備工作，比如畫圖前先把坐標邊距做出來，還有各種字體大小算出來。

這里需要一點面向對象的知識，

"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柱狀圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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