fixed 0830

css/custom.css

@@ -12,7 +12,7 @@ border: 1px solid #000;
 }
 
 body{
-     background: #f8f9fc !important;
+    background-color: transparent;
 }
 
 .x-axis-labels span {
@@ -93,7 +93,7 @@ padding: 30px;
 }
 
 .chart_title{
-    padding: 30px 0px 0px 30px;
+    padding: 15px 0px 0px 30px;
 }
 
 .chartSetting{
@@ -323,10 +323,13 @@ padding: 30px;
 
 }
 
+
 .unit_box{
+    display: none;
     position: absolute;
-    bottom: 180px;
+    bottom: 160px;
     left: 30px;
+    width: 40px;
     color:#584B3D;
     text-shadow:
     -1px -1px 0 #fff,  
@@ -339,9 +342,20 @@ padding: 30px;
     font-weight: 600;
 }
 .unit_value{
-    writing-mode: vertical-rl; /* 或者 vertical-lr 根據需求選擇 */
-    text-orientation: upright; /* 使文字保持正直 */
-    white-space: nowrap; /* 防止換行 */
+   
+    /* writing-mode: vertical-rl; 或者 vertical-lr 根據需求選擇
+    text-orientation: upright; 使文字保持正直
+    white-space: nowrap;  防止換行 */
+
+    display: grid;
+    grid-template-columns: 1fr; /* 單列網格 */
+    grid-gap: 1px; /* 調整行高 */
+    text-align: center;
+}
+
+.unit_value span {
+    display: block; /* 每個字符占據一行 */
+    line-height: 1.2;
 }
 .img_box{
     position: absolute;

index.html

@@ -101,7 +101,8 @@
                             </div>
                         </li>
 
-                        <li class="nav-item"><a class="nav-link" href="./knowledge-graph.html">knowledge-graph</a></li>
+                        <li class="nav-item d-none"><a class="nav-link"
+                                href="./knowledge-graph.html">knowledge-graph</a></li>
 
                         <div class="topbar-divider d-sm-block"></div>
 
@@ -261,7 +262,15 @@
                                             </div>
 
                                             <div id="unit_box" class="unit_box">
-                                                <div class="unit_value"><span class="unit"></span></div>
+                                                <div class="unit_value">
+                                                    <span>單</span>
+                                                    <span>位</span>
+                                                    <span>:</span>
+                                                    <span class="unit">
+
+
+                                                    </span>
+                                                </div>
                                             </div>
                                             <!-- </div> -->
                                             <div id="img_box" class="img_box">
@@ -270,6 +279,19 @@
                                         </div>
                                     </div>
                                     <div id="compare" class="input-group pr-5 pl-5 compare mt-3">
+                                        <div class="checkbox-group mt-2 mr-3">
+
+                                            <label>
+                                                <input type="checkbox" id="checkbox1"> 漲幅
+                                            </label>
+
+
+                                            <label>
+                                                <input type="checkbox" id="checkbox2"> 單價
+                                            </label>
+
+
+                                        </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"
@@ -282,6 +304,7 @@
                                             </button>
 
                                         </div>
+
                                     </div>
                                 </div>
                             </div>
@@ -545,10 +568,16 @@
                     <input type="number" value="18" step="1" class="form-control" id="YfontSize" />
                 </div>
 
-                <div class="mt-3">
-                    顯示數據點:<input class="ml-3" type="checkbox" id="togglePoints">
+                <div class="mt-3 d-flex">
+                    <div>
+                        顯示數據點:<input class="ml-3" type="checkbox" id="togglePoints">
 
+                    </div>
+                    <div class="ml-3">
+                        顯示單位:<input class="ml-3" type="checkbox" id="toggleUnit" checked>
+                    </div>
                 </div>
+
             </form>
         </div>
 

js/demo/text-to-chart.js

@@ -14,7 +14,9 @@ var usernameEmail = localStorage.getItem("username");
 
 var unit_table_value
 
-
+var obj = {
+    _text: ''
+};
 
 // let username = usernameEmail.split('@')[0];
 
@@ -45,6 +47,7 @@ var sendButton = document.getElementById("send_data");
 var send_data_compare = document.getElementById("data_compare");
 
 
+
 var canvasPng = document.getElementById("textToChart");
 
 var img_box = document.getElementById("img_box");
@@ -215,6 +218,8 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
+
+
 document.addEventListener('DOMContentLoaded', function () {
     // const input = document.getElementById('stockInput');
     const suggestions_compare = document.getElementById('suggestions_compare');
@@ -350,7 +355,34 @@ let labels2 = [];
 let data2 = [];
 
 
+// 漲幅or單價
+const checkbox1 = document.getElementById('checkbox1');
+const checkbox2 = document.getElementById('checkbox2');
+var compare_type_input = document.querySelector('.checkbox-group')
+var compare_type = "";
+
+checkbox1.addEventListener('change', () => {
+    if (checkbox1.checked) {
+        checkbox2.checked = false;
+        compare_type = '漲幅'
+
+        console.log(compare_type);
+
+    }
+});
+
+checkbox2.addEventListener('change', () => {
+    if (checkbox2.checked) {
+        checkbox1.checked = false;
+
+        compare_type = '單價'
+
+        console.log(compare_type);
+
 
+
+    }
+});
 send_data_compare.addEventListener("click", function () {
 
 
@@ -365,8 +397,16 @@ send_data_compare.addEventListener("click", function () {
             labels2 = [];  // Clear previous labels
             data2 = [];  // Clear previous data
 
-            // console.log('比較送出後', chartType)
+            if (compare_type === "") {
+                alert('請輸入比較類型');
+                return
 
+            }
+            // console.log('比較送出後 ', chartType)
+            if (response.data.data === "無法產生圖表") {
+                alert('無法產生圖表')
+                return
+            }
             if (chartType === 'line') {
                 const colors = [
                     'rgba(130, 163, 63, 1)',
@@ -404,14 +444,41 @@ send_data_compare.addEventListener("click", function () {
                 }
 
 
+
                 const normalize = (prices) => {
                     const initialPrice = prices[0];
-                    return prices.map(price => (price - initialPrice) / initialPrice * 100);
+                    // return prices.map(price => (price - initialPrice) / initialPrice * 100);
+                    return prices.map(price => {
+                        // Calculate the normalized price
+                        const normalized = (price - initialPrice) / initialPrice * 100;
+                        // Round to 2 decimal places and convert back to a number
+                        return parseFloat(normalized.toFixed(2));
+                    });
+
                 };
 
-                const stock2Normalized = normalize(data2);
 
-                const stock1Normalized = normalize(data);
+
+                var stock2Normalized;
+
+                var stock1Normalized;
+
+                if (compare_type === '漲幅') {
+                    console.log('漲幅')
+                    stock2Normalized = normalize(data2);
+                    stock1Normalized = normalize(data);
+                    unitInput.value = '%';
+                    unit_value.textContent = '%'
+                } else {
+                    console.log('單價')
+
+                    unitInput.value = unitInput.value;
+                    unit_value.textContent = unitInput.value;
+
+                    stock2Normalized = data2;
+                    stock1Normalized = data;
+                }
+
                 const color = getRandomColor();
 
                 const newDataset = {
@@ -430,8 +497,6 @@ send_data_compare.addEventListener("click", function () {
 
                 myChart.data.datasets.push(newDataset);
 
-
-
                 myChart.data.datasets[0].data = stock1Normalized;
 
 
@@ -458,8 +523,8 @@ send_data_compare.addEventListener("click", function () {
                 myChart.update();
 
                 inputField_compare.value = '';
-                unitInput.value = '%';
-                unit_value.textContent = '單位:' + '%'
+                compare_type_input.style.display = 'none'
+
             } else if (chartType === 'bar') {
 
             }
@@ -969,7 +1034,7 @@ var chartTypeBtn = document.getElementById("chartType");
 chartTypeBtn.addEventListener('change', function () {
     const selectedValue = this.value;
     console.log('選擇的圖表類型:', selectedValue);
-
+    obj.text = selectedValue;
     // 在此处添加处理选定图表类型的代码
     if (selectedValue === 'line') {
         // 处理折线图
@@ -1014,18 +1079,35 @@ var downloadButton = document.getElementById("downloadButton");
 // 添加點擊事件監聽器
 downloadButton.addEventListener('click', function () {
     setTimeout(function () {
-        html2canvas(document.getElementById('data_chart_box')).then(function (canvas) {
-            // // 獲取圖片資料 URL
-            // var imageData = canvasPng.toDataURL("image/png");
-            // // 創建下載連結
-            // var link = document.createElement('a');
-            // link.download = 'chart.png'; // 下載的檔案名稱
-            // link.href = imageData; // 圖片資料 URL
-            // // 模擬點擊下載連結
-            // link.click();
-
-
-            // 創建一個<a>元素
+        // html2canvas(document.getElementById('data_chart_box')).then(function (canvas) {
+        //     // // 獲取圖片資料 URL
+        //     // var imageData = canvasPng.toDataURL("image/png");
+        //     // // 創建下載連結
+        //     // var link = document.createElement('a');
+        //     // link.download = 'chart.png'; // 下載的檔案名稱
+        //     // link.href = imageData; // 圖片資料 URL
+        //     // // 模擬點擊下載連結
+        //     // link.click();
+
+
+        //     // 創建一個<a>元素
+        //     const link = document.createElement('a');
+        //     // 將 Canvas 轉換為 Data URL
+        //     link.href = canvas.toDataURL('image/png');
+        //     // 設置下載文件名
+        //     link.download = 'chart.png';
+        //     // 模擬點擊下載
+        //     link.click();
+        // });
+
+        html2canvas(document.getElementById('data_chart_box'), {
+            backgroundColor: null, // 確保背景透明
+            scale: 2,
+            useCORS: true,
+            scrollX: 0,
+            scrollY: 0
+        }).then(function (canvas) {
+            // 創建一個 <a> 元素
             const link = document.createElement('a');
             // 將 Canvas 轉換為 Data URL
             link.href = canvas.toDataURL('image/png');
@@ -1250,7 +1332,7 @@ var chartJsBox = document.getElementById('data_chartJs_box');
 function createTable(dataArray, unit, Label_dependent_variable, Label_independent_variable,) {
     $('#chartdiv').hide();
     $('#textToChart').hide();
-    chartTitle.style.padding = "0px 0px 0px 30px";
+    chartTitle.style.padding = "15px 0px 30px 30px";
     bgImgelement.style.paddingTop = "10px";
     var table = document.createElement('table');
     table.classList.add('table', 'table_template', 'dynamic-table'); // 添加 Bootstrap 的 table 样式，如果你在使用 Bootstrap
@@ -1441,6 +1523,7 @@ function createChart(chartType, data, labels) {
                     depth: 15 // 圖表的深度
                 },
                 datalabels: datalabelsConfig,
+                backgroundColor: 'transparent',
                 // datalabels: {
                 //     formatter: function (value, context) {
                 //         // 添加单位
@@ -1476,48 +1559,7 @@ function createChart(chartType, data, labels) {
                 legend: {
                     display: false,
                 },
-                // subtitle: {
-                //     display: true,
-                //     align: 'left',
-                //     position: 'top',
-                //     text: 'Custom Chart Subtitle'
-                // },
-                // afterDatasetsDraw(chart) {
-                //     var ctx = chart.ctx;
-                //     var xAxis = chart.scales.x;
-                //     var yAxis = chart.scales.y;
-                //     var dataj = myChart.data.datasets[0].data;
-                //     console.log('after', dataj)
-                //     ctx.save();
-                //     ctx.strokeStyle = '#000'; // 虚线颜色
-                //     ctx.lineWidth = 1; // 虚线宽度
-                //     ctx.setLineDash([5, 5]); // 设置虚线样式，[虚线段长度, 间隔长度]
-                //     dataj.forEach(function (value, index) {
-                //         var xPos = xAxis.getPixelForValue(labels[index]); // 获取 x 轴位置
-                //         var yPos = yAxis.getPixelForValue(value); // 获取 y 轴位置
-                //         // console.log(xPos)
-                //         // 绘制虚线
-                //         // ctx.beginPath();
-                //         // ctx.moveTo(xPos, yPos);
-                //         // ctx.lineTo(xPos, xAxis.bottom);
-                //         // ctx.stroke();
-                //         var xLineEnd = Math.min(yPos, yAxis.bottom);
-                //         // console.log('第' + index + '條線', xPos, yPos, 'xLineEnd', xLineEnd, 'yAxis.getPixelForValue(value)', yAxis.getPixelForValue(value));
-                //         // console.log('yAxis.getPixelForValue(value)', yAxis.getPixelForValue(value))
-                //         // 绘制虚线
-                //         ctx.beginPath();
-                //         ctx.moveTo(xPos, yAxis.getPixelForValue(value));
-                //         ctx.lineTo(xPos, xAxis.top);
-                //         ctx.stroke();
-
-                //         // 添加日期标签
-                //         ctx.fillStyle = '#000'; // 文字颜色
-                //         ctx.textAlign = 'center';
-                //         // ctx.fillText(labels[index], xPos, yAxis.bottom + 20); // 将日期标签绘制在虚线下方
-
-                //     });
-                //     ctx.restore();
-                // }
+
             },
             scales: {
                 x: {
@@ -1583,48 +1625,7 @@ function createChart(chartType, data, labels) {
 
     console.log('第一次', myChart.options.legend)
 
-    // 注册 afterDraw 事件
-    // Chart.register({
-    //     id: 'afterDraw',
-    //     afterDraw: function (chart) {
-    //         // console.log('處發', chart)
-    //         // 在这里添加你的绘制代码
-    //         var ctx = chart.ctx;
-    //         var xAxis = chart.scales.x;
-    //         var yAxis = chart.scales.y;
-    //         var dataj = myChart.data.datasets[0].data;
-    //         console.log('after', dataj)
-    //         ctx.save();
-    //         ctx.strokeStyle = '#000'; // 虚线颜色
-    //         ctx.lineWidth = 1; // 虚线宽度
-    //         ctx.setLineDash([5, 5]); // 设置虚线样式，[虚线段长度, 间隔长度]
-    //         dataj.forEach(function (value, index) {
-    //             var xPos = xAxis.getPixelForValue(labels[index]); // 获取 x 轴位置
-    //             var yPos = yAxis.getPixelForValue(value); // 获取 y 轴位置
-    //             // console.log(xPos)
-    //             // 绘制虚线
-    //             // ctx.beginPath();
-    //             // ctx.moveTo(xPos, yPos);
-    //             // ctx.lineTo(xPos, xAxis.bottom);
-    //             // ctx.stroke();
-    //             var xLineEnd = Math.min(yPos, yAxis.bottom);
-    //             // console.log('第' + index + '條線', xPos, yPos, 'xLineEnd', xLineEnd, 'yAxis.getPixelForValue(value)', yAxis.getPixelForValue(value));
-    //             // console.log('yAxis.getPixelForValue(value)', yAxis.getPixelForValue(value))
-    //             // 绘制虚线
-    //             ctx.beginPath();
-    //             ctx.moveTo(xPos, yAxis.getPixelForValue(value));
-    //             ctx.lineTo(xPos, xAxis.top);
-    //             ctx.stroke();
-
-    //             // 添加日期标签
-    //             ctx.fillStyle = '#000'; // 文字颜色
-    //             ctx.textAlign = 'center';
-    //             // ctx.fillText(labels[index], xPos, yAxis.bottom + 20); // 将日期标签绘制在虚线下方
-
-    //         });
-    //         ctx.restore();
-    //     }
-    // });
+
 
     console.log(chart_bgimg_url);
 
@@ -1737,6 +1738,20 @@ togglePoints.addEventListener('change', function () {
     myChart.update();
 });
 
+// 是否顯示單位
+var toggleUnit = document.getElementById('toggleUnit');
+
+toggleUnit.addEventListener('change', function () {
+
+    if (this.checked) {
+        unit_value_box.style.display = 'block';
+
+    } else {
+        unit_value_box.style.display = 'none';
+
+    }
+
+});
 
 // 單位
 // =========================
@@ -1744,6 +1759,9 @@ var unitInput = document.getElementById('unit_data');
 
 var unit_value = document.querySelector('.unit');
 
+var unit_value_box = document.querySelector('#unit_box');
+
+
 
 // console.log('單位', unitInput)
 
@@ -1756,7 +1774,7 @@ unitInput.addEventListener('input', function () {
             span.textContent = this.value;
         });
     } else {
-        unit_value.textContent = '單位:' + this.value;
+        unit_value.textContent = this.value;
 
     }
 
@@ -1939,14 +1957,26 @@ document.addEventListener("DOMContentLoaded", function () {
 
             chart_bgimg_url = 'url(' + bgImgUrl + ')';
 
+
             if (bgImgUrl === './img/bg07.webp') {
                 chartTitle.style.color = "#ffff";
                 chartTitle.style.padding = '0px'
-            } else {
+            }
+            else {
                 chartTitle.style.color = "#1c2d6d";
             }
 
-            bgImgelement.style.backgroundImage = chart_bgimg_url;
+            if (bgImgUrl === "") {
+                chartWhitelement.style.background = "";
+                console.log('無背景');
+                bgImgelement.style.backgroundImage = "";
+                chartWhitelement.style.background = 'rgba(255, 255, 255, 0) !important;'
+            } else {
+                bgImgelement.style.backgroundImage = chart_bgimg_url;
+                chartWhitelement.style.background = "rgba(255, 255, 255, 0.5)"
+
+            }
+
 
             // bgImgelement.style.backgroundSize = 'cover'; // 調整背景圖片大小
             // bgImgelement.style.backgroundPosition = 'center'; // 調整背景圖片位置
@@ -2037,6 +2067,7 @@ function get_data(input_text_value) {
 
     }
     if (myChart) {
+        unit_value_box.style.display = 'none';
         unit_value.textContent = "";
         data = [];
         labels = [];
@@ -2058,10 +2089,11 @@ function get_data(input_text_value) {
             console.log(response);
 
 
-            if (response.data.data == "Failed to generate chart!") {
+            if (response.data.data == "未達相似度搜尋標準") {
                 alert('無法生成圖表')
                 return
             } else {
+                unit_value_box.style.display = "block";
                 var chart_info = response.data.chart_info.Title;
 
                 chartType = response.data.chart_info.Chart_type;
@@ -2091,20 +2123,23 @@ function get_data(input_text_value) {
                 if (response.data.chart_info.Unit_of_dependent_variable == "") {
                     unit_value.textContent = ""
                 } else {
-                    unit_value.textContent = '單位:' + response.data.chart_info.Unit_of_dependent_variable;
+                    unit_value.textContent = response.data.chart_info.Unit_of_dependent_variable;
 
                 }
 
+                obj.text = chartType;
 
                 dataArray = response.data.data;
 
 
                 if (chartType === "table") {
                     unit_value.textContent = "";
+                    unit_value_box.style.display = "none"
                     createTable(dataArray, unit, Label_dependent_variable, Label_independent_variable);
                     // document.getElementById('img_box_url').src = "";
 
                 } else if (chartType === "bar") {
+                    unit_value_box.style.display = 'block';
                     console.log('圖表類型bar')
                     $('#textToChart').hide();
                     extractAndGenerateChart(dataArray);
@@ -2114,6 +2149,7 @@ function get_data(input_text_value) {
 
                     generatePieChart(dataArray, pieFontSize, PieMaxWidth)
                 } else {
+                    unit_value_box.style.display = "block"
                     $('#chartdiv').hide();
                     generateChart(dataArray);
                 }
@@ -2768,3 +2804,20 @@ async function handleAudioToText(file) {
         console.log("error", error);
     }
 }
+
+
+
+
+
+
+
+Object.defineProperty(obj, 'text', {
+    get() {
+        return this._text;
+    },
+    set(newValue) {
+        console.log(`字符串从 "${this._text}" 变为 "${newValue}"`);
+        this._text = newValue;
+    }
+});
+

pngtest.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+        /* 設置body背景透明 */
+        body {
+            background-color: transparent;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        /* 設置容器div背景透明 */
+        .chart-container {
+            background-color: transparent;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+
+<body>
+    <div class="chart-container" id="capture">
+        <p>透明背景測試</p>
+        <canvas id="myChart" width="400" height="400"></canvas>
+
+    </div>
+    <br>
+    <button id="downloadBtn">Download as Transparent PNG</button>
+
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-3d@1.0.0-beta.2/dist/chartjs-plugin-3d.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
+
+    <script>
+        // 設定圖表
+        const ctx = document.getElementById('myChart').getContext('2d');
+        const myChart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+                datasets: [{
+                    label: '# of Votes',
+                    data: [12, 19, 3, 5, 2, 3],
+                    backgroundColor: [
+                        'rgba(255, 99, 132, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(255, 206, 86, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(153, 102, 255, 0.2)',
+                        'rgba(255, 159, 64, 0.2)'
+                    ],
+                    borderColor: [
+                        'rgba(255, 99, 132, 1)',
+                        'rgba(54, 162, 235, 1)',
+                        'rgba(255, 206, 86, 1)',
+                        'rgba(75, 192, 192, 1)',
+                        'rgba(153, 102, 255, 1)',
+                        'rgba(255, 159, 64, 1)'
+                    ],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                },
+                // 確保背景透明
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: 'rgba(0, 0, 0, 1)' // 修改圖例顏色以適應透明背景
+                        }
+                    }
+                },
+                responsive: true,
+                maintainAspectRatio: true,
+                backgroundColor: 'transparent'
+            }
+        });
+
+        // 下載圖片按鈕
+        document.getElementById('downloadBtn').addEventListener('click', function () {
+            const captureElement = document.getElementById('capture');
+            html2canvas(captureElement, {
+                backgroundColor: null, // 保持背景透明
+                useCORS: true // 若有跨域圖片，需設置此選項
+            }).then(function (canvas) {
+                const link = document.createElement('a');
+                link.href = canvas.toDataURL('image/png');
+                link.download = 'chart-container.png';
+                link.click();
+            });
+        });
+    </script>
+</body>
+
+</html>