chart.js基本知識——淺析構造函數

  之前文章中的示例代碼中執行個體化chart類使用的如下代碼，主要使用的參數包括頁面中canvas元素，繪圖類型、資料、參數。

var barChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options:{
                responsive:false
            }
            });
           

  從chart類的定義來看，構造函數中主要包括兩類參數：canvas元素（item）和使用者配置（userConfig）。根據參考文獻1-2，有多種方式定位canvas元素，也即參數1的形式有很多種：canvas元素、canvas元素繪圖上下文、canvas元素名稱、jQuery執行個體。在構造函數中，調用getCanvas函數根據參數1擷取canvas元素。

class Chart {
	  constructor(item, userConfig) {
	    const me = this;
	    const config = this.config = new Config(userConfig);
	    const initialCanvas = getCanvas(item);

	...
	...
	...
	
	function getCanvas(item) {
	  if (_isDomSupported() && typeof item === 'string') {
	    item = document.getElementById(item);
	  } else if (item && item.length) {
	    item = item[0];
	  }
	  if (item && item.canvas) {
	    item = item.canvas;
	  }
	  return item;
}
           

  構造函數的第二個參數（Config類型）儲存繪圖類型（type）、資料（data）和配置（options）：

    1）type用于指定繪圖類型，字元串類型，目前chart.js可以繪制的圖形主要包括以下幾種（截圖來自參考文獻1-2，便于中英文對照）：

    2）data儲存繪圖所需的資料及參數，主要包括labels、datasets。datasets屬于集合對象，集合中的每個對象都對應一類圖形資料（如折線圖中的一條折線、柱狀圖中的一類圖形等），每類圖形資料中包括圖形名稱、資料及其它設定（如前面文章中提到的張力、是否顯示線條等），其代碼形式如下所示：

datasets: [{
            label: '折線1',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0,
            showLine:true
        },
        {
            label: '折線2',
            data: [85, 79, 100, 101, 76, 75, 60],
            fill: false,
            borderColor: 'rgb(175, 92, 92)',
            tension: 0,
            showLine:true
        }]
        };
           

  labels用于設定坐标系中索引軸（一般為x軸）上顯示的資訊，是一個字元串或數值型數組，其長度應與datasets集合中所有對象中的資料屬性中的最大長度保持一緻，否則圖表圖形會顯示不全。如下圖所示，左側為正常顯示的圖形，總共7個資料，x軸顯示7個标簽，但如果labels長度為2，則僅顯示2個點的圖形（右圖所示）。

    3）options儲存圖表的全局配置，采用命名空間形式記錄不同對象的配置值，如布局、标題、動畫、提示等。在chart類的構造函數中指派時，采用嵌套形式，如下列代碼所示。詳細的選項命名空間及屬性說明請見參考文獻1-2。後續會慢慢學習并使用這些屬性。

options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
           

[1]https://chartjs.bootcss.com/docs/

[2]https://www.chartjs.org/docs/latest/charts/line.html#line-styling

[3]https://blog.csdn.net/qq_25652949/article/details/82735658