andy
/
Sanlih-Entertainment-Television


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
							<!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">
        <!-- 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"><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">User</span>
                                <img class="img-profile rounded-circle" src="img/undraw_profile.svg">
                            </a>
                        </li>
                    </ul>
                </nav>
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">
                    <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>

                                <!-- <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 class="card shadow mb-4 h-100">
                                <!-- 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="text-right">
                                                <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;">
                                                        <canvas id="textToChart"></canvas>
                                                        <!-- <div id="chart-label"></div> -->
                                                        <!-- <div class="chart-line" id="chart-line"></div> -->

                                                        <div id="chartdiv"></div>


                                                    </div>

                                                </div>
                                                <div id="img_box" class="img_box">
                                                    <img id="img_box_url" src="" alt="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- /.container-fluid -->
                <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">
                                <!-- <i class="fas fa-search fa-sm"></i> -->
                                送出
                            </button>
                        </div>
                    </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_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">
        <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>
            <input type="text" id="title_data" class="form-control bg-light small mb-3" placeholder="請輸入標題..."
                aria-label="Search" aria-describedby="basic-addon2">
            <p class="font-weight-bold">標題位置:</p>
            <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">

            <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>
                <input type="text" id="unit_data" class="form-control bg-light small mb-3" placeholder="請輸入單位..."
                    aria-label="Search" aria-describedby="basic-addon2">
            </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="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">
                <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="range" 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 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="borderColorInput"
                            value="#912B2B" title="Choose your color">
                    </div>
                </div>
                <div>
                </div>
                <input type="checkbox" id="togglePoints"> 顯示數據點
            </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="">


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

    <div style="height:300px">

    </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="./js/demo/text-to-chart.js"></script>


</body>

</html>