DAY 24
0
Modern Web

# 實作目標

``````const colors = ["#8E354A", "#1C1C1C"];
const epidemic = [
{ "月份": 2, "累計確診": 39, "累計死亡": 1 },
{ "月份": 3, "累計確診": 322, "累計死亡": 5 },
{ "月份": 4, "累計確診": 429, "累計死亡": 6 },
{ "月份": 5, "累計確診": 442, "累計死亡": 7 },
{ "月份": 6, "累計確診": 447, "累計死亡": 7 },
{ "月份": 7, "累計確診": 467, "累計死亡": 7 },
{ "月份": 8, "累計確診": 488, "累計死亡": 7 },
{ "月份": 9, "累計確診": 514, "累計死亡": 7 },
];
``````

# 動手開發

### 1. 容器準備

``````<div id="container"></div>
``````
``````// const container = document.querySelector('#container');
// 可以省略上面這行，直接將id名稱作為參數
let myChart = Highcharts.chart("container", {...});
``````

### 2. 資料準備

``````const month = epidemic.map(data => `\${data["月份"]}月`);
const confirmedNum = epidemic.map(data => data["累計確診"]);
const deathRate = epidemic.map(data => {
return Math.floor(data["累計死亡"] / data["累計確診"] * 10000) / 100;
});
``````

### 3. 創建圖表與區塊設定

1. 因為要做的是複數座標軸，所以Ｙ軸設定傳入的是 陣列，裡面的兩組物件代表的就是兩組Ｙ軸。
2. 第二組的百分比Ｙ軸要加上 `opposite` 屬性，才會顯示在右邊。
3. 數據列必須要設定 `yAxis` 屬性，用來指定要使用陣列中哪一組座標軸。

``````let myChart = Highcharts.chart("container", {
chart: { height: 500 },
colors: colors,
credits: { text: "數據來源: 衛福部疾管署" },
title: { text: "2020 臺灣疫情報告" },
tooltip: {
pointFormat: "{series.name}: {point.y} {series.userOptions.custom}",
},
xAxis: { categories: month },
yAxis: [
{
title: { text: "人數" },
labels: { format: "{value}人" }
},
{
title: { text: "百分比" },
labels: { format: "{value}％" },
opposite: true
}
],
series: [
{
name: "累計確診人數",
type: "column",
data: confirmedNum,
custom: "人"
},
{
name: "致死率",
data: deathRate,
yAxis: 1, // 指定第二組座標軸，1 為索引值
custom: "%"
}
]
});
``````