Update app.py

app.py

@@ -1273,8 +1273,8 @@ def recommend_chart_settings(df):
 """
 Gradio 應用程式：進階數據可視化工具
 作者：Gemini
-版本：3.0 (完整修復版 - 左右佈局, Accordion, 移除下拉選單 CSS)
-描述：包含所有功能的完整程式碼，旨在解決下拉選單問題並改進佈局。
+版本：4.0 (改用 Radio + 簡化佈局)
+描述：包含所有功能的完整程式碼，大量使用 Radio Button 替代 Dropdown，期望解決 UI 問題。
 """
 
 # =========================================
@@ -1300,7 +1300,7 @@ import traceback # 用於更詳細的錯誤追蹤
 # == 常數定義 (Constants) ==
 # =========================================
 
-# 圖表類型選項 (Chart Type Options)
+# 圖表類型選項 (Chart Type Options) - 保持列表
 CHART_TYPES = [
     "長條圖", "堆疊長條圖", "百分比堆疊長條圖", "群組長條圖", "水平長條圖",
     "折線圖", "多重折線圖", "階梯折線圖",
@@ -1312,7 +1312,7 @@ CHART_TYPES = [
     "雷達圖", "漏斗圖", "極座標圖", "甘特圖"
 ]
 
-# 顏色方案選項 (Color Scheme Options)
+# 顏色方案選項 (Color Scheme Options) - 保持字典，用於 Dropdown
 COLOR_SCHEMES = {
     "預設 (Plotly)": px.colors.qualitative.Plotly,
     "分類 - D3": px.colors.qualitative.D3, "分類 - G10": px.colors.qualitative.G10,
@@ -1338,14 +1338,19 @@ COLOR_SCHEMES = {
     "循環 - Twilight": px.colors.cyclical.Twilight, "循環 - IceFire": px.colors.cyclical.IceFire,
 }
 
-# 圖案填充選項 (Pattern Fill Options)
+# 圖案填充選項 (Pattern Fill Options) - 保持列表，用於 Radio
 PATTERN_TYPES = ["無", "/", "\\", "x", "-", "|", "+", "."]
 
-# 聚合函數選項 (Aggregation Function Options)
+# 聚合函數選項 (Aggregation Function Options) - 保持列表，用於 Radio
 AGGREGATION_FUNCTIONS = [
     "計數", "求和", "平均值", "中位數", "最大值", "最小值", "標準差", "變異數", "第一筆", "最後一筆"
 ]
 
+# 導出格式選項
+EXPORT_FORMATS_DATA = ["CSV", "Excel", "JSON"]
+EXPORT_FORMATS_IMG = ["PNG", "SVG", "PDF", "JPEG"]
+YES_NO_CHOICES = ["是", "否"]
+
 # =========================================
 # == 輔助函數 (Helper Functions) ==
 # =========================================
@@ -1431,7 +1436,9 @@ def parse_custom_colors(color_text):
         except Exception as e: print(f"解析自定義顏色時出錯: {e}"); return {}
     return custom_colors
 def update_patterns(*patterns_input):
-    return [p for p in patterns_input if p and p != "無"]
+    # 確保只返回有效圖案
+    return [p for p in patterns_input if p in PATTERN_TYPES and p != "無"]
+
 
 # =========================================
 # == 數據處理函數 (Data Processing Functions) ==
@@ -1451,6 +1458,9 @@ def process_upload(file):
             except Exception as e: return None, f"❌ 讀取 Excel 文件時出錯: {e}"
         else: return None, f"❌ 不支持的文件類型: '{file_type}'。請上傳 CSV 或 Excel 文件。"
         df.columns = df.columns.str.strip()
+        # 清理數據中的潛在空格（可選，但有助於分組）
+        # for col in df.select_dtypes(include=['object', 'string']).columns:
+        #     df[col] = df[col].str.strip()
         return df, f"✅ 成功載入 '{file_path.split('/')[-1]}'，共 {len(df)} 行，{len(df.columns)} 列。"
     except Exception as e: print(f"處理上傳文件時發生未預期錯誤: {e}"); traceback.print_exc(); return None, f"❌ 處理文件時發生未預期錯誤: {e}"
 
@@ -1461,66 +1471,97 @@ def parse_data(text_data):
         if ',' in first_line: separator = ','
         elif '\t' in first_line: separator = '\t'
         elif ' ' in first_line: separator = r'\s+'
-        else: separator = ','
-        try: df = pd.read_csv(data_io, sep=separator)
+        else: separator = ',' # 默認
+        try:
+            df = pd.read_csv(data_io, sep=separator, skipinitialspace=True) # skipinitialspace 處理分隔符後的空格
         except pd.errors.ParserError as pe: return None, f"❌ 解析數據時出錯：可能是分隔符錯誤或數據格式問題。檢測到的分隔符: '{separator}'. 錯誤: {pe}"
         except Exception as e: return None, f"❌ 解析數據時出錯: {e}"
         df.columns = df.columns.str.strip()
+        # 清理數據中的潛在空格
+        # for col in df.select_dtypes(include=['object', 'string']).columns:
+        #     df[col] = df[col].str.strip()
         return df, f"✅ 成功解析數據，共 {len(df)} 行，{len(df.columns)} 列。"
     except Exception as e: print(f"解析文本數據時發生未預期錯誤: {e}"); traceback.print_exc(); return None, f"❌ 解析數據時發生未預期錯誤: {e}"
 
 def update_columns(df):
     default_choices = ["-- 無數據 --"]
     if df is None or df.empty:
-        return (gr.Dropdown(choices=default_choices, value=default_choices[0], label="X軸 / 類別"),
-                gr.Dropdown(choices=default_choices, value=default_choices[0], label="Y軸 / 數值"),
-                gr.Dropdown(choices=["無"] + default_choices, value="無", label="分組列"),
-                gr.Dropdown(choices=["無"] + default_choices, value="無", label="大小列"))
-    columns = df.columns.tolist()
-    x_default = columns[0] if columns else None
-    y_default = columns[1] if len(columns) > 1 else (columns[0] if columns else None)
-    valid_columns = [col for col in columns if col is not None and col != ""]
-    group_choices, size_choices = ["無"] + valid_columns, ["無"] + valid_columns
-    return (gr.Dropdown(choices=valid_columns, value=x_default, label="X軸 / 類別"),
-            gr.Dropdown(choices=valid_columns, value=y_default, label="Y軸 / 數值"),
-            gr.Dropdown(choices=group_choices, value="無", label="分組列"),
-            gr.Dropdown(choices=size_choices, value="無", label="大小列"))
+        # 返回空的 Dropdown 更新，避免錯誤
+        no_data_update = gr.Dropdown(choices=default_choices, value=default_choices[0])
+        no_data_update_with_none = gr.Dropdown(choices=["無"] + default_choices, value="無")
+        return no_data_update, no_data_update, no_data_update_with_none, no_data_update_with_none
+
+    try:
+        columns = df.columns.tolist()
+        x_default = columns[0] if columns else None
+        y_default = columns[1] if len(columns) > 1 else (columns[0] if columns else None)
+        valid_columns = [str(col) for col in columns if col is not None and str(col) != ""] # 確保列名是字符串
+        group_choices, size_choices = ["無"] + valid_columns, ["無"] + valid_columns
+        return (gr.Dropdown(choices=valid_columns, value=x_default, label="X軸 / 類別"),
+                gr.Dropdown(choices=valid_columns, value=y_default, label="Y軸 / 數值"),
+                gr.Dropdown(choices=group_choices, value="無", label="分組列"),
+                gr.Dropdown(choices=size_choices, value="無", label="大小列"))
+    except Exception as e:
+        print(f"更新列選項時出錯: {e}")
+        no_data_update = gr.Dropdown(choices=default_choices, value=default_choices[0])
+        no_data_update_with_none = gr.Dropdown(choices=["無"] + default_choices, value="無")
+        return no_data_update, no_data_update, no_data_update_with_none, no_data_update_with_none
+
 
 # =========================================
 # == 圖表創建核心函數 (Core Plotting Function) ==
 # =========================================
 def create_plot(df, chart_type, x_column, y_column, group_column=None, size_column=None,
                 color_scheme_name="預設 (Plotly)", patterns=[], title="", width=800, height=500,
-                show_grid=True, show_legend=True, agg_func_name="計數", custom_colors_dict={}):
+                show_grid_str="是", show_legend_str="是", agg_func_name="計數", custom_colors_dict={}):
     fig = go.Figure()
     try:
-        # --- 1. 輸入驗證 ---
+        # --- 0. 將 "是"/"否" 轉換為布林值 ---
+        show_grid = True if show_grid_str == "是" else False
+        show_legend = True if show_legend_str == "是" else False
+
+        # --- 1. 輸入驗證 (更嚴格) ---
         if df is None or df.empty: raise ValueError("沒有有效的數據可供繪圖。")
+        if not chart_type: raise ValueError("請選擇圖表類型。")
+        if not agg_func_name: raise ValueError("請選擇聚合函數。")
         if not x_column or x_column == "-- 無數據 --": raise ValueError("請選擇有效的 X 軸或類別列。")
-        # 只有在非計數且非直方圖時才嚴格要求 Y 軸
-        if agg_func_name != "計數" and chart_type not in ["直方圖"] and (not y_column or y_column == "-- 無數據 --"):
-            raise ValueError("請選擇有效的 Y 軸或數值列。")
+
+        # 檢查列是否存在
         if x_column not in df.columns: raise ValueError(f"X 軸列 '{x_column}' 不在數據中。")
-        # 只有在需要 Y 軸時才檢查 Y 軸是否存在
-        if agg_func_name != "計數" and chart_type not in ["直方圖"] and y_column not in df.columns:
-            raise ValueError(f"Y 軸列 '{y_column}' 不在數據中。")
-        if group_column and group_column != "無" and group_column not in df.columns: raise ValueError(f"分組列 '{group_column}' 不在數據中。")
-        if size_column and size_column != "無" and size_column not in df.columns: raise ValueError(f"大小列 '{size_column}' 不在數據中。")
 
-        group_col, size_col = (None if col == "無" else col for col in [group_column, size_column])
+        # 只有在非計數且非直方圖時才嚴格要求 Y 軸
+        y_needed = agg_func_name != "計數" and chart_type not in ["直方圖"]
+        if y_needed:
+            if not y_column or y_column == "-- 無數據 --": raise ValueError("此圖表類型和聚合函數需要選擇有效的 Y 軸或數值列。")
+            if y_column not in df.columns: raise ValueError(f"Y 軸列 '{y_column}' 不在數據中。")
+        else:
+            y_column = None # 如果不需要 Y 軸，明確設為 None
+
+        # 處理可選列
+        group_col = None if group_column == "無" or not group_column else group_column
+        size_col = None if size_column == "無" or not size_column else size_column
+
+        if group_col and group_col not in df.columns: raise ValueError(f"分組列 '{group_col}' 不在數據中。")
+        if size_col and size_col not in df.columns: raise ValueError(f"大小列 '{size_col}' 不在數據中。")
+        if group_col == x_column: raise ValueError("分組列不能與 X 軸列相同。")
+        # if y_needed and y_column == x_column: raise ValueError("Y 軸列不能與 X 軸列相同（除非特殊情況）。") # 允許某些情況相同
+
         df_processed = df.copy()
 
         # --- 2. 數據類型轉換與準備 ---
-        for col in [x_column, y_column, group_col, size_col]:
-            if col:
-                try:
-                    # 嘗試將 Y 軸和大小列轉為數值 (如果需要聚合或用於大小)
-                    if (agg_func_name != "計數" and col == y_column) or (col == size_col):
-                         df_processed[col] = pd.to_numeric(df_processed[col], errors='coerce')
-                    # X 軸和分組列通常視為分類 (字符串)
-                    elif col in [x_column, group_col]:
-                         df_processed[col] = df_processed[col].astype(str)
-                except Exception as e: print(f"警告：轉換列 '{col}' 類型時出錯: {e}")
+        # 將 X 軸和分組列強制轉為字符串，以便正確分組
+        df_processed[x_column] = df_processed[x_column].astype(str)
+        if group_col:
+            df_processed[group_col] = df_processed[group_col].astype(str)
+
+        # 嘗試將 Y 軸和大小列轉為數值
+        if y_column:
+            try: df_processed[y_column] = pd.to_numeric(df_processed[y_column], errors='coerce')
+            except Exception as e: print(f"警告：轉換 Y 軸列 '{y_column}' 為數值時出錯: {e}")
+        if size_col:
+            try: df_processed[size_col] = pd.to_numeric(df_processed[size_col], errors='coerce')
+            except Exception as e: print(f"警告：轉換大小列 '{size_col}' 為數值時出錯: {e}")
+
 
         # --- 3. 數據聚合 (如果需要) ---
         needs_aggregation = chart_type not in ["散點圖", "氣泡圖", "直方圖", "箱型圖", "小提琴圖", "甘特圖"]
@@ -1528,36 +1569,41 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         y_col_agg = y_column # 預設 Y 軸列名
         if needs_aggregation:
             grouping_cols = [x_column] + ([group_col] if group_col else [])
-            # 檢查分組列是否有效
-            invalid_grouping_cols = [col for col in grouping_cols if col not in df_processed.columns]
-            if invalid_grouping_cols:
-                raise ValueError(f"以下分組/X軸列不在數據中: {', '.join(invalid_grouping_cols)}")
 
             if agg_func_name == "計數":
-                # 使用 size() 計算每個組的行數
-                agg_df = df_processed.groupby(grouping_cols, observed=False, dropna=False).size() # dropna=False 包含 NaN 類別
-                agg_df = agg_df.reset_index(name='__count__')
-                y_col_agg = '__count__' # 使用新生成的計數列
+                agg_df = df_processed.groupby(grouping_cols, observed=False, dropna=False).size().reset_index(name='__count__')
+                y_col_agg = '__count__'
             else:
                 agg_func_pd = agg_function_map(agg_func_name)
-                if not y_column or y_column not in df_processed.columns: raise ValueError(f"聚合函數 '{agg_func_name}' 需要一個有效的 Y 軸數值列。")
-                # 再次檢查 Y 軸是否為數值
-                if not pd.api.types.is_numeric_dtype(df_processed[y_column]):
-                     # 如果聚合函數是 first 或 last，允許非數值
-                     if agg_func_pd not in ['first', 'last']:
-                         raise ValueError(f"Y 軸列 '{y_column}' 必須是數值類型才能執行聚合 '{agg_func_name}'。")
+                if not y_column: raise ValueError(f"聚合函數 '{agg_func_name}' 需要一個有效的 Y 軸數值列。")
+                # 確保 Y 軸是數值類型 (除非 first/last)
+                if agg_func_pd not in ['first', 'last'] and not pd.api.types.is_numeric_dtype(df_processed[y_column]):
+                     # 嘗試再次轉換，如果失敗則報錯
+                     try: df_processed[y_column] = pd.to_numeric(df_processed[y_column], errors='raise')
+                     except (ValueError, TypeError): raise ValueError(f"Y 軸列 '{y_column}' 必須是數值類型才能執行聚合 '{agg_func_name}'。")
 
                 try:
                     # 執行聚合
-                    agg_df = df_processed.groupby(grouping_cols, observed=False, dropna=False)[y_column].agg(agg_func_pd)
-                    agg_df = agg_df.reset_index()
-                    # y_col_agg 保持為 y_column
+                    agg_df = df_processed.groupby(grouping_cols, observed=False, dropna=False)[y_column].agg(agg_func_pd).reset_index()
+                    y_col_agg = y_column # 保持原始列名
                 except Exception as agg_e:
                     raise ValueError(f"執行聚合 '{agg_func_name}' 時出錯: {agg_e}")
         else:
-            # 不需要聚合，直接使用處理過的數據
             agg_df = df_processed
-            # y_col_agg 保持為 y_column
+            y_col_agg = y_column # 保持原始列名 (可能為 None)
+
+        # 再次檢查聚合後的 DataFrame
+        if agg_df is None or agg_df.empty:
+             raise ValueError("數據聚合後沒有產生有效結果。")
+        # 確保繪圖所需的列存在於 agg_df 中
+        required_cols_for_plot = [x_column]
+        if y_col_agg: required_cols_for_plot.append(y_col_agg)
+        if group_col: required_cols_for_plot.append(group_col)
+        if size_col: required_cols_for_plot.append(size_col)
+        missing_cols = [col for col in required_cols_for_plot if col not in agg_df.columns]
+        if missing_cols:
+             raise ValueError(f"聚合後的數據缺少繪圖所需的列: {', '.join(missing_cols)}")
+
 
         # --- 4. 獲取顏色方案 ---
         colors = COLOR_SCHEMES.get(color_scheme_name, px.colors.qualitative.Plotly)
@@ -1567,136 +1613,138 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         if group_col and custom_colors_dict: fig_params["color_discrete_map"] = custom_colors_dict
 
         # --- (繪圖邏輯開始) ---
+        # (與 V3 版本相同，此處省略以保持簡潔，實際代碼應包含完整的 if/elif 結構)
+        # 確保 y_col_agg 在不需要時為 None
+        effective_y = y_col_agg if y_needed or agg_func_name == "計數" else None
+
         if chart_type == "長條圖":
-            fig = px.bar(agg_df, x=x_column, y=y_col_agg, color=group_col, **fig_params)
+            if not effective_y: raise ValueError("長條圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = px.bar(agg_df, x=x_column, y=effective_y, color=group_col, **fig_params)
         elif chart_type == "堆疊長條圖":
-            fig = px.bar(agg_df, x=x_column, y=y_col_agg, color=group_col, barmode='stack', **fig_params)
+            if not effective_y: raise ValueError("堆疊長條圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = px.bar(agg_df, x=x_column, y=effective_y, color=group_col, barmode='stack', **fig_params)
         elif chart_type == "百分比堆疊長條圖":
-             fig = px.bar(agg_df, x=x_column, y=y_col_agg, color=group_col, barmode='relative', text_auto='.1%', **fig_params)
+             if not effective_y: raise ValueError("百分比堆疊長條圖需要 Y 軸數值或 '計數' 聚合。")
+             fig = px.bar(agg_df, x=x_column, y=effective_y, color=group_col, barmode='relative', text_auto='.1%', **fig_params)
              fig.update_layout(yaxis_title="百分比 (%)")
         elif chart_type == "群組長條圖":
-            fig = px.bar(agg_df, x=x_column, y=y_col_agg, color=group_col, barmode='group', **fig_params)
+            if not effective_y: raise ValueError("群組長條圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = px.bar(agg_df, x=x_column, y=effective_y, color=group_col, barmode='group', **fig_params)
         elif chart_type == "水平長條圖":
-            fig = px.bar(agg_df, y=x_column, x=y_col_agg, color=group_col, orientation='h', **fig_params)
+            if not effective_y: raise ValueError("水平長條圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = px.bar(agg_df, y=x_column, x=effective_y, color=group_col, orientation='h', **fig_params)
         elif chart_type == "折線圖":
-            fig = px.line(agg_df, x=x_column, y=y_col_agg, color=group_col, markers=True, **fig_params)
+            if not effective_y: raise ValueError("折線圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = px.line(agg_df, x=x_column, y=effective_y, color=group_col, markers=True, **fig_params)
         elif chart_type == "多重折線圖":
-            fig = px.line(agg_df, x=x_column, y=y_col_agg, color=group_col, markers=True, **fig_params)
+            if not effective_y: raise ValueError("多重折線圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = px.line(agg_df, x=x_column, y=effective_y, color=group_col, markers=True, **fig_params)
         elif chart_type == "階梯折線圖":
-            fig = px.line(agg_df, x=x_column, y=y_col_agg, color=group_col, line_shape='hv', **fig_params)
+            if not effective_y: raise ValueError("階梯折線圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = px.line(agg_df, x=x_column, y=effective_y, color=group_col, line_shape='hv', **fig_params)
         elif chart_type == "區域圖":
-            fig = px.area(agg_df, x=x_column, y=y_col_agg, color=group_col, **fig_params)
+            if not effective_y: raise ValueError("區域圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = px.area(agg_df, x=x_column, y=effective_y, color=group_col, **fig_params)
         elif chart_type == "堆疊區域圖":
-            fig = px.area(agg_df, x=x_column, y=y_col_agg, color=group_col, groupnorm=None, **fig_params)
+            if not effective_y: raise ValueError("堆疊區域圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = px.area(agg_df, x=x_column, y=effective_y, color=group_col, groupnorm=None, **fig_params)
         elif chart_type == "百分比堆疊區域圖":
-             fig = px.area(agg_df, x=x_column, y=y_col_agg, color=group_col, groupnorm='percent', **fig_params)
+             if not effective_y: raise ValueError("百分比堆疊區域圖需要 Y 軸數值或 '計數' 聚合。")
+             fig = px.area(agg_df, x=x_column, y=effective_y, color=group_col, groupnorm='percent', **fig_params)
              fig.update_layout(yaxis_title="百分比 (%)")
         elif chart_type == "圓餅圖":
+            if not effective_y: raise ValueError("圓餅圖需要 Y 軸數值或 '計數' 聚合。")
             if group_col: print("警告：圓餅圖不支持分組列，已忽略。")
-            fig = px.pie(agg_df, names=x_column, values=y_col_agg, **fig_params)
+            fig = px.pie(agg_df, names=x_column, values=effective_y, **fig_params)
             if not group_col and custom_colors_dict: fig.update_traces(marker=dict(colors=[custom_colors_dict.get(str(cat), colors[i % len(colors)]) for i, cat in enumerate(agg_df[x_column])]))
         elif chart_type == "環形圖":
+            if not effective_y: raise ValueError("環形圖需要 Y 軸數值或 '計數' 聚合。")
             if group_col: print("警告：環形圖不支持分組列，已忽略。")
-            fig = px.pie(agg_df, names=x_column, values=y_col_agg, hole=0.4, **fig_params)
+            fig = px.pie(agg_df, names=x_column, values=effective_y, hole=0.4, **fig_params)
             if not group_col and custom_colors_dict: fig.update_traces(marker=dict(colors=[custom_colors_dict.get(str(cat), colors[i % len(colors)]) for i, cat in enumerate(agg_df[x_column])]))
         elif chart_type == "散點圖":
-            fig = px.scatter(agg_df, x=x_column, y=y_col_agg, color=group_col, size=size_col, **fig_params)
+            if not y_column: raise ValueError("散點圖需要選擇 Y 軸列。") # 散點圖必須有 Y
+            fig = px.scatter(agg_df, x=x_column, y=y_column, color=group_col, size=size_col, **fig_params)
         elif chart_type == "氣泡圖":
+            if not y_column: raise ValueError("氣泡圖需要選擇 Y 軸列。")
             if not size_col: raise ValueError("氣泡圖需要指定 '大小列'。")
-            # 確保大小列是數值
-            if not pd.api.types.is_numeric_dtype(agg_df[size_col]):
-                 raise ValueError(f"大小列 '{size_col}' 必須是數值類型。")
-            fig = px.scatter(agg_df, x=x_column, y=y_col_agg, color=group_col, size=size_col, size_max=60, **fig_params)
+            if not pd.api.types.is_numeric_dtype(agg_df[size_col]): raise ValueError(f"大小列 '{size_col}' 必須是數值類型。")
+            fig = px.scatter(agg_df, x=x_column, y=y_column, color=group_col, size=size_col, size_max=60, **fig_params)
         elif chart_type == "直方圖":
-            # 直方圖分析單一變量分佈，Y 軸通常是計數
-            # 確保 x_column 是數值類型
-            if not pd.api.types.is_numeric_dtype(agg_df[x_column]):
-                 raise ValueError(f"直方圖的 X 軸列 '{x_column}' 必須是數值類型。")
+            if not pd.api.types.is_numeric_dtype(agg_df[x_column]): raise ValueError(f"直方圖的 X 軸列 '{x_column}' 必須是數值類型。")
             fig = px.histogram(agg_df, x=x_column, color=group_col, **fig_params); fig.update_layout(yaxis_title="計數")
         elif chart_type == "箱型圖":
-            # Y 軸必須是數值
-            if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
-                 raise ValueError(f"箱型圖的 Y 軸列 '{y_col_agg}' 必須是數值類型。")
-            fig = px.box(agg_df, x=group_col, y=y_col_agg, color=group_col, **fig_params)
-            if not group_col: fig = px.box(agg_df, y=y_col_agg, **fig_params) # 無分組
+            if not y_column: raise ValueError("箱型圖需要選擇 Y 軸列。")
+            if not pd.api.types.is_numeric_dtype(agg_df[y_column]): raise ValueError(f"箱型圖的 Y 軸列 '{y_column}' 必須是數值類型。")
+            fig = px.box(agg_df, x=group_col, y=y_column, color=group_col, **fig_params)
+            if not group_col: fig = px.box(agg_df, y=y_column, **fig_params)
         elif chart_type == "小提琴圖":
-            if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
-                 raise ValueError(f"小提琴圖的 Y 軸列 '{y_col_agg}' 必須是數值類型。")
-            fig = px.violin(agg_df, x=group_col, y=y_col_agg, color=group_col, box=True, points="all", **fig_params)
-            if not group_col: fig = px.violin(agg_df, y=y_col_agg, box=True, points="all", **fig_params)
+            if not y_column: raise ValueError("小提琴圖需要選擇 Y 軸列。")
+            if not pd.api.types.is_numeric_dtype(agg_df[y_column]): raise ValueError(f"小提琴圖的 Y 軸列 '{y_column}' 必須是數值類型。")
+            fig = px.violin(agg_df, x=group_col, y=y_column, color=group_col, box=True, points="all", **fig_params)
+            if not group_col: fig = px.violin(agg_df, y=y_column, box=True, points="all", **fig_params)
         elif chart_type == "熱力圖":
-            if not group_col: raise ValueError("熱力圖需要 X 軸、Y 軸 和一個 分組列 (用於顏色或數值)。")
+            if not effective_y: raise ValueError("熱力圖需要 Y 軸數值或 '計數' 聚合。")
+            if not group_col: raise ValueError("熱力圖需要 X 軸、Y 軸 和一個 分組列。")
             try:
-                # 確保值列是數值
-                if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
-                     raise ValueError(f"熱力圖的值列 '{y_col_agg}' 必須是數值類型。")
-                # 創建數據透視表
-                pivot_df = pd.pivot_table(agg_df, values=y_col_agg, index=group_col, columns=x_column, aggfunc=agg_function_map(agg_func_name) if agg_func_name != "計數" else 'size')
-                fig = px.imshow(pivot_df, color_continuous_scale=px.colors.sequential.Viridis, aspect="auto", text_auto=True, **fig_params); # text_auto 顯示數值
+                if not pd.api.types.is_numeric_dtype(agg_df[effective_y]): raise ValueError(f"熱力圖的值列 '{effective_y}' 必須是數值類型。")
+                pivot_df = pd.pivot_table(agg_df, values=effective_y, index=group_col, columns=x_column, aggfunc=agg_function_map(agg_func_name) if agg_func_name != "計數" else 'size')
+                fig = px.imshow(pivot_df, color_continuous_scale=px.colors.sequential.Viridis, aspect="auto", text_auto=True, **fig_params);
                 fig.update_layout(coloraxis_showscale=True)
             except Exception as pivot_e: raise ValueError(f"創建熱力圖的數據透視表時出錯: {pivot_e}")
         elif chart_type == "樹狀圖":
+             if not effective_y: raise ValueError("樹狀圖需要 Y 軸數值或 '計數' 聚合。")
              path = [group_col, x_column] if group_col else [x_column]
-             # 確保值列是數值
-             if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
-                  raise ValueError(f"樹狀圖的值列 '{y_col_agg}' 必須是數值類型。")
-             fig = px.treemap(agg_df, path=path, values=y_col_agg, color=group_col if group_col else x_column, **fig_params)
+             if not pd.api.types.is_numeric_dtype(agg_df[effective_y]): raise ValueError(f"樹狀圖的值列 '{effective_y}' 必須是數值類型。")
+             fig = px.treemap(agg_df, path=path, values=effective_y, color=group_col if group_col else x_column, **fig_params)
         elif chart_type == "雷達圖":
-            fig = go.Figure() # 使用 go.Figure 創建
-            # 確保 R 值是數值
-            if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
-                 raise ValueError(f"雷達圖的徑向值列 '{y_col_agg}' 必須是數值類型。")
-            if not group_col: # 單系列
-                 theta = agg_df[x_column].tolist(); r = agg_df[y_col_agg].tolist(); theta.append(theta[0]); r.append(r[0]) # 封閉圖形
-                 fig.add_trace(go.Scatterpolar(r=r, theta=theta, fill='toself', name=y_col_agg, line_color=colors[0]))
-            else: # 多系列
+            if not effective_y: raise ValueError("雷達圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = go.Figure()
+            if not pd.api.types.is_numeric_dtype(agg_df[effective_y]): raise ValueError(f"雷達圖的徑向值列 '{effective_y}' 必須是數值類型。")
+            if not group_col:
+                 theta = agg_df[x_column].tolist(); r = agg_df[effective_y].tolist(); theta.append(theta[0]); r.append(r[0])
+                 fig.add_trace(go.Scatterpolar(r=r, theta=theta, fill='toself', name=effective_y if effective_y != '__count__' else '計數', line_color=colors[0]))
+            else:
                  categories = agg_df[group_col].unique()
                  for i, category in enumerate(categories):
-                     subset = agg_df[agg_df[group_col] == category]; theta = subset[x_column].tolist(); r = subset[y_col_agg].tolist(); theta.append(theta[0]); r.append(r[0])
+                     subset = agg_df[agg_df[group_col] == category]; theta = subset[x_column].tolist(); r = subset[effective_y].tolist(); theta.append(theta[0]); r.append(r[0])
                      color = custom_colors_dict.get(str(category), colors[i % len(colors)])
                      fig.add_trace(go.Scatterpolar(r=r, theta=theta, fill='toself', name=str(category), line_color=color))
             fig.update_layout(polar=dict(radialaxis=dict(visible=True)), showlegend=show_legend, title=title, width=width, height=height)
         elif chart_type == "漏斗圖":
-            # 確保值列是數值
-            if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
-                 raise ValueError(f"漏斗圖的值列 '{y_col_agg}' 必須是數值類型。")
-            sorted_df = agg_df.sort_values(by=y_col_agg, ascending=False)
-            fig = px.funnel(sorted_df, x=y_col_agg, y=x_column, color=group_col, **fig_params)
+            if not effective_y: raise ValueError("漏斗圖需要 Y 軸數值或 '計數' 聚合。")
+            if not pd.api.types.is_numeric_dtype(agg_df[effective_y]): raise ValueError(f"漏斗圖的值列 '{effective_y}' 必須是數值類型。")
+            sorted_df = agg_df.sort_values(by=effective_y, ascending=False)
+            fig = px.funnel(sorted_df, x=effective_y, y=x_column, color=group_col, **fig_params)
         elif chart_type == "極座標圖":
-            # 確保 R 值是數值
-            if not pd.api.types.is_numeric_dtype(agg_df[y_col_agg]):
-                 raise ValueError(f"極座標圖的徑向值列 '{y_col_agg}' 必須是數值類型。")
-            fig = px.bar_polar(agg_df, r=y_col_agg, theta=x_column, color=group_col if group_col else x_column, **fig_params)
+            if not effective_y: raise ValueError("極座標圖需要 Y 軸數值或 '計數' 聚合。")
+            if not pd.api.types.is_numeric_dtype(agg_df[effective_y]): raise ValueError(f"極座標圖的徑向值列 '{effective_y}' 必須是數值類型。")
+            fig = px.bar_polar(agg_df, r=effective_y, theta=x_column, color=group_col if group_col else x_column, **fig_params)
         elif chart_type == "甘特圖":
              # 甘特圖使用原始數據，需要開始和結束列
-             if not y_column or not group_col: raise ValueError("甘特圖需要指定 開始列 (Y軸) 和 結束列 (分組列)。")
+             start_col_gantt = y_column # Y 軸被用作開始列
+             end_col_gantt = group_col # 分組列被用作結束列
+             task_col_gantt = x_column # X 軸被用作任務列
+             if not start_col_gantt or not end_col_gantt: raise ValueError("甘特圖需要指定 開始列 (Y軸) 和 結束列 (分組列)。")
              try:
                  df_gantt = df.copy() # 使用原始 df
-                 start_col, end_col = y_column, group_col # 根據用戶選擇
-                 task_col = x_column # 任務列
-                 # 檢查列是否存在
-                 if start_col not in df_gantt.columns: raise ValueError(f"開始列 '{start_col}' 不在數據中。")
-                 if end_col not in df_gantt.columns: raise ValueError(f"結束列 '{end_col}' 不在數據中。")
-                 if task_col not in df_gantt.columns: raise ValueError(f"任務列 '{task_col}' 不在數據中。")
-
-                 # 嘗試轉換為日期時間
-                 df_gantt['_start_'] = pd.to_datetime(df_gantt[start_col], errors='coerce')
-                 df_gantt['_end_'] = pd.to_datetime(df_gantt[end_col], errors='coerce')
-                 # 檢查是否有無效日期
-                 if df_gantt['_start_'].isnull().any(): raise ValueError(f"開始列 '{start_col}' 包含無效或無法解析的日期時間格式。")
-                 if df_gantt['_end_'].isnull().any(): raise ValueError(f"結束列 '{end_col}' 包含無效或無法解析的日期時間格式。")
-
-                 # 繪製甘特圖
-                 fig = px.timeline(df_gantt, x_start='_start_', x_end='_end_', y=task_col,
-                                   color=size_col if size_col else None, # 可以用大小列來區分顏色
-                                   title=title, color_discrete_sequence=colors, width=width, height=height)
+                 if start_col_gantt not in df_gantt.columns: raise ValueError(f"開始列 '{start_col_gantt}' 不在數據中。")
+                 if end_col_gantt not in df_gantt.columns: raise ValueError(f"結束列 '{end_col_gantt}' 不在數據中。")
+                 if task_col_gantt not in df_gantt.columns: raise ValueError(f"任務列 '{task_col_gantt}' 不在數據中。")
+                 df_gantt['_start_'] = pd.to_datetime(df_gantt[start_col_gantt], errors='coerce')
+                 df_gantt['_end_'] = pd.to_datetime(df_gantt[end_col_gantt], errors='coerce')
+                 if df_gantt['_start_'].isnull().any(): raise ValueError(f"開始列 '{start_col_gantt}' 包含無效或無法解析的日期時間格式。")
+                 if df_gantt['_end_'].isnull().any(): raise ValueError(f"結束列 '{end_col_gantt}' 包含無效或無法解析的日期時間格式。")
+                 fig = px.timeline(df_gantt, x_start='_start_', x_end='_end_', y=task_col_gantt, color=size_col if size_col else None, title=title, color_discrete_sequence=colors, width=width, height=height)
                  fig.update_layout(xaxis_type="date")
              except Exception as gantt_e: raise ValueError(f"創建甘特圖時出錯: {gantt_e}")
         else:
             print(f"警告：未知的圖表類型 '{chart_type}'，使用長條圖代替。")
-            fig = px.bar(agg_df, x=x_column, y=y_col_agg, color=group_col, **fig_params)
+            if not effective_y: raise ValueError("長條圖需要 Y 軸數值或 '計數' 聚合。")
+            fig = px.bar(agg_df, x=x_column, y=effective_y, color=group_col, **fig_params)
         # --- (繪圖邏輯結束) ---
 
+
         # --- 6. 應用圖案 (如果支持) ---
         if patterns:
             try:
@@ -1720,7 +1768,7 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
                      dash_map = {"/": "dash", "\\": "dot", "x": "dashdot", "-": "longdash"}
                      for i, trace in enumerate(fig.data):
                          pattern_index = i % len(patterns); dash = dash_map.get(patterns[pattern_index])
-                         if dash: trace.line.dash = dash; trace.fill = 'tonexty' if 'stackgroup' in trace else 'tozeroy'
+                         if dash: trace.line.dash = dash; trace.fill = 'tonexty' if hasattr(trace, 'stackgroup') and trace.stackgroup else 'tozeroy' # 修正 stackgroup 判斷
             except Exception as pattern_e: print(f"應用圖案時出錯: {pattern_e}")
 
         # --- 7. 更新佈局 ---
@@ -1736,6 +1784,7 @@ def create_plot(df, chart_type, x_column, y_column, group_column=None, size_colu
         if chart_type in ["圓餅圖", "環形圖", "漏斗圖", "樹狀圖"]: fig.update_layout(xaxis_title=None, yaxis_title=None)
         elif chart_type == "水平長條圖": fig.update_layout(xaxis_title=final_y_label, yaxis_title=x_column)
         elif chart_type == "直方圖": fig.update_layout(xaxis_title=x_column, yaxis_title='計數')
+        elif chart_type == "甘特圖": fig.update_layout(xaxis_title="時間", yaxis_title=x_column) # 甘特圖軸標籤
         else: fig.update_layout(xaxis_title=x_column, yaxis_title=final_y_label)
 
     except ValueError as ve:
@@ -1819,19 +1868,19 @@ CUSTOM_CSS = """
 /* --- 區塊標題 --- */
 .section-title { font-size: 1.4em; font-weight: 600; color: #343a40; border-bottom: 3px solid #7367f0; padding-bottom: 8px; margin-top: 25px; margin-bottom: 20px; }
 /* --- 卡片樣式 --- */
-.card { background-color: white; border-radius: 10px; padding: 20px; /* 稍微減少 padding */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); margin-bottom: 20px; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; border: 1px solid #e0e0e0; }
+.card { background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); margin-bottom: 20px; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; border: 1px solid #e0e0e0; }
 .card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); }
 /* --- 按鈕樣式 --- */
-.primary-button { background: linear-gradient(to right, #667eea, #764ba2) !important; border: none !important; color: white !important; font-weight: 600 !important; padding: 10px 20px !important; /* 調整 padding */ border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
+.primary-button { background: linear-gradient(to right, #667eea, #764ba2) !important; border: none !important; color: white !important; font-weight: 600 !important; padding: 10px 20px !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
 .primary-button:hover { background: linear-gradient(to right, #764ba2, #667eea) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; }
-.secondary-button { background: linear-gradient(to right, #89f7fe, #66a6ff) !important; border: none !important; color: #333 !important; font-weight: 600 !important; padding: 8px 16px !important; /* 調整 padding */ border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
+.secondary-button { background: linear-gradient(to right, #89f7fe, #66a6ff) !important; border: none !important; color: #333 !important; font-weight: 600 !important; padding: 8px 16px !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
 .secondary-button:hover { background: linear-gradient(to right, #66a6ff, #89f7fe) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important; }
 /* --- 下拉選單修正 (Dropdown Fix) --- */
 /* 移除自定義下拉選單樣式，使用 Gradio 預設 */
 /* --- 其他 UI 元素 --- */
 .tips-box { background-color: #e7f3ff; border-left: 5px solid #66a6ff; padding: 15px 20px; border-radius: 8px; margin: 20px 0; font-size: 0.95em; color: #333; }
 .tips-box code { background-color: #d1e7fd; padding: 2px 5px; border-radius: 4px; font-family: 'Courier New', Courier, monospace; }
-.chart-previewer { border: 2px dashed #ced4da; border-radius: 10px; padding: 15px; /* 減少 padding */ min-height: 400px; /* 調整高度 */ display: flex; justify-content: center; align-items: center; background-color: #ffffff; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); margin-top: 10px; /* 減少 margin */ }
+.chart-previewer { border: 2px dashed #ced4da; border-radius: 10px; padding: 15px; min-height: 400px; display: flex; justify-content: center; align-items: center; background-color: #ffffff; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); margin-top: 10px; }
 .gradio-dataframe table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
 .gradio-dataframe th, .gradio-dataframe td { border: 1px solid #dee2e6; padding: 8px 10px; text-align: left; }
 .gradio-dataframe th { background-color: #f8f9fa; font-weight: 600; }
@@ -1841,26 +1890,30 @@ CUSTOM_CSS = """
 .gradio-tabs .tab-nav button.selected { background-color: #667eea !important; color: white !important; border-bottom: none !important; }
 .gradio-slider label { margin-bottom: 5px !important; }
 .gradio-slider input[type="range"] { cursor: pointer !important; }
-.gradio-checkboxgroup label, .gradio-radio label { padding: 8px 0 !important; }
+/* Radio Button 樣式調整 */
+.gradio-radio fieldset { display: flex; flex-wrap: wrap; gap: 5px 15px; } /* 嘗試讓選項水平排列並換行 */
+.gradio-radio label { margin-bottom: 0 !important; padding: 5px 0 !important; } /* 調整標籤間距 */
+.gradio-radio input[type="radio"] { margin-right: 5px !important; }
+
 .gradio-textbox textarea, .gradio-textbox input { border-radius: 6px !important; border: 1px solid #ced4da !important; padding: 10px !important; }
 .gradio-textbox textarea:focus, .gradio-textbox input:focus { border-color: #80bdff !important; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important; }
 .gradio-file .hidden-upload, .gradio-file .download-button { border-radius: 6px !important; }
 .gradio-file .upload-button { border-radius: 6px !important; background: #6c757d !important; color: white !important; padding: 8px 15px !important; }
 .gradio-file .upload-button:hover { background: #5a6268 !important; }
-/* Accordion 樣式微調 */
-.gradio-accordion > .label { font-weight: 600 !important; font-size: 1.1em !important; padding: 10px 0 !important; }
+/* Accordion 樣式微調 (如果重新啟用) */
+/* .gradio-accordion > .label { font-weight: 600 !important; font-size: 1.1em !important; padding: 10px 0 !important; } */
 """
 
 # =========================================
 # == Gradio UI 介面定義 (Gradio UI Definition) ==
 # =========================================
-with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V4", theme=gr.themes.Soft()) as demo:
 
     # --- 應用程式標頭 ---
     gr.HTML("""
     <div class="app-header">
-        <h1 class="app-title">📊 進階數據可視化工具 V3</h1>
-        <p class="app-subtitle">上傳或貼上數據，輕鬆創建和比較多種專業圖表 (左右佈局)</p>
+        <h1 class="app-title">📊 進階數據可視化工具 V4</h1>
+        <p class="app-subtitle">上傳或貼上數據，輕鬆創建和比較多種專業圖表 (改用 Radio 選項)</p>
     </div>
     """)
 
@@ -1893,14 +1946,14 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.
                     gr.HTML('<div class="section-title">2. 數據預覽與導出</div>')
                     with gr.Group(elem_classes=["card"]):
                         gr.Markdown("下方將顯示載入或解析後的數據預覽。")
-                        data_preview = gr.Dataframe(label="數據表格預覽", interactive=False) # 移除 height
+                        data_preview = gr.Dataframe(label="數據表格預覽", interactive=False)
                         with gr.Row():
-                            export_format = gr.Dropdown(["CSV", "Excel", "JSON"], label="選擇導出格式", value="CSV")
+                            export_format = gr.Radio(EXPORT_FORMATS_DATA, label="選擇導出格式", value="CSV") # 改用 Radio
                             export_button = gr.Button("⬇️ 導出預覽數據", elem_classes=["secondary-button"])
                         export_result = gr.File(label="導出文件下載", interactive=False)
                         export_status = gr.Textbox(label="導出狀態", lines=1, interactive=False)
 
-        # --- 圖表創建頁籤 (左右佈局) ---
+        # --- 圖表創建頁籤 (左右佈局, 移除 Accordion, 使用 Radio) ---
         with gr.TabItem("📈 圖表創建與比較", id=1):
             gr.HTML('<div class="section-title">創建與比較圖表 (左右並列)</div>')
             gr.Markdown("在這裡，您可以分別設置並生成兩張圖表，方便進行對比分析。")
@@ -1910,39 +1963,37 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.
                 with gr.Column(scale=1):
                     gr.Markdown("### 📊 圖表一")
                     with gr.Group(elem_classes=["card"]): # 將所有設定放在一個卡片中
-                        with gr.Accordion("基本設置", open=True): # 使用 Accordion
-                            chart_type_1 = gr.Dropdown(CHART_TYPES, label="圖表類型", value="長條圖", interactive=True)
-                            recommend_button_1 = gr.Button("🧠 智能推薦", elem_classes=["secondary-button"], size="sm") # 縮小按鈕
-                            chart_title_1 = gr.Textbox(label="圖表標題", placeholder="圖表一標題")
-                            agg_function_1 = gr.Dropdown(AGGREGATION_FUNCTIONS, label="聚合函數", value="計數", info="選擇如何彙總 Y 軸數據")
-
-                        with gr.Accordion("數據映射", open=True): # 使用 Accordion
-                            x_column_1 = gr.Dropdown(["-- 無數據 --"], label="X軸 / 類別", info="選擇圖表主要分類或 X 軸")
-                            y_column_1 = gr.Dropdown(["-- 無數據 --"], label="Y軸 / 數值", info="選擇圖表數值或 Y 軸 (計數時可忽略)")
-                            group_column_1 = gr.Dropdown(["無"], label="分組列", info="用於生成多系列或堆疊")
-                            size_column_1 = gr.Dropdown(["無"], label="大小列", info="用於氣泡圖等控制點的大小")
-
-                        with gr.Accordion("顯示選項", open=False): # 預設關閉
-                            chart_width_1 = gr.Slider(300, 1600, 700, step=50, label="寬度 (px)")
-                            chart_height_1 = gr.Slider(300, 1000, 450, step=50, label="高度 (px)")
-                            with gr.Row():
-                                show_grid_1 = gr.Checkbox(label="顯示網格", value=True)
-                                show_legend_1 = gr.Checkbox(label="顯示圖例", value=True)
-                            color_scheme_1 = gr.Dropdown(list(COLOR_SCHEMES.keys()), label="顏色方案", value="預設 (Plotly)")
-                            gr.HTML('<div style="margin-top: 10px;"><b>顏色參考</b> (點擊複製)</div>')
-                            gr.HTML(generate_color_cards(), elem_id="color_display_1")
-
-                        with gr.Accordion("圖案與自定義顏色", open=False): # 預設關閉
-                             with gr.Row():
-                                 pattern1_1 = gr.Dropdown(PATTERN_TYPES, label="圖案1", value="無")
-                                 pattern2_1 = gr.Dropdown(PATTERN_TYPES, label="圖案2", value="無")
-                                 pattern3_1 = gr.Dropdown(PATTERN_TYPES, label="圖案3", value="無")
-                             color_customization_1 = gr.Textbox(label="自定義顏色", placeholder="類別A:#FF5733, 類別B:#33CFFF", info="格式: 類別名:十六進制顏色代碼, ...", elem_classes=["color-customization-input"])
-
-                    # 圖表一：操作按鈕 (放在設定下方，預覽上方)
+                        gr.Markdown("**基本設置**")
+                        chart_type_1 = gr.Radio(CHART_TYPES, label="圖表類型", value="長條圖", interactive=True) # 改用 Radio
+                        recommend_button_1 = gr.Button("🧠 智能推薦", elem_classes=["secondary-button"], size="sm")
+                        chart_title_1 = gr.Textbox(label="圖表標題", placeholder="圖表一標題")
+                        agg_function_1 = gr.Radio(AGGREGATION_FUNCTIONS, label="聚合函數", value="計數") # 改用 Radio
+
+                        gr.Markdown("**數據映射**")
+                        x_column_1 = gr.Dropdown(["-- 無數據 --"], label="X軸 / 類別", info="選擇圖表主要分類或 X 軸") # 保留 Dropdown
+                        y_column_1 = gr.Dropdown(["-- 無數據 --"], label="Y軸 / 數值", info="選擇圖表數值或 Y 軸 (計數時可忽略)") # 保留 Dropdown
+                        group_column_1 = gr.Dropdown(["無"], label="分組列", info="用於生成多系列或堆疊") # 保留 Dropdown
+                        size_column_1 = gr.Dropdown(["無"], label="大小列", info="用於氣泡圖等控制點的大小") # 保留 Dropdown
+
+                        gr.Markdown("**顯示選項**")
+                        chart_width_1 = gr.Slider(300, 1600, 700, step=50, label="寬度 (px)")
+                        chart_height_1 = gr.Slider(300, 1000, 450, step=50, label="高度 (px)")
+                        show_grid_1 = gr.Radio(YES_NO_CHOICES, label="顯示網格", value="是") # 改用 Radio
+                        show_legend_1 = gr.Radio(YES_NO_CHOICES, label="顯示圖例", value="是") # 改用 Radio
+                        color_scheme_1 = gr.Dropdown(list(COLOR_SCHEMES.keys()), label="顏色方案", value="預設 (Plotly)") # 保留 Dropdown
+                        gr.HTML('<div style="margin-top: 10px;"><b>顏色參考</b> (點擊複製)</div>')
+                        gr.HTML(generate_color_cards(), elem_id="color_display_1")
+
+                        gr.Markdown("**圖案與自定義顏色**")
+                        pattern1_1 = gr.Radio(PATTERN_TYPES, label="圖案1", value="無") # 改用 Radio
+                        pattern2_1 = gr.Radio(PATTERN_TYPES, label="圖案2", value="無") # 改用 Radio
+                        pattern3_1 = gr.Radio(PATTERN_TYPES, label="圖案3", value="無") # 改用 Radio
+                        color_customization_1 = gr.Textbox(label="自定義顏色", placeholder="類別A:#FF5733, 類別B:#33CFFF", info="格式: 類別名:十六進制顏色代碼, ...", elem_classes=["color-customization-input"])
+
+                    # 圖表一：操作按鈕
                     with gr.Row():
                         update_button_1 = gr.Button("🔄 更新圖表一", variant="primary", elem_classes=["primary-button"])
-                        export_img_format_1 = gr.Dropdown(["PNG", "SVG", "PDF", "JPEG"], label="導出格式", value="PNG", scale=1)
+                        export_img_format_1 = gr.Radio(EXPORT_FORMATS_IMG, label="導出格式", value="PNG", scale=1) # 改用 Radio
                         download_button_1 = gr.Button("💾 導出圖表一", elem_classes=["secondary-button"], scale=1)
                     export_chart_1 = gr.File(label="圖表一文件下載", interactive=False)
                     export_chart_status_1 = gr.Textbox(label="導出狀態", lines=1, interactive=False)
@@ -1955,39 +2006,36 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.
                 # --- 圖表二 (右側 Column) ---
                 with gr.Column(scale=1):
                     gr.Markdown("### 📊 圖表二")
-                    with gr.Group(elem_classes=["card"]): # 將所有設定放在一個卡片中
-                        with gr.Accordion("基本設置", open=True): # 使用 Accordion
-                            chart_type_2 = gr.Dropdown(CHART_TYPES, label="圖表類型", value="折線圖", interactive=True)
-                            # 智能推薦只放在圖表一
-                            chart_title_2 = gr.Textbox(label="圖表標題", placeholder="圖表二標題")
-                            agg_function_2 = gr.Dropdown(AGGREGATION_FUNCTIONS, label="聚合函數", value="平均值", info="選擇如何彙總 Y 軸數據")
-
-                        with gr.Accordion("數據映射", open=True): # 使用 Accordion
-                            x_column_2 = gr.Dropdown(["-- 無數據 --"], label="X軸 / 類別", info="選擇圖表主要分類或 X 軸")
-                            y_column_2 = gr.Dropdown(["-- 無數據 --"], label="Y軸 / 數值", info="選擇圖表數值或 Y 軸 (計數時可忽略)")
-                            group_column_2 = gr.Dropdown(["無"], label="分組列", info="用於生成多系列或堆疊")
-                            size_column_2 = gr.Dropdown(["無"], label="大小列", info="用於氣泡圖等控制點的大小")
-
-                        with gr.Accordion("顯示選項", open=False): # 預設關閉
-                            chart_width_2 = gr.Slider(300, 1600, 700, step=50, label="寬度 (px)")
-                            chart_height_2 = gr.Slider(300, 1000, 450, step=50, label="高度 (px)")
-                            with gr.Row():
-                                show_grid_2 = gr.Checkbox(label="顯示網格", value=True)
-                                show_legend_2 = gr.Checkbox(label="顯示圖例", value=True)
-                            color_scheme_2 = gr.Dropdown(list(COLOR_SCHEMES.keys()), label="顏色方案", value="分類 - Set2")
-                            # 顏色參考共用
-
-                        with gr.Accordion("圖案與自定義顏色", open=False): # 預設關閉
-                             with gr.Row():
-                                 pattern1_2 = gr.Dropdown(PATTERN_TYPES, label="圖案1", value="無")
-                                 pattern2_2 = gr.Dropdown(PATTERN_TYPES, label="圖案2", value="無")
-                                 pattern3_2 = gr.Dropdown(PATTERN_TYPES, label="圖案3", value="無")
-                             color_customization_2 = gr.Textbox(label="自定義顏色", placeholder="類別C:#FFC300, 類別D:#C70039", info="格式: 類別名:十六進制顏色代碼, ...", elem_classes=["color-customization-input"])
+                    with gr.Group(elem_classes=["card"]):
+                        gr.Markdown("**基本設置**")
+                        chart_type_2 = gr.Radio(CHART_TYPES, label="圖表類型", value="折線圖", interactive=True) # 改用 Radio
+                        chart_title_2 = gr.Textbox(label="圖表標題", placeholder="圖表二標題")
+                        agg_function_2 = gr.Radio(AGGREGATION_FUNCTIONS, label="聚合函數", value="平均值") # 改用 Radio
+
+                        gr.Markdown("**數據映射**")
+                        x_column_2 = gr.Dropdown(["-- 無數據 --"], label="X軸 / 類別", info="選擇圖表主要分類或 X 軸") # 保留 Dropdown
+                        y_column_2 = gr.Dropdown(["-- 無數據 --"], label="Y軸 / 數值", info="選擇圖表數值或 Y 軸 (計數時可忽略)") # 保留 Dropdown
+                        group_column_2 = gr.Dropdown(["無"], label="分組列", info="用於生成多系列或堆��") # 保留 Dropdown
+                        size_column_2 = gr.Dropdown(["無"], label="大小列", info="用於氣泡圖等控制點的大小") # 保留 Dropdown
+
+                        gr.Markdown("**顯示選項**")
+                        chart_width_2 = gr.Slider(300, 1600, 700, step=50, label="寬度 (px)")
+                        chart_height_2 = gr.Slider(300, 1000, 450, step=50, label="高度 (px)")
+                        show_grid_2 = gr.Radio(YES_NO_CHOICES, label="顯示網格", value="是") # 改用 Radio
+                        show_legend_2 = gr.Radio(YES_NO_CHOICES, label="顯示圖例", value="是") # 改用 Radio
+                        color_scheme_2 = gr.Dropdown(list(COLOR_SCHEMES.keys()), label="顏色方案", value="分類 - Set2") # 保留 Dropdown
+                        # 顏色參考共用
+
+                        gr.Markdown("**圖案與自定義顏色**")
+                        pattern1_2 = gr.Radio(PATTERN_TYPES, label="圖案1", value="無") # 改用 Radio
+                        pattern2_2 = gr.Radio(PATTERN_TYPES, label="圖案2", value="無") # 改用 Radio
+                        pattern3_2 = gr.Radio(PATTERN_TYPES, label="圖案3", value="無") # 改用 Radio
+                        color_customization_2 = gr.Textbox(label="自定義顏色", placeholder="類別C:#FFC300, 類別D:#C70039", info="格式: 類別名:十六進制顏色代碼, ...", elem_classes=["color-customization-input"])
 
                     # 圖表二：操作按鈕
                     with gr.Row():
                         update_button_2 = gr.Button("🔄 更新圖表二", variant="primary", elem_classes=["primary-button"])
-                        export_img_format_2 = gr.Dropdown(["PNG", "SVG", "PDF", "JPEG"], label="導出格式", value="PNG", scale=1)
+                        export_img_format_2 = gr.Radio(EXPORT_FORMATS_IMG, label="導出格式", value="PNG", scale=1) # 改用 Radio
                         download_button_2 = gr.Button("💾 導出圖表二", elem_classes=["secondary-button"], scale=1)
                     export_chart_2 = gr.File(label="圖表二文件下載", interactive=False)
                     export_chart_status_2 = gr.Textbox(label="導出狀態", lines=1, interactive=False)
@@ -1999,17 +2047,17 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.
 
         # --- 使用說明頁籤 ---
         with gr.TabItem("❓ 使用說明", id=2):
-             with gr.Group(elem_classes=["card"]): # 使用說明也放在卡片裡
+             with gr.Group(elem_classes=["card"]):
                 gr.HTML("""
                 <div class="section-title">使用說明</div>
                 <h3>數據輸入</h3>
                 <ul><li>點擊 "上傳 CSV / Excel 文件" 按鈕選擇本地文件，或在文本框中直接貼上數據。</li><li>支持逗號 (<code>,</code>)、製表符 (<code>Tab</code>) 或空格 (<code> </code>) 分隔的數據。</li><li>第一行通常被視為欄位名稱（表頭）。</li><li>數據載入或解析成功後，會在右側顯示預覽。</li><li>您可以使用 "導出預覽數據" 功能將處理後的數據保存為 CSV、Excel 或 JSON 格式。</li></ul>
                 <h3>圖表創建與比較</h3>
-                <ul><li>此頁面提供左右兩個獨立的圖表設置和預覽區域（圖表一、圖表二）。</li><li><strong>智能推薦：</strong>點擊圖表一的 "智能推薦" 按鈕，系統會根據數據結構嘗試為圖表一推薦合適的設置。</li><li><strong>圖表類型：</strong>選擇您想創建的圖表樣式。</li><li><strong>聚合函數：</strong>決定如何匯總 Y 軸數據。
+                <ul><li>此頁面提供左右兩個獨立的圖表設置和預覽區域（圖表一、圖表二）。</li><li><strong>智能推薦：</strong>點擊圖表一的 "智能推薦" 按鈕，系統會根據數據結構嘗試為圖表一推薦合適的設置。</li><li><strong>圖表類型：</strong>選擇您想創建的圖表樣式 (使用點選按鈕)。</li><li><strong>聚合函數：</strong>決定如何匯總 Y 軸數據 (使用點選按鈕)。
                     <ul><li><strong style="color: #7367f0;">【重要】單欄計數：</strong>若要統計某一欄位中各個項目出現的次數（例如，統計不同產品的銷售筆數），請在 <strong>X軸/類別</strong> 選擇該欄位，並將 <strong>聚合函數</strong> 設為 <strong>計數</strong>，此時 <strong>無需選擇 Y軸/數值</strong>。然後選擇「長條圖」或「圓餅圖」。</li></ul>
-                </li><li><strong>數據映射：</strong><ul><li><strong>X軸/類別：</strong>圖表的主要分類軸。</li><li><strong>Y軸/數值：</strong>圖表的數值軸。若聚合函數為 "計數"，此項可忽略。</li><li><strong>分組列：</strong>用於創建堆疊、分組或多系列圖表。</li><li><strong>大小列：</strong>主要用於氣泡圖，控制點的大小。</li></ul></li><li><strong>顯示選項：</strong>調整圖表的外觀，如寬度、高度、顏色方案、���否顯示網格和圖例。</li><li><strong>圖案與自定義顏色：</strong><ul><li>為圖表系列添加不同的填充圖案（適用於部分圖表類型，如條形圖）。</li><li>通過 "類別名:顏色代碼" 的格式為特定類別指定顏色 (例如 <code>正面:#2ca02c, 負面:#d62728</code>)。</li></ul></li><li>點擊 "更新圖表" 按鈕生成或刷新對應的圖表預覽。</li><li>使用 "導出圖表" 功能將生成的圖表保存為圖片文件。</li></ul>
+                </li><li><strong>數據映射 (下拉選單)：</strong><ul><li><strong>X軸/類別：</strong>圖表的主要分類軸。</li><li><strong>Y軸/數值：</strong>圖表的數值軸。若聚合函數為 "計數"，此項可忽略。</li><li><strong>分組列：</strong>用於創建堆疊、分組或多系列圖表。</li><li><strong>大小列：</strong>主要用於氣泡圖，控制點的大小。</li></ul></li><li><strong>顯示選項：</strong>調整圖表的外觀，如寬度、高度、顏色方案、是否顯示網格和圖例。</li><li><strong>圖案與自定義顏色：</strong><ul><li>為圖表系列添加不同的填充圖案（適用於部分圖表類型，如條形圖）。</li><li>通過 "類別名:顏色代碼" 的格式為特定類別指定顏色 (例如 <code>正面:#2ca02c, 負面:#d62728</code>)。</li></ul></li><li>點擊 "更新圖表" 按鈕生成或刷新對應的圖表預覽。</li><li>使用 "導出圖表" 功能將生成的圖表保存為圖片文件。</li></ul>
                 <h3>提示</h3>
-                <ul><li>如果圖表無法顯示或出現錯誤，請檢查數據格式、列選擇以及聚合函數是否合理。</li><li>確保數值列確實包含數字，日期列包含有效的日期格式。</li><li>部分圖表類型對數據結構有特定要求（例如，熱力圖、甘特圖）。</li><li>如果下拉選單仍然有問題，嘗試刷新頁面或在不同的瀏覽器中打開。</li></ul>
+                <ul><li>如果圖表無法顯示或出現錯誤，請檢查數據格式、列選擇以及聚合函數是否合理。</li><li>確保數值列確實包含數字，日期列包含有效的日期格式。</li><li>部分圖表類型對數據結構有特定要求（例如，熱力圖、甘特圖）。</li><li>如果欄位選擇的下拉選單仍然有問題，可能是由於數據欄位過多或 Gradio 的限制，嘗試簡化數據或在本地環境運行。</li></ul>
                 """)
 
     # =========================================
@@ -2019,21 +2067,80 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.
     # --- 數據載入與更新 ---
     def load_data_and_update_ui(df, status_msg):
         preview_df = df if df is not None else pd.DataFrame()
+        # 更新列下拉選單
         col_updates = update_columns(df)
         if col_updates is None or len(col_updates) != 4:
              print("警告: update_columns 未返回預期的 4 個組件更新。")
-             return [df, status_msg, preview_df] + [gr.update()] * 8
-        return [df, status_msg, preview_df] + list(col_updates) * 2 # 更新兩組下拉列表
-
-    upload_button.click(process_upload, inputs=[file_upload], outputs=[data_state, upload_status]).then(
-        load_data_and_update_ui, inputs=[data_state, upload_status],
-        outputs=[data_state, upload_status, data_preview, x_column_1, y_column_1, group_column_1, size_column_1, x_column_2, y_column_2, group_column_2, size_column_2]
+             # 返回空更新，避免錯誤
+             updates = [df, status_msg, preview_df] + [gr.update()] * 8
+             return updates
+
+        # 準備所有更新
+        updates = [df, status_msg, preview_df] + list(col_updates) * 2
+
+        # 準備觸發圖表一初始繪圖的輸入
+        # 使用更新後的下拉列表的值（如果有效）或預設值
+        x_col_val = col_updates[0].value if col_updates[0].value else None
+        y_col_val = col_updates[1].value if col_updates[1].value else None
+        # 獲取圖表一的其他預設值
+        chart_type_val = "長條圖" # 來自 chart_type_1 的預設值
+        agg_func_val = "計數"   # 來自 agg_function_1 的預設值
+
+        # 只有在數據有效且 X 軸有效時才嘗試繪圖
+        initial_plot = go.Figure() # 默認空圖
+        if df is not None and not df.empty and x_col_val and x_col_val != "-- 無數據 --":
+             try:
+                 # 使用預設值嘗試繪製圖表一
+                 initial_plot = create_plot(df, chart_type_val, x_col_val, y_col_val,
+                                            None, None, # group, size
+                                            "預設 (Plotly)", [], "", 700, 450, # color, patterns, title, w, h
+                                            "是", "是", agg_func_val, {}) # grid, legend, agg, custom_colors
+             except Exception as initial_plot_e:
+                 print(f"載入數據後嘗試初始繪圖時出錯: {initial_plot_e}")
+                 initial_plot = go.Figure()
+                 initial_plot.add_annotation(text=f"⚠️ 無法生成初始圖表:<br>{initial_plot_e}", align='left', showarrow=False, font=dict(size=14, color="orange"))
+                 initial_plot.update_layout(xaxis_visible=False, yaxis_visible=False)
+
+        # 將初始圖表添加到更新列表中
+        updates.append(initial_plot)
+        # 圖表二保持空白
+        updates.append(gr.Plot(value=None)) # 更新圖表二為空
+
+        return updates
+
+
+    # 綁定數據載入事件
+    upload_button.click(
+        process_upload,
+        inputs=[file_upload],
+        outputs=[data_state, upload_status]
+    ).then(
+        load_data_and_update_ui,
+        inputs=[data_state, upload_status],
+        outputs=[
+            data_state, upload_status, data_preview,
+            x_column_1, y_column_1, group_column_1, size_column_1, # 圖表一 Dropdowns
+            x_column_2, y_column_2, group_column_2, size_column_2, # 圖表二 Dropdowns
+            chart_output_1, # 圖表一初始繪圖
+            chart_output_2  # 圖表二初始空白
+        ]
     )
-    parse_button.click(parse_data, inputs=[csv_input], outputs=[data_state, parse_status]).then(
-        load_data_and_update_ui, inputs=[data_state, parse_status],
-        outputs=[data_state, parse_status, data_preview, x_column_1, y_column_1, group_column_1, size_column_1, x_column_2, y_column_2, group_column_2, size_column_2]
+    parse_button.click(
+        parse_data,
+        inputs=[csv_input],
+        outputs=[data_state, parse_status]
+    ).then(
+        load_data_and_update_ui,
+        inputs=[data_state, parse_status],
+        outputs=[
+            data_state, parse_status, data_preview,
+            x_column_1, y_column_1, group_column_1, size_column_1,
+            x_column_2, y_column_2, group_column_2, size_column_2,
+            chart_output_1, chart_output_2
+        ]
     )
 
+
     # --- 數據導出 ---
     export_button.click(export_data, inputs=[data_state, export_format], outputs=[export_result, export_status])
 
@@ -2048,7 +2155,6 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.
     def auto_update_chart_1(*inputs): return create_plot(*inputs)
     # 綁定 change 事件到會影響圖表的 UI 組件
     for input_component in [chart_type_1, x_column_1, y_column_1, group_column_1, size_column_1, color_scheme_1, chart_title_1, chart_width_1, chart_height_1, show_grid_1, show_legend_1, agg_function_1, color_customization_1, pattern1_1, pattern2_1, pattern3_1]:
-        # 確保組件不是 None 且有 change 方法
         if input_component is not None and hasattr(input_component, 'change'):
              input_component.change(auto_update_chart_1, inputs=chart_inputs_1, outputs=[chart_output_1])
 
@@ -2061,7 +2167,14 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.
         if not isinstance(rec_dict, dict): print("警告：apply_recommendation 收到非字典輸入。"); return [gr.update()] * 5
         chart_type_val = rec_dict.get("chart_type"); x_col_val = rec_dict.get("x_column"); agg_func_val = rec_dict.get("agg_function")
         y_col_val = None if agg_func_val == "計數" else rec_dict.get("y_column"); group_col_val = rec_dict.get("group_column", "無")
-        return [gr.Dropdown(value=chart_type_val), gr.Dropdown(value=x_col_val), gr.Dropdown(value=y_col_val), gr.Dropdown(value=group_col_val), gr.Dropdown(value=agg_func_val)]
+        # 返回 Radio 和 Dropdown 的更新
+        return [
+            gr.Radio(value=chart_type_val),      # 更新 Chart Type Radio
+            gr.Dropdown(value=x_col_val),    # 更新 X Column Dropdown
+            gr.Dropdown(value=y_col_val),    # 更新 Y Column Dropdown
+            gr.Dropdown(value=group_col_val),# 更新 Group Column Dropdown
+            gr.Radio(value=agg_func_val)       # 更新 Agg Function Radio
+        ]
 
     recommend_button_1.click(recommend_chart_settings, inputs=[data_state], outputs=[recommendation_state]).then(
         apply_recommendation, inputs=[recommendation_state], outputs=[chart_type_1, x_column_1, y_column_1, group_column_1, agg_function_1]
@@ -2084,9 +2197,10 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.
     # --- 圖表二：導出圖表 ---
     download_button_2.click(download_figure, inputs=[chart_output_2, export_img_format_2], outputs=[export_chart_2, export_chart_status_2])
 
-    # --- 圖表類型改變時更新 UI 元素可見性 ---
+    # --- 圖表類型改變時更新 UI 元素可見性 (保持不變) ---
     def update_element_visibility(chart_type):
         try:
+            # (與 V3 相同的邏輯)
             is_pie_like = chart_type in ["圓餅圖", "環形圖", "漏斗圖", "樹狀圖"]; is_histogram = chart_type == "直方圖"
             is_box_violin = chart_type in ["箱型圖", "小提琴圖"]; is_gantt = chart_type == "甘特圖"
             is_heatmap = chart_type == "熱力圖"; is_radar = chart_type == "雷達圖"
@@ -2101,9 +2215,11 @@ with gr.Blocks(css=CUSTOM_CSS, title="��階數據可視化工具 V3", theme=gr.
             elif is_heatmap: group_label, group_needed = "行/列 分組", True
             size_label, size_needed = "大小列", chart_type in ["氣泡圖", "散點圖"]
             if is_gantt: size_label, size_needed = "顏色列 (可選)", True
+            # 返回 Dropdown 的更新對象
             return (gr.update(label=y_label, visible=y_needed), gr.update(label=group_label, visible=group_needed), gr.update(label=size_label, visible=size_needed))
         except Exception as e: print(f"Error in update_element_visibility: {e}"); return (gr.update(), gr.update(), gr.update())
 
+    # 綁定到 Radio chart_type 的 change 事件
     chart_type_1.change(update_element_visibility, inputs=[chart_type_1], outputs=[y_column_1, group_column_1, size_column_1])
     chart_type_2.change(update_element_visibility, inputs=[chart_type_2], outputs=[y_column_2, group_column_2, size_column_2])
 
@@ -2111,4 +2227,5 @@ with gr.Blocks(css=CUSTOM_CSS, title="進階數據可視化工具 V3", theme=gr.
 # == 應用程式啟動 (Launch Application) ==
 # =========================================
 if __name__ == "__main__":
-    demo.launch(debug=True)
+    demo.launch(debug=True)
+