fix: #303 of cycle eff tooltip. Change background chart grid lines.

src/views/Discover/Performance/FreqChart.vue

@@ -249,12 +249,19 @@ export default {
         plugins: {
           legend: false, // 圖例
           tooltip: {
-            displayColors: false,
+            displayColors: true,
             titleFont: {weight: 'normal'},
             callbacks: {
-              title: function(context) {
-                return `${content.x}: ${getMoment(context[0].parsed.x)}`;
-              }
+              label: function(tooltipItem) {
+                  // 取得顏色
+                  const color = tooltipItem.dataset.borderColor;
+                  // 取得數據
+                  const label = tooltipItem.dataset.label || '';
+                  const value = tooltipItem.raw || '';
+
+                  // 建立一個小方塊顯示顏色
+                  return `${label}: ${tooltipItem.parsed.y}`; // 使用 Unicode 方塊表示顏色
+              },
             },
           },
           title: {
@@ -265,9 +272,6 @@ export default {
       };
 
       primeVueSetOption.scales.y.ticks.precision = 0; // y 軸顯示小數點後 0 位
-      primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
-        return `${content.y}: ${context.parsed.y}`;
-      };
       primeVueSetOption.scales.y.ticks.callback = function (value, index, ticks) {
         return value; //這裡的Y軸刻度沒有後綴代表時間的英文字母
       };