Update static/index.html

static/index.html

@@ -1097,21 +1097,73 @@ function renderChartPage(){
     const info=document.createElement('span');info.className='page-info';info.textContent=`第${currentChartPage+1}/${totalPgs}頁，共${total}種方法`;pag.appendChild(info);
   }
 }
-function renderSingleChart(canvas,hist,predVal,nextYear,methodName,color){
-  const labels=[...hist.map(d=>d.year)];const hv=[...hist.map(d=>d.value)];const hasP=!isNaN(predVal);
-  const allLabels=hasP?[...labels,nextYear]:[...labels];
-  const barData=hasP?[...hv,null]:[...hv];
-  const predBar=new Array(allLabels.length).fill(null);if(hasP)predBar[predBar.length-1]=predVal;
-  const lineData=[...hv];if(hasP)lineData.push(predVal);
-  return new Chart(canvas,{
-    data:{labels:allLabels,datasets:[
-      {type:'bar',label:'歷史數值',data:barData,backgroundColor:color.bar,borderColor:color.line,borderWidth:1,order:2},
-      {type:'bar',label:`預測值 (${methodName})`,data:predBar,backgroundColor:'rgba(230,180,80,0.5)',borderColor:'rgba(230,180,80,0.9)',borderWidth:2,order:2},
-      {type:'line',label:'趨勢線',data:lineData,borderColor:color.line,backgroundColor:color.bar.replace('.4','.08'),borderWidth:2,fill:true,tension:.3,
-        pointRadius:allLabels.map((_,i)=>i===allLabels.length-1&&hasP?7:4),
-        pointBackgroundColor:allLabels.map((_,i)=>i===allLabels.length-1&&hasP?'rgba(230,180,80,1)':color.line),order:1}
-    ]},
-    options:chartOptions()
+function renderSingleChart(canvas, hist, predVal, nextYear, methodName, color) {
+  // 取得使用者選擇的圖形類型，預設為複合圖
+  const chartStyle = document.getElementById('chartStyleSelect').value || 'mixed';
+
+  const labels = [...hist.map(d=>d.year)];
+  const hv = [...hist.map(d=>d.value)];
+  const hasP = !isNaN(predVal);
+  const allLabels = hasP ? [...labels, nextYear] : [...labels];
+
+  // 【複合圖專用】將歷史與預測分離成不同長條
+  const barData = hasP ? [...hv, null] : [...hv];
+  const predBar = new Array(allLabels.length).fill(null);
+  if(hasP) predBar[predBar.length-1] = predVal;
+
+  // 【連續圖專用】將歷史與預測接在一起
+  const lineData = [...hv];
+  if(hasP) lineData.push(predVal);
+
+  // 動態判定最後一個預測點的顏色與大小
+  const pointColors = allLabels.map((_,i) => i===allLabels.length-1 && hasP ? 'rgba(230,180,80,1)' : color.line);
+  const bgColors = allLabels.map((_,i) => i===allLabels.length-1 && hasP ? 'rgba(230,180,80,0.5)' : color.bar);
+  const borderColors = allLabels.map((_,i) => i===allLabels.length-1 && hasP ? 'rgba(230,180,80,0.9)' : color.line);
+  const pointRadii = allLabels.map((_,i) => i===allLabels.length-1 && hasP ? 7 : 4);
+
+  let datasets = [];
+
+  // 根據下拉選單決定要丟給 Chart.js 什麼資料結構
+  if (chartStyle === 'mixed') {
+    datasets = [
+      {type:'bar', label:'歷史數值', data:barData, backgroundColor:color.bar, borderColor:color.line, borderWidth:1, order:2},
+      {type:'bar', label:`預測值 (${methodName})`, data:predBar, backgroundColor:'rgba(230,180,80,0.5)', borderColor:'rgba(230,180,80,0.9)', borderWidth:2, order:2},
+      {type:'line', label:'趨勢線', data:lineData, borderColor:color.line, backgroundColor:color.bar.replace('.4','.08'), borderWidth:2, fill:true, tension:0.3,
+        pointRadius:pointRadii, pointBackgroundColor:pointColors, order:1}
+    ];
+  } else if (chartStyle === 'line' || chartStyle === 'area') {
+    datasets = [{
+      type: 'line',
+      label: '數值',
+      data: lineData,
+      borderColor: color.line,
+      backgroundColor: color.bar.replace('.4', chartStyle === 'area' ? '.2' : '.0'), // 面積圖調整透明度
+      borderWidth: 2,
+      fill: chartStyle === 'area',
+      tension: 0.3,
+      pointRadius: pointRadii,
+      pointBackgroundColor: pointColors,
+      pointBorderColor: pointColors,
+      segment: {
+        // ★ 魔法在這裡：讓最後一段連接預測值的線段變成金色與虛線
+        borderColor: ctx => ctx.p0DataIndex === allLabels.length - 2 ? 'rgba(230,180,80,1)' : color.line,
+        borderDash: ctx => ctx.p0DataIndex === allLabels.length - 2 ? [5, 5] : undefined
+      }
+    }];
+  } else if (chartStyle === 'bar') {
+    datasets = [{
+      type: 'bar',
+      label: '數值',
+      data: lineData,
+      backgroundColor: bgColors,
+      borderColor: borderColors,
+      borderWidth: 1
+    }];
+  }
+
+  return new Chart(canvas, {
+    data: { labels: allLabels, datasets: datasets },
+    options: chartOptions()
   });
 }
 function chartOptions(){