在應用中主要分享曾經走過的坑和對於一些比較常用的圖表屬性說明

環境：vite + vue3 <script setup> + js
套件版本： am4

#應用

- 😰 坑 - html container 'chartdiv' not foun

按照官網文件用 npm 安裝後，開始使用過程中也是按照文件的 Basics 執行，相關程式碼如下：

<template>
  <div id="chartdiv" style="width: 100%; height: 400px" />
</template>

<script setup>
import * as am4core from '@amcharts/amcharts4/core'
import * as am4charts from '@amcharts/amcharts4/charts'
import am4themes_animated from '@amcharts/amcharts4/themes/animated'

// 呼叫 AmCharts的useTheme 方法，用於啟用 AmCharts 的主題（這裡是am4themes_animated）
am4core.useTheme(am4themes_animated)

// Create chart instance
let chart = am4core.create('chartdiv', am4charts.PieChart)

// Add data
chart.data = [...]

let pieSeries = chart.series.push(new am4charts.PieSeries())
pieSeries.dataFields.value = 'litres'
pieSeries.dataFields.category = 'country'
</script>

畫面展示：

畫面沒有出現任何圖表卻出現這段提醒：html container 'chartdiv' not found

解決辦法：

1. 繼續看完文件，發現有一個是 amchart4 的整合，其中一個是搭配 vue.js
2. 有沒有發現？在一般的 HTML 基礎使用是以 id 來控制，但是如果和 vue.js 使用則是改用 ref (這樣也有關係？我滿頭問號！)
3. 說真的我還是不相信，所以叫出 DEMO 然後全部複製貼上，因為 DEMO 也是用 id 去抓的，只是多做一件事情：把實例掛載到 onMounted

   import { onMounted, onBeforeUnmount } from 'vue'
   import * as am4core from '@amcharts/amcharts4/core'
   import * as am4charts from '@amcharts/amcharts4/charts'
   import am4themes_animated from '@amcharts/amcharts4/themes/animated'
   
   // 呼叫 AmCharts的useTheme 方法，用於啟用 AmCharts 的主題（這裡是am4themes_animated）
   am4core.useTheme(am4themes_animated)
   
   function renderPieChart() {
     // Create chart instance
     const chart = am4core.create('chartdiv', am4charts.PieChart)
   
     // Add data
     chart.pieChart.data = [...]
   
     // Create pie series
     let pieSeries = chart.pieChart.series.push(new am4charts.PieSeries())
     pieSeries.dataFields.value = 'litres'
     pieSeries.dataFields.category = 'country'
   }
   
   onMounted(() => {
     renderPieChart()
   })
   
   onBeforeUnmount(() => {
     if (chart) {
       chart.dispose()
     }
   })
   

   畫面展示：
   
   ⚠️ 對於 AmCharts 4（或其他類似的圖表庫），圖表的渲染需要依賴特定的 DOM 元素，因此必須在 DOM 元素可用後才能進行。 這就是為什麼通常將 AmCharts 圖表的創建和配置放在 onMounted 生命週期鉤子內的原因。
   

*- pie chart 屬性說明 *

Anatomy of a Pie Chart
https://www.amcharts.com/docs/v4/chart-types/pie-chart/

１. Y 軸

2. 圖例 legend

** 官網說明**
https://www.amcharts.com/docs/v4/concepts/legend/

3. 資料系列 Series

- bar chart

DEMO
https://www.amcharts.com/demos/

DEMO 有很多範例簡介，點選後可以再圖表的右下角看到原始碼，這裡要特別留意...因為目前已經是 am5 所以如果專案是使用舊版本要自行轉換

<template>
  <div class="hello" id="chartdiv" />
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';

// 呼叫 AmCharts的useTheme 方法，用於啟用 AmCharts 的主題（這裡是am4themes_animated）
am4core.useTheme(am4themes_animated);

let chart = null;

function renderXYChart() {
  // Create chart instance
  const chart = am4core.create('chartdiv', am4charts.XYChart)

  // Add data
  chart.data = [
    {
      date: new Date(2018, 0, 1),
      value: 450,
      value2: 362,
      value3: 699
    },...
  ];

  // Create axes
  const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.grid.template.location = 0;
  dateAxis.renderer.minGridDistance = 30;

  const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

  // 監聽Y軸的ready事件，該事件在Y軸準備好後觸發。
  valueAxis.events.on('ready', function (ev) {
    ev.target.min = ev.target.min
    ev.target.max = ev.target.max
  });

  // Create series
  function createSeries(field, name) {
    const series = chart.series.push(new am4charts.ColumnSeries())
    series.dataFields.valueY = field
    series.dataFields.dateX = 'date'
    series.name = name
    series.tooltipText = '{dateX}: [b]{valueY}[/]'
    series.strokeWidth = 2

    return series
  };

  createSeries('value', 'Series #1');
  createSeries('value2', 'Series #2');
  createSeries('value3', 'Series #3');

  // 建立圖例（Legend）並將其賦值給圖表，以在圖表中顯示系列標籤
  chart.legend = new am4charts.Legend();

  // 啟用互動式遊標，允許使用者在圖表上查看數據點的詳細資訊
  chart.cursor = new am4charts.XYCursor();

  // 新增水平滾動條，以便用戶可以滾動查看較長的圖表
  chart.scrollbarX = new am4core.Scrollbar();
}

onMounted(() => {
  renderXYChart()
})

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose()
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 100%;
  height: 500px;
}
</style>