Day6 我承认我是视觉动物

• Chart

表格可以看出资料中的细节，所以一开始从表格开始搭建，而进一步，图表可以更直觉的看出整体资料的趋势或是相对应的关系，特别是在数据量很大时。
其中在JavaScript可以制作图表的资源，可以参考此篇介绍，而在开源的部分(我免费我骄傲!)，以chart.js和plotly.js的讨论度最高，讨论度高则可以参考的范例就多，这样就能符合我们一开始希望的能快速开发。
而在选择 chart.js还是plotly.js，这两者的基本功能都是足够使用的，但诚如标题，个人主观觉得 chart.js颜值较高(本人比较肤浅)，特别是图表在一开始在载入时会有动画，感觉非常好，因此主要会以chart.js使用。
在plotly.js比较大的特点是有图表控制的功能，例如zoom-in、zoom-out、pan等功能，另外也能额外做出像range slider和selectors的功能，所以较有弹性，适合需进一步分析图表的应用，之後也会有试用以做比较。

• Chart.js

Chart.js可支援7种基本图表，分别为：line chart、bar chart(包含直条图和横条图)、pie chart(包含甜甜圈图)、polar area chart、radar chart、scatter chart、bubble chart(可根据资料显示每个点的颗粒大小)。
另外更支援bar和line的复合图表，可重叠或堆叠，下图是重叠的例子：

• Implement

接下来我们来看基本的API，我们先以直条图为例，我们先来建立资料组的物件变数，其中基本需要包含label(资料名称，没有会undefined)，data(资料本身)，borderColor和backgroundColor(预设是灰的，在有多笔资料时至少要二择一给值才分辨得出来)。我们这边同样用在day2的班级成绩资料来练习，其中array为day2时CSV读进来转成阵列变数(arrayToTable，同样修改该function将array给到全域变数)，透过全域变数的方式给进来。
在这范例下label就是对应到姓名，data对应到各科成绩，这边用map的和箭号函式来将阵列的资料排进来(下回解说)，颜色则是先写好的一组序列，其中backgroundColor会额外加上透明度设定(比较美观)：

	const datasets = array.slice(1).map((row, index) => ({
		label: row[0], //data-label
		borderColor: ORDER_COLORS[index],
		backgroundColor: RGBwithA(ORDER_COLORS[index], transparent),
		data: row.slice(1) //data
	}));

接下再将资料组的物件变数(dataset)包进资料物件中，并增加labels(X座标的序列)，然後再将资料物件(data)包进配置物件(config)中，这边要增加设定图表种类(type)：

	const data = {
		labels: array[0].slice(1), //x-axis
		datasets: datasets
	};

	const config = {
		type: type, //chart type
		data: data,
		options: {}
	};  

最後再new一个Chart并将对应在HTML的id和刚才建好的配置物件(config)放进去：

	var myChart = new Chart(
		document.getElementById(chartId),
		config
	);

回到HTML，我们可以再将原本从一开始Bootstrap范例中拿掉canvas tag那行放回去(如下方code)，然後加一个按钮执行刚写的JavaScript的function，并於script tag中呼叫，就完成了：

<canvas class="my-4 w-100" id="myChart" width="900" height="280"></canvas>