20230722 Chart.js跟CSS相關閱讀

# Chart.js 拋錯

• chart.js Failed to create chart: can't acquire context from the given item
• Error : Failed to create chart: can't acquire context from the given item

ChatGPT 的見解：

... 在 <script setup> 中，代码在模块上下文中执行，因此在组件加载时， document.getElementById('myChart') 可能无法找到元素，因为此时 DOM 尚未完全构建。为了解决这个问题，我们可以使用 onMounted 钩子，在组件挂载后再执行图表的绘制。

又是生命週期～～

# 改圖表大小跟對齊相關

Canva 的特性宜多了解...

• 官方文件指出這些直覺的寫法都是無駄無駄
• div 奇策

ChatGPT 的懶人包：

.chart-container {

  width: 50%; /* 將 div 寬度縮小為原來的 50% */

  height: 50%; /* 將 div 高度縮小為原來的 50% */

  margin: 0 auto; /* 將 div 水平置中 */

  display: flex;

  justify-content: center;

  align-items: center;

}

好用（喂）

# 其他 CSS 相關

• 29. CSS 水平置中 / 垂直置中的方法
• CSS 的元件狀態
• 問 ChatGPT「
  我的 Bootstrap 有個 col-8 跟 col-4
  我要如何讓畫面變窄時，col-4 的內容自動往下移動啊」
  • 答案是用 md 系列 class，例如 col-md-8 這種，就能達到這個效果囉 > w<