andy
/
Sanlih-Entertainment-Television


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730
							<!DOCTYPE html>
<html lang="zh-TW">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Sanlih Entertainment Television</title>

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">


</head>

<body id="page-top">
    <!-- Page Wrapper -->
    <div id="wrapper" style="height: 130vh;">
        <!-- Sidebar -->
        <ul class="navbar-nav sidebar sidebar-dark accordion toggled d-none" id="accordionSidebar">

            <!-- Divider -->
            <hr class="sidebar-divider my-0">

            <!-- Nav Item - Dashboard -->
            <li class="nav-item active">
                <a class="nav-link p-0" href="index.html">
                    <!-- <i class="fas fa-fw fa-tachometer-alt"></i> -->
                    <!-- <span>Dashboard</span></a> -->
            </li>


            <!-- Divider -->
            <!-- <hr class="sidebar-divider d-none d-md-block"> -->

            <!-- Sidebar Toggler (Sidebar) -->
            <div class="text-center d-none">
                <button class="rounded-circle border-0" id="sidebarToggle"></button>
            </div>


        </ul>
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">
                <!-- Topbar -->
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-2 static-top shadow">
                    <!-- Sidebar - Brand -->
                    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
                        <div class="sidebar-brand-icon">
                            <!-- <i class="fas fa-laugh-wink"></i> -->
                            <img src="./img/iNEWS-logo.svg" width="120px" alt="">
                        </div>
                        <!-- <div class="sidebar-brand-text mx-3">TEXT-TO-CHART</div> -->
                    </a>
                    <!-- Sidebar Toggle (Topbar) -->
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <i class="fa fa-bars"></i>
                    </button>
                    <!-- Topbar Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <!-- Nav Item - Search Dropdown (Visible Only XS) -->
                        <li class="nav-item dropdown no-arrow d-sm-none">
                            <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-search fa-fw"></i>
                            </a>
                            <!-- Dropdown - Messages -->
                            <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                                aria-labelledby="searchDropdown">
                                <form class="form-inline mr-auto w-100 navbar-search">
                                    <div class="input-group">
                                        <input type="text" class="form-control bg-light border-0 small"
                                            placeholder="Search for..." aria-label="Search"
                                            aria-describedby="basic-addon2">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button">
                                                <i class="fas fa-search fa-sm"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </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>

                        <!-- Nav Item - User Information -->
                        <li class="nav-item dropdown no-arrow">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="mr-2 d-none d-lg-inline text-gray-600 small" id="userName"></span>
                                <img class="img-profile rounded-circle" src="img/undraw_profile.svg">
                            </a>
                            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                                aria-labelledby="userDropdown">
                                <a id="logout" class="dropdown-item" data-toggle="modal" data-target="#logoutModal">
                                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                    登出
                                </a>
                            </div>
                        </li>
                    </ul>
                </nav>
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">
                    <div id="example_box" class="centered-div">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="card example h-100" data-value="台股-2330 台積電 2024年每日收盤價"
                                    onclick="handleClick(this)">
                                    <p><svg id="line-icon" class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 512 512">
                                            <path
                                                d="M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z" />
                                        </svg>折線圖:</p>
                                    <p>台股-2330 台積電 2024年每日收盤價</p>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card example  h-100" data-value="近一個月總計最多交易量的10支台股"
                                    onclick="handleClick(this)">

                                    <p><svg id="bar-icon" class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 512 512">
                                            <path
                                                d="M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z" />
                                        </svg>柱狀圖:</p>
                                    <p>近一個月總計最多交易量的10支台股</p>

                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card example  h-100" data-value="台股各產業市值占比" onclick="handleClick(this)">

                                    <p><svg id="pie-icon" class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 512 512">
                                            <path
                                                d="M527.79 288H290.5l158.03 158.03c6.04 6.04 15.98 6.53 22.19.68 38.7-36.46 65.32-85.61 73.13-140.86 1.34-9.46-6.51-17.85-16.06-17.85zm-15.83-64.8C503.72 103.74 408.26 8.28 288.8.04 279.68-.59 272 7.1 272 16.24V240h223.77c9.14 0 16.82-7.68 16.19-16.8zM224 288V50.71c0-9.55-8.39-17.4-17.84-16.06C86.99 51.49-4.1 155.6.14 280.37 4.5 408.51 114.83 513.59 243.03 511.98c50.4-.63 96.97-16.87 135.26-44.03 7.9-5.6 8.42-17.23 1.57-24.08L224 288z" />
                                        </svg>圓餅圖:</p>
                                    <p>台股各產業市值占比</p>
                                </div>
                            </div>
                            <div class="col-lg-3 ">
                                <div class="card example  h-100" data-value="比較2021年和2024年nvda平均股價"
                                    onclick="handleClick(this)">

                                    <p><svg id="table-icon" class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 512 512">
                                            <path
                                                d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z" />
                                        </svg>表格:</p>
                                    <p>比較2021年和2024年nvda平均股價</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row d-flex flex-wrap mb-4">
                        <div class="col-xl-5 col-lg-5 chartSettingBox d-none">
                            <div class="card shadow mb-4 h-100 pb-5">
                                <div
                                    class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                                    <h6 class="m-0 font-weight-bold text-primary">關鍵字輸入</h6>
                                    <div class="dropdown no-arrow">
                                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                                            aria-labelledby="dropdownMenuLink">
                                            <div class="dropdown-header">Dropdown Header:</div>
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-none d-sm-inline-block ml-md-3 mr-md-3 my-2 my-md-3 mw-100">
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-8 mb-1">
                            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between border-0 py-0"
                                style="background: none;">
                                <h6 class="m-0 font-weight-bold text-primary d-none">圖表輸出</h6>
                                <!-- <p>語音辨識結果:<span id="record_text"> </span></p> -->
                                <!-- <div class="text-center">
                                    <button id="downloadButton">下載圖表</button>
                                </div> -->
                                <!-- <div class="dropdown no-arrow">
                                    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                                        aria-labelledby="dropdownMenuLink">
                                        <div class="dropdown-header">Dropdown Header:</div>
                             
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <div class="col-xl-8 col-lg-8 chartSettingBox">
                            <!-- <div style="background: none; border: none;" class="mb-4"> -->
                            <!-- Card Header - Dropdown -->

                            <!-- Card Body -->
                            <div class="card-body chart_background p-0 chartSettingBox2">
                                <div class="chart-area">
                                    <div id="chartDataLoading" class="h-100">
                                        <div class="d-flex justify-content-center align-items-center h-100">
                                            <div class="spinner-border" role="status">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="chart_box">
                                        <div class="d-flex justify-content-between mb-3">
                                            <select id="chartType" class="chartType">
                                                <option value="">圖表類型</option>
                                                <option value="line">折線圖</option>
                                                <option value="bar">柱狀圖</option>
                                                <option value="doughnut">圓餅圖</option>
                                            </select>
                                            <button id="downloadButton">下載圖表</button>
                                        </div>
                                        <!-- <div id="legend" class="mt-3"></div> -->
                                        <div id="data_chart_box" class="chart_box2" style="position: relative;">
                                            <h2 class="chart_title"></h2>
                                            <!-- <div style="padding:0px 30px 30px;"> -->
                                            <div id="data_chartJs_box"
                                                style="position: relative;  height: auto; text-align: center;">
                                                <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>
                                            </div>

                                            <div id="unit_box" class="unit_box">
                                                <div class="unit_value">
                                                    <span>單</span>
                                                    <span>位</span>
                                                    <span>:</span>
                                                    <span class="unit">


                                                    </span>
                                                </div>
                                            </div>
                                            <!-- </div> -->
                                            <div id="img_box" class="img_box">
                                                <img id="img_box_url" src="" alt="">
                                            </div>
                                        </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="Ex:台股-2330 台積電、台股-2454 聯發科" aria-label="Search"
                                            aria-describedby="basic-addon2">
                                        <div id="suggestions_compare" class="autocomplete-suggestions2"></div>
                                        <div class="input-group-append">
                                            <button id="data_compare" class="btn btn-primary" type="button">
                                                <!-- <i class="fas fa-search fa-sm"></i> -->
                                                比較
                                            </button>

                                        </div>

                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
                <!-- /.container-fluid -->
                <div style="background: #fff;" id="fixed_button">
                    <!-- <div> -->
                    <div class="d-flex">
                        <div class="input-group">
                            <input type="text" id="keyword_data" class="form-control bg-white small"
                                placeholder="請輸入關鍵字..." aria-label="Search" aria-describedby="basic-addon2">
                            <div id="suggestions" class="autocomplete-suggestions"></div>
                            <div class="input-group-append">
                                <button class="btn btn-primary" id="send_data" type="button">
                                    <!-- <i class="fas fa-search fa-sm"></i> -->
                                    送出
                                </button>
                                <button class="btn btn-danger ml-2" id="cancel_send_data" type="button">
                                    <!-- <i class="fas fa-search fa-sm"></i> -->
                                    取消
                                </button>

                            </div>
                        </div>
                        <button id="recording_button" class="speechToText" type="button">
                            <img class="microphone" width="40" height="40" src="./img/microphone.png" alt="microphone">
                        </button>

                    </div>


                    <!-- </div> -->
                </div>

                <div style="background: #fff;" id="recording_block" class="hidden">
                    <div class="text-right">
                        <i id="recording_block_close" class="fa fa-times"></i>
                    </div>
                    <div class="row">
                        <div class="col-lg-6 d-flex justify-content-center align-items-center">
                            <p class="recording mb-0">錄音中....</p>
                            <div class="mainBox d-none">
                                <div class="reclog"></div>
                            </div>
                            <div style="padding-top:5px">
                                <!-- <div style="border:1px solid #ccc;display:inline-block;vertical-align:bottom">
                                    <div style="height:100px;width:300px;" class="recwave"></div>
                                </div> -->
                                <div class="ml-5" style="height:40px;width:300px;background:#fff;position:relative;">
                                    <div class="recpowerx" style="height:40px;background:#0B1;position:absolute;"></div>
                                    <div class="recpowert"
                                        style="padding-left:50px; line-height:40px; position: relative;">
                                    </div>
                                </div>
                                <!-- <button onclick="recPlay()" reclang="uwNo">播放</button> -->
                            </div>
                            <audio class="recPlay" controls style="display:none;width:100%"></audio>

                        </div>
                        <div class="col-lg-6 d-flex justify-content-center">
                            <button id="stop">
                                <div class="circle-div">
                                    <img src="./img/stop-button.png" alt="">
                                </div>
                            </button>

                        </div>
                    </div>


                </div>
            </div>
            <!-- End of Main Content -->
            <!-- <div id="fixed_button">
                <div>
                    <div class="input-group">
                        <input type="text" id="keyword_data" class="form-control bg-white small" placeholder="請輸入關鍵字..."
                            aria-label="Search" aria-describedby="basic-addon2">
                        <div id="suggestions" class="autocomplete-suggestions"></div>
                        <div class="input-group-append">
                            <button class="btn btn-primary" id="send_data" type="button">
               
                                送出
                            </button>
                        </div>
                    </div>
                </div>
            </div> -->

            <!-- Footer -->
            <!-- <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright &copy; 2023</span>
                    </div>
                </div>
            </footer> -->
            <!-- End of Footer -->

        </div>


    </div>


    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded d-none" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <!-- 快捷功能 -->
    <div id="chart_seeting_button" class="setting_button">
        <div class="setting_button_content">
            <img src="./img/exchange.png" class="mb-2" width="20px" alt="">
            快捷功能
        </div>
    </div>


    <!-- 快捷功能-圖表 -->
    <div id="style_setting" class="card shadow hidden">
        <div class="text-right">
            <i id="style_setting_close" class="fa fa-times"></i>
        </div>

        <form id="chart_category" class="ml-md-3 mr-md-3 my-2 chartSetting d-none">
            <div>
                <p class="font-weight-bold">圖表類型:</p>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="ChartOptions" id="inlineRadio4" value="line">
                    <label class="form-check-label" for="inlineRadio4">折線圖</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="ChartOptions" id="inlineRadio5" value="bar">
                    <label class="form-check-label" for="inlineRadio5">柱狀圖</label>
                </div>
                <!-- <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="ChartOptions" id="inlineRadio6" value="pie">
                    <label class="form-check-label" for="inlineRadio6">圓餅圖</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="ChartOptions" id="inlineRadio7" value="table">
                    <label class="form-check-label" for="inlineRadio7">表格</label>
                </div> -->
            </div>
        </form>
        <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%;">
                    <input type="text" id="title_data" class="form-control bg-light small mb-3" placeholder="請輸入標題..."
                        aria-label="Search" aria-describedby="basic-addon2">
                </div>
                <div style="width: 20%; margin-left: 5px;">
                    <input type="number" value="32" step="1" class="form-control" id="TitlefontSize" />

                </div>


            </div>


            <!-- <p class="font-weight-bold">標題位置:</p>  -->
            <div class="mb-2">
                <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>
            </div>
            <div id="unit_input">
                <p class="font-weight-bold">單位:</p>
                <input type="text" id="unit_data" class="form-control bg-light small mb-3" aria-label="Search2"
                    aria-describedby="basic-addon2" placeholder="請小於七個字">
            </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">

            <div>
                <p class="font-weight-bold">標題字體大小:</p>
                <label class="d-none" for="TitlefontSize">字體大小:</label>
                <input type="number" value="32" step="1" class="form-control" id="TitlefontSize" />
            </div>
        </form> -->

        <form class="ml-md-3 mr-md-3 my-2 chartSetting d-none">
            <div>
                <p class="font-weight-bold">縱軸:</p>

            </div>
            <div class="ml-4 d-flex">
                <div>
                    <!-- <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" /> -->
                </div>

            </div>
        </form>
        <form id="pie_setting" class="ml-md-3 mr-md-3 my-2 chartSetting">
            <div>
                <p class="font-weight-bold">字體大小:</p>
                <label class="d-none" for="table_fontSize">字體大小:</label>
                <input type="number" value="14" step="1" class="form-control mb-3" id="pie_fontSize" />

                <p class="font-weight-bold">標籤寬度:</p>

                <input type="range" id="PieMaxWidthRange" min="50" max="200" step="10" value="100">
            </div>
        </form>
        <form id="table_setting" class="ml-md-3 mr-md-3 my-2 chartSetting">
            <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>
        <div id="lineChartSetting">
            <form class="ml-md-3 mr-md-3 my-2 chartSetting">
                <p class="font-weight-bold">橫縱軸字體大小:</p>
                <label class="d-none" for="XfontSize">字體大小:</label>
                <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>
                        <p class="font-weight-bold">線條粗細:</p>
                        <label for="borderWidthRange" class="form-label d-none">線條粗細</label>
                        <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 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">
                    </div>
                </div>
                <div>
                </div>


                <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" />
                </div>

                <div class="mt-3 d-flex">
                    <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 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>
        </div>

        <div id="barChartSetting">
            <form class="ml-md-3 mr-md-3 my-2 chartSetting">
                <p class="font-weight-bold">橫軸字體大小:</p>
                <label class="d-none" for="XfontSize">字體大小:</label>
                <input type="number" value="14" step="1" class="form-control" id="XfontSizeBar" />
            </form>
            <form class="ml-md-3 mr-md-3 my-2 chartSetting">
                <p class="font-weight-bold">縱軸字體大小:</p>
                <label class="d-none" for="XfontSize">字體大小:</label>
                <input type="number" value="14" step="1" class="form-control" id="YfontSizeBar" />
            </form>
            <form class="ml-md-3 mr-md-3 my-2 chartSetting">
                <div id="borderSetting" class="borderWidth d-flex">
                    <div>
                        <p style="margin-bottom: 10px;" class="font-weight-bold">柱狀顏色:</p>
                        <label for="exampleColorInput" class="form-label d-none">線條顏色</label>
                        <input type="color" class="form-control form-control-color" id="borderColorInputBar"
                            value="#288D97" title="Choose your color">
                    </div>
                </div>
                <div>
                </div>
            </form>
        </div>

        <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="">

                <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 class="bgImg ml-2 d-flex align-items-center justify-content-center" value="" width="80" height="80"
                    style="border:1px solid #e3e6f0;">
                    <p style="width: 80px" class="mb-0 text-center">無</p>
                </div>

            </div>
        </form>
        <form class="ml-md-3 mr-md-3 my-2 chartSetting">
            <p class="font-weight-bold">場景圖片:</p>
            <select id="finance_options" class="form-control form-select" aria-label="Default select example">

            </select>
        </form>
    </div>


    <!-- Bootstrap core JavaScript-->
    <script src="./vendor/jquery/jquery.min.js"></script>

    <script src="./vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Core plugin JavaScript-->
    <script src="./vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
    <script src="./js/sb-admin-2.min.js"></script>

    <!-- Page level plugins -->
    <!-- <script src="vendor/chart.js/Chart.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>

    <!-- Page level custom scripts -->
    <script src="./vendor/datatables/jquery.dataTables.min.js"></script>
    <script src="./vendor/datatables/dataTables.bootstrap4.min.js"></script>

    <!-- amcharts -->
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>


    <script src="./src/recorder-core.js"></script> <!--必须引入的录音核心-->
    <script src="./src/engine/mp3.js"></script> <!--相应格式支持文件-->
    <script src="./src/engine/mp3-engine.js"></script> <!--如果此格式有额外的编码引擎的话，也要加上-->
    <script src="./src/extensions/frequency.histogram.view.js"></script>

    <script src="./src/extensions/lib.fft.js"></script>

    <script src="./js/demo/text-to-chart.js"></script>


    <!-- <script src="./js/demo/microphone.js"></script> -->


</body>

</html>