update 0911

css/custom.css

@@ -105,9 +105,11 @@ padding: 30px;
 }
 
 
-
+.chart_content{
+    width: 90% !important;
+}
 #textToChart {
-    width: 90% !important; /* 視窗寬度 */
+    width: 100% !important; /* 視窗寬度 */
     /* height: 100%; 視窗高度 */
 }
 
@@ -459,4 +461,20 @@ padding: 30px;
     background-clip: padding-box;
     border: 1px solid #d1d3e2;
     border-radius: .35rem;
-}
+}
+
+#borderWidthRange{
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #6e707e;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #d1d3e2;
+    border-radius: .35rem;
+}
+
+.chart-container {
+    overflow: visible; /* 确保 hover 区域没有被遮挡 */
+  }

index.html

@@ -255,7 +255,9 @@
                                             <!-- <div style="padding:0px 30px 30px;"> -->
                                             <div id="data_chartJs_box"
                                                 style="position: relative;  height: auto; text-align: center;">
-                                                <canvas id="textToChart"></canvas>
+                                                <div class="chart_content">
+                                                    <canvas id="textToChart"></canvas>
+                                                </div>
                                                 <!-- <div id="chart-label"></div> -->
                                                 <!-- <div class="chart-line" id="chart-line"></div> -->
                                                 <div id="chartdiv"></div>
@@ -294,7 +296,7 @@
                                         </div>
                                         <input type="text" style="position: relative ; z-index: 100;"
                                             id="keyword_data_compare" class="form-control bg-white small"
-                                            placeholder="搜尋股票、ETF 或其他項目進行比較..." aria-label="Search"
+                                            placeholder="Ex:台股-2330 台積電、台股-2454 聯發科" aria-label="Search"
                                             aria-describedby="basic-addon2">
                                         <div id="suggestions_compare" class="autocomplete-suggestions2"></div>
                                         <div class="input-group-append">
@@ -455,7 +457,7 @@
                 </div> -->
             </div>
         </form>
-        <form class="ml-md-3 mr-md-3 my-2 chartSetting ">
+        <form class="ml-md-3 mr-md-3 my-2 chartSetting">
             <p class="font-weight-bold">標題:</p>
             <div class="d-flex">
                 <div style="width: 75%;">
@@ -467,8 +469,10 @@
 
                 </div>
 
+
             </div>
 
+
             <!-- <p class="font-weight-bold">標題位置:</p>  -->
             <div class="mb-2">
                 <div class="form-check form-check-inline">
@@ -493,6 +497,13 @@
                     aria-describedby="basic-addon2">
             </div>
 
+            <div class="d-flex mb-1">
+
+                <div>
+                    顯示單位:<input class="ml-1" type="checkbox" id="toggleUnit" checked>
+                </div>
+            </div>
+
         </form>
 
         <!-- <form class="ml-md-3 mr-md-3 my-2">
@@ -543,6 +554,12 @@
                 <input type="number" value="18" step="1" class="form-control" id="XfontSize" />
             </form>
 
+            <!-- <form class="ml-md-3 mr-md-3 my-2 chartSetting">
+                <p class="font-weight-bold">標示字體大小:</p>
+                <label class="d-none" for="ValuefontSize">字體大小:</label>
+                <input type="number" value="18" step="1" class="form-control" id="ValuefontSize" />
+            </form> -->
+
             <form class="ml-md-3 mr-md-3 my-3 chartSetting">
                 <div id="borderSetting" class="borderWidth d-flex">
                     <div>
@@ -553,7 +570,7 @@
                         <!-- <span id="borderWidthRangeValue">1</span> -->
                     </div>
                     <div class="ml-lg-5">
-                        <p style="margin-bottom: 10px;" class="font-weight-bold">線條顏色:</p>
+                        <p class="font-weight-bold">線條顏色:</p>
                         <label for="exampleColorInput" class="form-label d-none">線條顏色</label>
                         <input type="color" class="form-control form-control-color" id="borderColorInput"
                             value="#912B2B" title="Choose your color">
@@ -563,7 +580,7 @@
                 </div>
 
 
-                <div id="lineYfontSize">
+                <div class="my-2" id="lineYfontSize">
                     <p class="font-weight-bold">數據字體大小:</p>
                     <label class="d-none" for="YfontSize">字體大小:</label>
                     <input type="number" value="18" step="1" class="form-control" id="YfontSize" />
@@ -578,8 +595,18 @@
                         顯示數值:<input class="ml-1" type="checkbox" id="toggleValue" checked>
                     </div>
                     <div class="ml-3">
