fixed08301633

index.html

@@ -573,6 +573,9 @@
                         顯示數據點:<input class="ml-3" type="checkbox" id="togglePoints">
 
                     </div>
+                    <div class="ml-3">
+                        顯示數值:<input class="ml-3" type="checkbox" id="toggleValue" checked>
+                    </div>
                     <div class="ml-3">
                         顯示單位:<input class="ml-3" type="checkbox" id="toggleUnit" checked>
                     </div>

js/demo/text-to-chart.js

@@ -483,10 +483,11 @@ send_data_compare.addEventListener("click", function () {
 
                 const newDataset = {
                     label: stockName,
-                    backgroundColor: colors,
+                    backgroundColor: color,
                     pointRadius: 0,
                     pointHoverRadius: 0,
-                    borderColor: colors,
+                    pointBorderColor: '#fff',
+                    borderColor: color,
                     data: stock2Normalized,
                     fill: false
                 };
@@ -1440,6 +1441,24 @@ function getDatalabelsConfig(dataLength) {
 var pointRadiusValue = 0;
 var pointHoverRadiusValue = 0;
 
+function getDatalabelsConfig(isEnabled) {
+    if (!isEnabled) {
+        return null;
+    }
+    return data.length <= 15 ? {
+        formatter: function (value, context) {
+            return value;
+        },
+        textStrokeColor: '#fff',
+        textStrokeWidth: 5,
+        color: '#584B3D',
+        font: {
+            size: YfontSizeValue,
+        },
+        anchor: 'end',
+        align: 'top'
+    } : null;
+}
 
 // 版型一折線圖
 // // 创建 Chart.js 图表
@@ -1728,16 +1747,38 @@ var togglePoints = document.getElementById('togglePoints');
 
 togglePoints.addEventListener('change', function () {
     console.log('checked', "change")
-    if (this.checked) {
-        myChart.data.datasets[0].pointRadius = 5;
-        myChart.data.datasets[0].pointHoverRadius = 8;
-    } else {
-        myChart.data.datasets[0].pointRadius = 0;
-        myChart.data.datasets[0].pointHoverRadius = 0;
-    }
+    // 遍历所有数据集，应用相应的pointRadius和pointHoverRadius
+    myChart.data.datasets.forEach(function (dataset) {
+        if (togglePoints.checked) {
+            dataset.pointRadius = 5;
+            dataset.pointHoverRadius = 8;
+        } else {
+            dataset.pointRadius = 0;
+            dataset.pointHoverRadius = 0;
+        }
+    });
     myChart.update();
 });
 
+
+
+// 是否顯示數值
+var toggleValue = document.getElementById('toggleValue');
+
+let datalabelsConfig = getDatalabelsConfig(toggleValue.checked);
+
+
+toggleValue.addEventListener('change', function () {
+    console.log('切換數值')
+    // 根据复选框状态更新 datalabelsConfig
+    datalabelsConfig = getDatalabelsConfig(this.checked);
+
+    // 更新图表
+    myChart.options.plugins.datalabels = datalabelsConfig;
+    myChart.update();
+
+});
+
 // 是否顯示單位
 var toggleUnit = document.getElementById('toggleUnit');