fixed chart style setting

css/custom.css

@@ -320,6 +320,7 @@ padding: 30px;
     font-weight: 900;
     font-style: normal;
     width: 60%;
+    color:rgba(130, 163, 63, 1);
 
 }
 

index.html

@@ -548,8 +548,9 @@
                     <div>
                         <p class="font-weight-bold">線條粗細:</p>
                         <label for="borderWidthRange" class="form-label d-none">線條粗細</label>
-                        <input type="range" class="form-range" id="borderWidthRange" min="1" max="5" value="1" step="1">
-                        <span id="borderWidthRangeValue">1</span>
+                        <input type="number" class="form-range" id="borderWidthRange" min="1" max="5" value="1"
+                            step="1">
+                        <!-- <span id="borderWidthRangeValue">1</span> -->
                     </div>
                     <div class="ml-lg-5">
                         <p style="margin-bottom: 10px;" class="font-weight-bold">線條顏色:</p>
@@ -570,14 +571,14 @@
 
                 <div class="mt-3 d-flex">
                     <div>
-                        顯示數據點:<input class="ml-3" type="checkbox" id="togglePoints">
+                        顯示數據點:<input class="ml-1" type="checkbox" id="togglePoints">
 
                     </div>
                     <div class="ml-3">
-                        顯示數值:<input class="ml-3" type="checkbox" id="toggleValue" checked>
+                        顯示數值:<input class="ml-1" type="checkbox" id="toggleValue" checked>
                     </div>
                     <div class="ml-3">
-                        顯示單位:<input class="ml-3" type="checkbox" id="toggleUnit" checked>
+                        顯示單位:<input class="ml-1" type="checkbox" id="toggleUnit" checked>
                     </div>
                 </div>
 

js/demo/text-to-chart.js

@@ -76,6 +76,9 @@ var TitlefontSizeValue = 32;
 var pieFontSize = 14;
 var PieMaxWidth = 100;
 
+var pointRadiusValue = 0;
+var pointHoverRadiusValue = 0;
+
 
 var chart_bgimg_url = "url(./img/bg06.webp)";
 
