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