Canvas series tutorial 04 – histogram project 2

Time:2020-10-7

We do some preparatory work in advance, such as drawing before the first coordinate margin, as well as various font sizes.

You need a little bit of object-oriented knowledge here,

'use strict';
//Imitation http://echarts.baidu.com/demo.html#bar -gradient
window.onload = function(){
    var data = [
      {"label": "January", "value": getrandomint (0400)},
      {"label": "January", "value": getrandomint (1400)},
      {"label": "January", "value": getrandomint (1400)}
    ];

    var targetId = 'bchart';
    var cw = 800;
    var ch = 600;

    function Bcharts(targetId,cw,ch,data){
      //Basic information
        Var C = this; // why? I'm lazy, C = chart = this;
        c.targetId = targetId;
        c.cw = cw;
        c.ch = ch;
        c.data = data;
      //Coordinate preparation, why prepare? Because the coordinates and fonts should be calculated dynamically and can't be written dead, otherwise the practicability is not enough
        c. Axeradio = 10; // define a scale. Why is it 10? Look at the picture. It's arbitrary. Don't be ridiculous
        c.horGap = (cw*axeRadio)/100;
        c.verGap = (ch*axeRadio)/100;
      //Sign preparation
        c. Fontradio = 3; // the reason is the same as above
        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
//If you're lazy, you can't write the basic function
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
}

To say a little, if you don’t understand, you should follow my writing first. Don’t invent and create by yourself. If you write too much, you will know why I wrote this way. Of course, the above writing is disgusting. It reminds me of the girls’ dormitories that have not been sorted out,

Lots of code, so let’s sort out the structure.

'use strict';
//Imitation http://echarts.baidu.com/demo.html#bar -gradient
window.onload = function(){
    var data = [
      {"label": "January", "value": getrandomint (0400)},
      {"label": "January", "value": getrandomint (1400)},
      {"label": "January", "value": getrandomint (1400)}
    ];

    var targetId = 'bchart';
    var cw = 800;
    var ch = 600;

    function Bcharts(targetId,cw,ch,data){
      //Basic information
        Var C = this; // why? I'm lazy, 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; // define a scale. Why is it 10? Look at the picture. It's arbitrary. Don't be ridiculous
      c.horGap = (c.cw*c.axeRadio)/100;
      c.verGap = (c.ch*c.axeRadio)/100;
    //Sign preparation
      c. Fontradio = 3; // the reason is the same as above
      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
//If you're lazy, you can't write the basic function
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
}

All of a sudden, I feel like the girls’ dormitory that has been sorted out. It’s too neat!

OK, after sorting out the code, first connect a canvas to the canvas. Here, I also use the object-oriented method to define an init function. Note that I have changed the targetid, but I wrote it incorrectly.

The final code is as follows,

'use strict';
//Imitation http://echarts.baidu.com/demo.html#bar -gradient
window.onload = function(){
    var data = [
      {"label": "January", "value": getrandomint (0400)},
      {"label": "January", "value": getrandomint (1400)},
      {"label": "January", "value": getrandomint (1400)}
    ];

    var targetId = 'div1';
    var cw = 800;
    var ch = 600;

    function Bcharts(targetId,cw,ch,data){
      //Basic information
        Var C = this; // why? I'm lazy, 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; // define a scale. Why is it 10? Look at the picture. It's arbitrary. Don't be ridiculous
      c.horGap = (c.cw*c.axeRadio)/100;
      c.verGap = (c.ch*c.axeRadio)/100;
    //Sign preparation
      c. Fontradio = 3; // the reason is the same as above
      c.horFontSize = (c.cw*c.fontRadio)/100;
      c.verFontSize = (c.ch*c.fontRadio)/100;

    };
    //Initialization
    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
//If you're lazy, you can't write the basic function
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
}