-                        顯示單位:<input class="ml-1" type="checkbox" id="toggleUnit" checked>
+                        顯示橫軸:<input type="checkbox" id="toggleXAxis" checked>
                     </div>
+                    <!-- <div>
+                        顯示數據點:<input class="ml-1" type="checkbox" id="togglePoints">
+
+                    </div>
+                    <div class="ml-3">
+                        顯示數值:<input class="ml-1" type="checkbox" id="toggleValue" checked>
+                    </div>
+                    <div class="ml-3">
+                        顯示單位:<input class="ml-1" type="checkbox" id="toggleUnit" checked>
+                    </div> -->
                 </div>
 
             </form>

js/demo/text-to-chart.js

@@ -68,7 +68,7 @@ var ctx;
 var chartlabels;
 var chartdata;
 
-var XfontSizeValue = 18;
+var XfontSizeValue = 16;
 var YfontSizeValue = 18;
 
 var TitlefontSizeValue = 32;
@@ -84,6 +84,9 @@ var chart_bgimg_url = "url(./img/bg06.webp)";
 
 var vocab = [];
 
+var vocab_compare = [];
+
+
 var chartDiv = document.getElementById('chartdiv');
 
 var dataFirstValue;
@@ -110,6 +113,21 @@ document.addEventListener('DOMContentLoaded', function () {
         });
 });
 
