add bg img

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -277,61 +277,6 @@
         </div>
     </div>
 
-    <!-- 快捷功能-表格 -->
-    <!-- <div id="style_setting_table" class="card shadow hidden">
-        <div class="text-right">
-            <i id="style_setting_close_table" class="fa fa-times"></i>
-        </div>
-        <form class="ml-md-3 mr-md-3 my-2 chartSetting ">
-            <p class="font-weight-bold">標題位置:</p>
-            <input type="text" id="title_data" class="form-control bg-light small mb-3" placeholder="請輸入標題..."
-                aria-label="Search" aria-describedby="basic-addon2">
-            <div class="form-check form-check-inline">
-                <input class="form-check-input" value="0" type="radio" name="inlineRadioOptions" id="inlineRadio1"
-                    value="option1" checked>
-                <label class="form-check-label" for="inlineRadio1">置左</label>
-            </div>
-            <div class="form-check form-check-inline">
-                <input class="form-check-input" value="1" type="radio" name="inlineRadioOptions" id="inlineRadio2"
-                    value="option2">
-                <label class="form-check-label" for="inlineRadio2">置中</label>
-            </div>
-            <div class="form-check form-check-inline">
-                <input class="form-check-input" value="2" type="radio" name="inlineRadioOptions" id="inlineRadio3"
-                    value="option2">
-                <label class="form-check-label" for="inlineRadio3">置右</label>
-            </div>
-        </form>
-        <form class="ml-md-3 mr-md-3 my-2 chartSetting d-flex">
-            <div>
-                <p class="font-weight-bold">字體大小:</p>
-                <label class="d-none" for="table_fontSize">字體大小:</label>
-                <input type="number" value="32" step="1" class="form-control" id="table_fontSize" />
-            </div>
-        </form>
-        <form class="ml-md-3 mr-md-3 my-2 chartSetting">
-            <p class="font-weight-bold">背景圖片:</p>
-            <div class="d-flex">
-                <img class="bgImg" src="./img/bg01.webp" width="80" height="60" alt="" value="./img/bg01.webp">
-
-                <img class="bgImg ml-2" src="./img/bg02.webp" width="80" height="60" value="./img/bg02.webp" alt="">
-
-                <img class="bgImg ml-2" src="./img/bg05.webp" width="80" height="60" value="./img/bg05.webp" alt="">
-                <img class="bgImg ml-2" src="./img/bg.webp" width="80" height="60" value="./img/bg.webp" alt="">
-            </div>
-            <div class="d-flex mt-3">
-                <img class="bgImg" src="./img/bg04.webp" width="80" height="60" value="./img/bg04.webp" alt="">
-
-
-            </div>
-        </form>
-        <form class="ml-md-3 mr-md-3 my-2 chartSetting">
-            <p class="font-weight-bold">場景圖片:</p>
-            <select id="finance_options_table" class="form-control form-select" aria-label="Default select example">
-
-            </select>
-        </form>
-    </div> -->
 
     <!-- 快捷功能-圖表 -->
     <div id="style_setting" class="card shadow hidden">
@@ -472,11 +417,18 @@
                 <img class="bgImg ml-2" src="./img/bg02.webp" width="80" height="60" value="./img/bg02.webp" alt="">
 
                 <img class="bgImg ml-2" src="./img/bg05.webp" width="80" height="60" value="./img/bg05.webp" alt="">
+
                 <img class="bgImg ml-2" src="./img/bg.webp" width="80" height="60" value="./img/bg.webp" alt="">
+
             </div>
             <div class="d-flex mt-3">
                 <img class="bgImg" src="./img/bg04.webp" width="80" height="60" value="./img/bg04.webp" alt="">
 
+                <img class="bgImg ml-2" src="./img/bg06.webp" width="80" height="60" value="./img/bg06.webp" alt="">
+
+                <img class="bgImg ml-2" src="./img/bg07.webp" width="80" height="60" value="./img/bg07.webp" alt="">
+
+
 
             </div>
         </form>

js/demo/text-to-chart.js

@@ -36,7 +36,7 @@ var YfontSizeValue = 18;
 var TitlefontSizeValue = 32;
 
 
-var chart_bgimg_url = "url(./img/bg.webp)";
+var chart_bgimg_url = "url(./img/bg06.webp)";
 
 var vocab = [];
 
@@ -1402,6 +1402,12 @@ document.addEventListener("DOMContentLoaded", function () {
 
             chart_bgimg_url = 'url(' + bgImgUrl + ')';
 
+            if (bgImgUrl === './img/bg07.webp') {
+                chartTitle.style.color = "#ffff";
+            } else {
+                chartTitle.style.color = "#1c2d6d";
+            }
+
             bgImgelement.style.backgroundImage = chart_bgimg_url;
 
             // bgImgelement.style.backgroundSize = 'cover'; // 調整背景圖片大小
@@ -1452,6 +1458,7 @@ TitlefontSize.addEventListener('input', function () {
     chartTitle.style.fontSize = TitlefontSizeValue + 'px';;
 
 });
+// 標題字體顏色