Canvas series tutorial 05 – histogram project 3

Time:2020-10-6

The book continues with the above, 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,

'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
}

Note here that after preparing canvas, we prepare two functions: one is the background data processing function, and the other is the function of recalculating the processed data for the chart.

'use strict';
//Imitation http://echarts.baidu.com/demo.html#bar -gradient
window.onload = function(){
    var data = [
      {"label": "January", "value": getrandomint (0400)},
      {"label": "February", "value": getrandomint (1400)},
      {"label": "March", "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();
        //This is just to sort out the data that the background gives you, not the data that can be drawn directly by the chart
        //For example, the maximum value is 234. In fact, we have to spend 240. It can't be untidy
        c.handleData();
        //So we need to process the data
        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(){
        //Because the background must give you a stack of standard array format, but you can't use it directly, you have to own 666
        var c = this;
        c. Label = []; // this array contains the name of the loop content, such as [January, February]
        c. Values = []; // value [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);
        //Calculate coordinate width and height
        c.horAxiWidth = c.cw - 2*c.horGap;
        c.verAxiWidth = c.ch - 2*c.verGap;

        //Calculate the maximum upper boundary. For example, if the maximum number is 234, the coordinates get 240 instead of 234
        //Determine the number of horizontal and vertical grids
        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
//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
}

In fact, the most difficult part of drawing a chart is not drawing, but sorting out the data. At this stage, basically, the most difficult part is over. After we start drawing, it will be much easier.