Underlake Reading Room

这里是图书馆外的阅览室🌟

0%

ChartJS的使用记录

Posted on Edited on In Disqus: 9.4k 9 mins.

给大家表演个画表(的代码).

ChartJS是html里做的挺成熟的图标插件.
这里使用的是2.9.4版本.

为什么都出到4了还在用2版本?

因为2是stand alone的最后一个版本…3之后的都要自己下下来再build,或者用提供的cdn链接.
虽然大部分情况够用了…但一些情况就是得非常干净的用stand alone文件…于是.

以下代码逻辑很简单,基本是替换【chart js所附带的class】的数据,仅做自用保存.




Default displaying

1
2
3
4
5
6
7
8
9
10
11
12
function chart_test(){
  var xAxis = ['label1','label2','label3','label4','label5','label6','label7'];
  var yAxis = [0,1,2,3,4,5,6];
  make_myChart(xAxis,yAxis);
}

function chart_test_double(){
  var yAxis1 = [20, 36, 84, 76, 69];
  var yAxis2 = [10, 20, 40, 50, 60];
  var xAxis = ['label1','label2','label3','label4','label5'];
  make_twoLineChart(xAxis, yAxis1, yAxis2);
}



Make chart function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
function make_myChart(xAxis, yAxis) {

var ctx = document.getElementById("myChart").getContext('2d');


var myChart = new Chart(ctx, {
  type: 'line',
  data: {
     labels: xAxis,
     datasets: [{
       label: 'PlaceHolder',
       fill: false,
       data: yAxis,
       backgroundColor: 'rgb(255, 99, 132)',
       borderColor: 'rgb(255, 99, 132)',
       borderCapStyle: 'square',
       lineTension: 0,
       borderWidth: 4
       }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      yAxes: [{
        ticks: {
        beginAtZero:true
        }
      }]
    },
  }
});

ptrChart = myChart;

}



function make_twoLineChart(xAxis, yAxis1, yAxis2){
var canvas = document.getElementById('anotherChart');
var AnotherChart = new Chart(canvas, {
  type: 'line',
  data: {
   labels: xAxis,
   datasets: [{
     label: 'Placeholder1',
     fill: false,
     yAxisID: 'A',
     data: yAxis1,
     backgroundColor: 'rgb(255, 99, 132)',
     borderColor: 'rgb(255, 99, 132)',
     borderCapStyle: 'square',
     lineTension: 0,
     borderWidth: 4
   }, {
     label: 'Placeholder2',
     fill: false,
     yAxisID: 'B',
     data: yAxis2,
     backgroundColor: 'rgb(54, 162, 235)',
     borderColor: 'rgb(54, 162, 235)',
     borderCapStyle: 'square',
     lineTension: 0,
     borderWidth: 4
   }]
  },
  options: {
     scales: {
       yAxes: [{
         id: 'A',
         type: 'linear',
         position: 'left',
         ticks: {
          beginAtZero:true,
          min: 0,
          max: 100
         }
       }, {
         id: 'B',
         type: 'linear',
         display: false,
         position: 'left',
         ticks: {
          beginAtZero:true,
          min: 0,
          max: 100
         },
         gridLines: {
           drawBorder: false,
         }
       }]
     },
     responsive: true,
     maintainAspectRatio: false,
     // title: {
       // display: true,
       // text: 'Sample chart with title',
       // fontSize: 30
     // }
  }
  });
ptrAnotherChart = AnotherChart;
}



function make_multLineChart(xAxis, yAxis, chartMax, aLabel){
var canvas = document.getElementById('anotherChart');
var AnotherChart = new Chart(canvas, {
  type: 'line',
  data: {
   labels: xAxis,
   datasets: [{
     label: aLabel,
     fill: false,
     yAxisID: 'A',
     data: yAxis,
     backgroundColor: 'rgb(255, 99, 132)',
     borderColor: 'rgb(255, 99, 132)',
     borderCapStyle: 'square',
     lineTension: 0,
     borderWidth: 4
   },]
  },
  options: {
   scales: {
     yAxes: [{
       id: 'A',
       type: 'linear',
       position: 'left',
       ticks: {
        beginAtZero:true,
        min: 0,
        max: chartMax
       }
     }]
   },
   responsive: true,
   maintainAspectRatio: false,
  }
  });
ptrAnotherChart = AnotherChart;
}



Update chart function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
// for multi line chart, make chart first, then use update_MultChart to add line

function goMakeChart(gPeriod, gCategory, chartMax){
  //make_multLineChart(xAxis, yAxis, chartMax, aLabel)
  if (gPeriod === "Time1"){
     if (gCategory === "Cate1"){
       make_multLineChart(JSON.parse(xValue),JSON.parse(yValue), chartMax, "# of Cate1");
     } else if (gCategory === "Cate2"){
       make_multLineChart(JSON.parse(xValue),JSON.parse(yValue), chartMax, "# of Cate2");
     }

  } else if (gPeriod === "Time2"){
    if (gCategory === "Cate1"){
      make_multLineChart(JSON.parse(xValue),JSON.parse(yValue), chartMax, "# of Cate1");
    } else if (gCategory === "Cate2"){
      make_multLineChart(JSON.parse(xValue),JSON.parse(yValue), chartMax, "# of Cate2");
    }

  }

}

