Day10 有图有真相

• Chart function

身为一个键盘柯南，最重要的技能之一就是储存和下载分析後的结果。另外chart.js其他对於图表的控制，包含更新​、清除、摧毁、显示和隐藏资料组，也会记录在今天笔记内。

• Save and download image

chart.js提供toBase64Image可将图表转成图像，其中要特别注意预设并没有设定图表的背景颜色，所以存成PNG时会是透明的，但存成JPEG会是黑的：

myChart.toBase64Image();
// => returns png data url of the image on the canvas
myChart.toBase64Image('image/jpeg', 1)
// => returns a jpeg data url in the highest quality of the canvas

然後我们可以参考此篇说明，创造一个 Anchor元素，并将href设为该图像，然後click function则会触发下载(download为储存档名，浏览器可以设定是自动下载或是有选择框)：

	let tempA = document.createElement('a');
	tempA.href = myChart.toBase64Image(); //save as png
	tempA.download = 'chart.png';	
	tempA.click();

• Update, reset, and clear

以昨天画回归线为例，当我们造好新的dataset後，我们用push将资料组放进去，然後需要更新图表，即update这个功能：

chart.data.datasets.push(newDataset);
chart.update();

其他若要删除资料组，或是新增和删除资料点，同样更新资料後，再用update更新图表，若资料有变化，则更新时会有动画，若资料没变化，则先reset後再一次update则会有动画。clear则是清除图表画面，但资料还在，所以再执行update就会在显示出来。

• new and destroy

在一开始建立图表时要new Chart，new完後就无法对同一个canvas的id在new Chart了，若要重new，必须要先destroy。

• show and hide

chart.js可以对资料组显示或隐藏：

chart.hide(1); // hides dataset at index 1 and does 'hide' animation.
chart.show(1); // shows dataset at index 1 and does 'show' animation.

而这个功能除了可以用JavaScript控制，也可以直接在页面上控制，点选图例的该资料组名称，就会切换隐藏和显示，隐藏後在图例的该资料组就会有删除线：