@@ -409,12 +412,12 @@ send_data_compare.addEventListener("click", function () {
             }
             if (chartType === 'line') {
                 const colors = [
-                    'rgba(130, 163, 63, 1)',
-                    'rgba(47, 72, 123, 1)',
-                    '#df8c49',
-                    '#72598f',
-                    '#489fb6',
-                    '#99b0d5'
+                    '#82a33f',  // rgba already
+                    '#2f487b',   // rgba already
+                    '#df8c49',  // hex #df8c49
+                    '#72598f',  // hex #72598f
+                    '#489fb6',  // hex #489fb6
+                    '#99b0d5'  // hex #99b0d5
                 ];
 
                 let colorIndex = 0;
@@ -481,14 +484,24 @@ send_data_compare.addEventListener("click", function () {
 
                 const color = getRandomColor();
 
+                if (response.data.data.length < 15) {
+                    pointRadiusValue = 5;
+                    pointHoverRadiusValue = 8;
+
+                    togglePoints.checked = true;
+                }
+
                 const newDataset = {
                     label: stockName,
                     backgroundColor: color,
-                    pointRadius: 0,
+                    pointRadius: pointRadiusValue,
                     pointHoverRadius: 0,
                     pointBorderColor: '#fff',
+                    pointBorderWidth: 3,
+                    pointHoverRadiusValue: 8,
                     borderColor: color,
                     data: stock2Normalized,
+
                     fill: false
                 };
 
@@ -1438,8 +1451,7 @@ function getDatalabelsConfig(dataLength) {
     }
 }
 
-var pointRadiusValue = 0;
-var pointHoverRadiusValue = 0;
+
 
 function getDatalabelsConfig(isEnabled) {
     if (!isEnabled) {
@@ -1577,6 +1589,7 @@ function createChart(chartType, data, labels) {
 
                 legend: {
                     display: false,
+                    fullSize: true
                 },
 
             },
@@ -1638,6 +1651,30 @@ function createChart(chartType, data, labels) {
                     bottom: 10,
                 }
             },
+            onClick: function (event, elements) {
+                console.log()
+                if (elements.length > 0) {
+                    const element = elements[0];
+                    selectedDatasetIndex = element.datasetIndex;
+
+                    const currentColor = myChart.data.datasets[selectedDatasetIndex].borderColor;
+
+
+
+                    const colorValue = currentColor;
+
+
+                    colorInput.value = colorValue;
+
+                    // 获取当前线条颜色并更新 colorPicker
+
+                    // colorInput.value = rgbToHex(currentColor);
+
+                    // console.log('當前顏色', colorValue);
+
+                    colorInput.disabled = false; // 启用 colorPicker
+                }
+            }
 
         },
     });
@@ -1664,6 +1701,8 @@ function createChart(chartType, data, labels) {
 
 }
 
+
+
 // createChart(chartType);
 
 // createChart(chartType)
@@ -1797,13 +1836,9 @@ toggleUnit.addEventListener('change', function () {
 // 單位
 // =========================
 var unitInput = document.getElementById('unit_data');
-
 var unit_value = document.querySelector('.unit');
-
 var unit_value_box = document.querySelector('#unit_box');
 
-
-
 // console.log('單位', unitInput)
 
 unitInput.addEventListener('input', function () {
@@ -1822,9 +1857,6 @@ unitInput.addEventListener('input', function () {
 
 });
 
-
-
-
 // ==========================
 
 // y軸字體大小-折線圖
@@ -1851,7 +1883,6 @@ YfontSize.addEventListener('input', function () {
 var XfontSize = document.getElementById('XfontSize');
 
 XfontSize.addEventListener('input', function () {
-
     XfontSizeValue = XfontSize.value;
     console.log(XfontSizeValue)
     if (myChart) {
@@ -1861,7 +1892,6 @@ XfontSize.addEventListener('input', function () {
 });
 // ==========================
 
-
 // x軸字體大小-柱狀圖
 // ==========================
 var XfontSizeBar = document.getElementById('XfontSizeBar');
@@ -1876,7 +1906,6 @@ XfontSizeBar.addEventListener('input', function () {
 // y軸字體大小-柱狀圖
 // ==========================
 
-
 var YfontSizeBar = document.getElementById('YfontSizeBar');
 YfontSizeBar.addEventListener('input', function () {
     extractAndGenerateChart(dataArray);
@@ -1903,13 +1932,20 @@ colorInputBar.addEventListener('input', function () {
 
 // 線條粗細
 // =========================
+
+function updateLineWidth(borderWidthValue) {
+    myChart.data.datasets.forEach(dataset => {
+        dataset.borderWidth = parseFloat(borderWidthValue);
+    });
+    myChart.update();
+}
 var rangeInput = document.getElementById('borderWidthRange');
 
-var rangeInputSpan = document.getElementById('borderWidthRangeValue');
+// var rangeInputSpan = document.getElementById('borderWidthRangeValue');
 
 var borderWidthValue;
 
-rangeInputSpan.textContent = rangeInput.value;
+// rangeInputSpan.textContent = rangeInput.value;
 
 
 // 添加事件监听器，当滑动条的值发生改变时更新显示的值
@@ -1918,13 +1954,10 @@ rangeInput.addEventListener('input', function () {
     borderWidthValue = rangeInput.value;
 
     console.log(borderWidthValue);
-    rangeInputSpan.textContent = borderWidthValue;
 
-    if (myChart) {
-        myChart.destroy();
-    }
+    // rangeInputSpan.textContent = borderWidthValue;
 
-    createChart(chartType, data, labels);
+    updateLineWidth(borderWidthValue);
     // myChart.data.datasets[0].borderWidth = borderWidthValue;
 
 });
@@ -1936,21 +1969,52 @@ rangeInput.addEventListener('input', function () {
 
 
 const colorInput = document.getElementById('borderColorInput');
-
+let selectedDatasetIndex = null;
 
 // 添加事件监听器，当颜色选择发生变化时触发
 colorInput.addEventListener('input', function () {
     // 获取当前选择的颜色值
-    chartColor = colorInput.value;
+    // chartColor = colorInput.value; 
+    // if (myChart) {
+    //     myChart.destroy();
+    // }
+    if (selectedDatasetIndex !== null) {
+        const newColor = colorInput.value;
+        myChart.data.datasets[selectedDatasetIndex].borderColor = newColor;
+        myChart.data.datasets[selectedDatasetIndex].backgroundColor = newColor;
 
-    if (myChart) {
-        myChart.destroy();
+        myChart.update(); // 更新图表
+        // createChart(chartType, data, labels);
     }
+    // console.log(chartColor);
+    // createChart(chartType, data, labels);
+});
 
+function rgbToHex(rgb) {
+    const rgbArr = rgb.match(/\d+/g);
+    return `#${((1 << 24) + (parseInt(rgbArr[0]) << 16) + (parseInt(rgbArr[1]) << 8) + parseInt(rgbArr[2])).toString(16).slice(1)}`;
+}
+
+function hexToRgba(hex, alpha = 1) {
+    // 移除 HEX 颜色值的 # 符号
+    hex = hex.replace(/^#/, '');
+
+    // 处理 3 位 HEX 颜色值（如 #fff）
+    if (hex.length === 3) {
+        hex = hex.split('').map(function (hex) {
+            return hex + hex;
+        }).join('');
+    }
+
+    // 解析 HEX 颜色值
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    // 返回 RGBA 颜色值
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
 
-    console.log(chartColor);
-    createChart(chartType, data, labels);
-});
 
 // =========================
 
@@ -1962,7 +2026,6 @@ colorInput.addEventListener('input', function () {
 // =========================
 // JavaScript
 document.addEventListener("DOMContentLoaded", function () {
-
     // 獲取所有帶有 templateImg class 的圖像元素
     var templateImgs = document.querySelectorAll('.templateImg');