// update multi line chart
function update_MultChart(gPeriod, gCategory, chartMax, colour, newID){
  if (gPeriod === "Time1"){
    if (gCategory === "Cate1"){
      addLine_multLineChart(JSON.parse(yValue), "# of Cate1", colour, chartMax, newID);
    } else if (gCategory === "Cate2"){
      addLine_multLineChart(JSON.parse(yValue), "# of Cate2", colour, chartMax, newID);
    }
  } else if (gPeriod === "Time2"){
    if (gCategory === "Cate1"){
      addLine_multLineChart(JSON.parse(yValue), "# of Cate1", colour, chartMax, newID);
  } else if (gCategory === "Cate2"){
      addLine_multLineChart(JSON.parse(yValue), "# of Completed", colour, chartMax, newID);
    }
  }
}

// for single line chart
function goUpdate(gPeriod,gCategory){
//change base on gPeriod and gCatergory
  if (gPeriod === "Time1"){
    if (gCategory === "Cate1"){
      update_myChart(JSON.parse(xValue),JSON.parse(yValue),"# of Cate1");
    } else if (gCategory === "Cate2"){
      update_myChart(JSON.parse(xValue),JSON.parse(yValue),"# of Cate2");
    }
  } else if (gPeriod === "Time2"){
    if (gCategory === "Cate1"){
      update_myChart(JSON.parse(xValue),JSON.parse(yValue),"# of Cate1");
    } else if (gCategory === "Cate2"){
      update_myChart(JSON.parse(xValue),JSON.parse(yValue),"# of Cate2");
    }
  }
}

function update_myChart(xAxis, yAxis, sLabel) {
  ptrChart.data.datasets[0].data = yAxis;
  ptrChart.data.datasets[0].label = sLabel;
  ptrChart.data.labels = xAxis;
  ptrChart.update();
}

// function update_twolineChart(xAxis, yAxis1, yAxis2)   {
  // ptrAnotherChart.data.datasets[0].data = yAxis1;
  // ptrAnotherChart.data.datasets[1].data = yAxis2;
  // ptrAnotherChart.data.labels = xAxis;
  // ptrAnotherChart.update();
// }

// function addLine_twolineChart(){
  // ptrAnotherChart.data.datasets.push({
    // label: 'Placeholder3',
    // fill: false,
    // yAxisID: 'C',
    // data: [40, 40, 40, 40, 40],
    // backgroundColor: 'rgb(255, 99, 132)',
    // borderColor: 'rgb(255, 99, 132)',
    // borderCapStyle: 'square',
    // lineTension: 0,
    // borderWidth: 4
// });

// ptrAnotherChart.options.scales.yAxes.push({
   // id: 'C',
   // type: 'linear',
   // display: false,
   // position: 'right',
   // ticks: {
     // beginAtZero:true
   // },
   // gridLines: {
     // drawBorder: false,
   // }s
// });
// ptrAnotherChart.update();

// }

//addLine_multLineChart(JSON.parse(gCurrProc.PROC_CNT_WK), "# of Process", colour, chartMax, 'B');

function addLine_multLineChart(newData,newLabel,newColour,chartMax, newID){
  ptrAnotherChart.data.datasets.push({
   label: newLabel,
   fill: false,
   yAxisID: newID,
   data: newData,
   backgroundColor: newColour,
   borderColor: newColour,
   borderCapStyle: 'square',
   lineTension: 0,
   borderWidth: 4
  });

  ptrAnotherChart.options.scales.yAxes.push({
     id: newID,
     type: 'linear',
     display: false,
     position: 'left',
     ticks: {
       beginAtZero:true,
       min: 0,
       max: chartMax
     },
     gridLines: {
       drawBorder: false,
     }
  });

ptrAnotherChart.update();

}




Tool function

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Array.prototype.max = function() {
  return Math.max.apply(null, this);
};

Array.prototype.min = function() {
  return Math.min.apply(null, this);
};


function findMax(gPeriod,checkboxArray){
  var gCatergory, tempMax, vI;
  tempMax = 0;
  for (vI = 0; vI < checkboxArray.length; vI++) {
    gCategory = checkboxArray[vI];
    if (gPeriod === "Time1"){
       if (gCategory === "Cate1"){
         tempMax = Math.max(JSON.parse(Cate1).max(), tempMax);
       } else if (gCategory === "Cate2"){
         tempMax = Math.max(JSON.parse(Cate2).max(), tempMax);
       }
    } else if (gPeriod === "Time2"){
      if (gCategory === "Cate1"){
        tempMax = Math.max(JSON.parse(Cate1).max(), tempMax);
      } else if (gCategory === "Cate2"){
        tempMax = Math.max(JSON.parse(Cate2).max(), tempMax);
      }
    }
  }
  return tempMax;
}




Create a canvas

1
2
$(vPtr).append("<br><div><canvas id='myChart'></canvas></div>");
$(vPtr).append("<script>chart_test();</script>");



When creating multi line chart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var chartMax;
chartMax = 100;
for (vI = 0; vI < checkboxArray.length; vI++) {
 if (vI === 0){
   // destory graph first
   ptrAnotherChart.destroy();
   // find max
   chartMax = findMax("Time1", checkboxArray);
   // then make chart
   goMakeChart("Time", checkboxArray[vI], chartMax);
 } else if (vI === 1){
   // add line
  update_MultChart("Time1", checkboxArray[vI], chartMax, 'rgb(54, 162, 235)', 'B'); // blue
 } else if (vI === 2) {
  update_MultChart("Time2", checkboxArray[vI], chartMax, 'rgb(30, 165, 37)', 'C'); // green
 }
}