+// 比較提示詞
+document.addEventListener('DOMContentLoaded', function () {
+    axios.get("https://cmm.ai:8080/vocab_comparision")
+        .then(response => {
+            // apiHideLoading();     
+            console.log(response);
+
+            vocab_compare = response.data;
+        })
+        .catch(error => {
+
+            console.error('發生錯誤:', error);
+        });
+});
+
 
 inputField.addEventListener('click', function () {
     // 確保輸入框處於焦點狀態
@@ -236,7 +254,7 @@ document.addEventListener('DOMContentLoaded', function () {
             // const filteredVocab = vocab.filter(item => item.toLowerCase().includes(query));
             const queryTerms = query.split(/\s+/); // 分割輸入的內容
             const lastQueryTerm = queryTerms[queryTerms.length - 1];
-            const filteredVocab = vocab.filter(item => {
+            const filteredVocab = vocab_compare.filter(item => {
                 // 對每個分割後的單詞進行匹配，只要其中有一個匹配成功就返回 true
                 return item.toLowerCase().includes(lastQueryTerm.toLowerCase());
 
@@ -334,11 +352,14 @@ document.addEventListener('DOMContentLoaded', function () {
 //     }
 // });
 
+
 // 定義按鈕點擊事件處理函數
 function sendButtonClickHandler() {
+
     // inputField.value = "";
     console.log(inputField.value);
     var input_text_value = inputField.value;
+    // input_text_value = '台積電近兩週收盤價'
     compare_box.style.display = "none";
     $('#chartdiv').hide();
     sidebar.classList.remove('show');
@@ -486,7 +507,7 @@ send_data_compare.addEventListener("click", function () {
 
                 if (response.data.data.length < 15) {
                     pointRadiusValue = 5;
-                    pointHoverRadiusValue = 8;
+                    pointHoverRadiusValue = 0;
 
                     togglePoints.checked = true;
                 }
@@ -649,8 +670,13 @@ var dataArray;
 
 
 
+// get_data('2330近兩週收盤價');
+
+
+
 function generateChart(dataArray) {
-    if (dataArray.length > 10) {
+
+    if (dataArray.length > 15) {
         lineYfontSize.style.display = 'none'
     } else {
         lineYfontSize.style.display = 'block'
@@ -1473,6 +1499,9 @@ function getDatalabelsConfig(isEnabled) {
     } : null;
 }
 
+
+
+
 // 版型一折線圖
 // // 创建 Chart.js 图表
 function createChart(chartType, data, labels) {
@@ -1487,13 +1516,15 @@ function createChart(chartType, data, labels) {
 
     if (data.length < 15) {
         pointRadiusValue = 5;
-        pointHoverRadiusValue = 8;
+        pointHoverRadiusValue = 0;
 
         togglePoints.checked = true;
         toggleValue.checked = true;
 
 
     } else {
+        pointRadiusValue = 0;
+
         togglePoints.checked = false;
 
         toggleValue.checked = false;
@@ -1520,7 +1551,9 @@ function createChart(chartType, data, labels) {
             size: YfontSizeValue,
         },
         anchor: 'end',
-        align: 'top'
+        align: 'end',//固定
+        offset: 5,
+
     } : null;
 
 
@@ -1540,27 +1573,22 @@ function createChart(chartType, data, labels) {
                 pointRadius: pointRadiusValue,
                 pointBorderColor: '#fff',
                 pointBorderWidth: 3,
-                pointHoverRadius: pointHoverRadiusValue,
+                // pointHoverRadius: 10,
                 fill: false,
                 backgroundColor: chartColor,
                 borderColor: chartColor,
+                hitRadius: 10,
                 // barPercentage: 0.5,
                 // categoryPercentage: 0.5
             }]
         },
         options: {
 
-            // responsive: true, // 啟用響應式
+            responsive: true, // 啟用響應式
             maintainAspectRatio: false,
 
             plugins: {
 
-                chart3d: {
-                    enabled: true, // 啟用 3D 插件
-                    alpha: 25, // 圖表繞 x 軸的旋轉角度
-                    beta: 25, // 圖表繞 y 軸的旋轉角度
-                    depth: 15 // 圖表的深度
-                },
                 datalabels: datalabelsConfig,
                 backgroundColor: 'transparent',
                 // datalabels: {
@@ -1593,11 +1621,12 @@ function createChart(chartType, data, labels) {
                 //     anchor: 'end',
                 //     align: 'end',
                 // } : null,
-                customLabels: null,
+                // customLabels: null,
 
                 legend: {
                     display: false,
-                    fullSize: true
+                    fullSize: true,
+                    position: 'bottom',
                 },
 
             },
@@ -1636,6 +1665,7 @@ function createChart(chartType, data, labels) {
                         },
                     },
                     ticks: {
+                        padding: 10,
                         textStrokeColor: '#fff',
                         textStrokeWidth: 5,
                         font: {
@@ -1682,7 +1712,8 @@ function createChart(chartType, data, labels) {
 
                     colorInput.disabled = false; // 启用 colorPicker
                 }
-            }
+            },
+
 
         },
     });
@@ -1826,6 +1857,17 @@ toggleValue.addEventListener('change', function () {
 
 });
 
+// 是否顯示x軸
+const toggleXAxis = document.getElementById('toggleXAxis');
+
+toggleXAxis.addEventListener('change', function () {
+    // 根据复选框的状态来显示或隐藏 X 轴
+    myChart.options.scales.x.ticks.display = this.checked;
+
+    // 更新图表
+    myChart.update();
+});
+
 // 是否顯示單位
 var toggleUnit = document.getElementById('toggleUnit');
 
@@ -1875,10 +1917,19 @@ var YfontSize = document.getElementById('YfontSize');
 YfontSize.addEventListener('input', function () {
 
     YfontSizeValue = YfontSize.value;
-    if (myChart) {
-        myChart.destroy();
-    }
-    createChart(chartType, data, labels);
+
+
+
+    const newSize = parseInt(YfontSizeValue);
+
+    // 更新 datalabelsConfig 的字体大小
+    myChart.options.plugins.datalabels.font.size = newSize;
+
+    // 更新图表
+    myChart.update();
+
+
+    // createChart(chartType, data, labels);
 });
 
 // ==========================
@@ -2163,7 +2214,9 @@ function get_data(input_text_value) {
     source = cancelToken.source();
     // inputField.value = "";
     apiLoading();
+
     var existingTable = chartJsBox.querySelector('table');
+
     downloadButton.style.display = "none";
     if (chartDiv.childElementCount != 0) {
         data = [];
@@ -2207,9 +2260,12 @@ function get_data(input_text_value) {
 
             console.log(response);
 
+            // console.log(response.data.chart_info === undefined);
+
 
-            if (response.data.data == "未達相似度搜尋標準") {
-                alert('無法生成圖表')
+            if (response.data.chart_info === undefined) {
+                console.log(response.data.data)
+                alert(response.data.data)
                 return
             } else {
                 unit_value_box.style.display = "block";
@@ -2265,7 +2321,7 @@ function get_data(input_text_value) {
                 } else if (chartType === "doughnut") {
                     unit_value.textContent = "";
                     $('#textToChart').hide();
-
+                    unit_value_box.style.display = 'none';
                     generatePieChart(dataArray, pieFontSize, PieMaxWidth)
                 } else {
                     unit_value_box.style.display = "block"
@@ -2940,3 +2996,8 @@ Object.defineProperty(obj, 'text', {
     }
 });
 
+
+
+
+
+// sendButtonClickHandler(input_text_value);