---
# System prepended metadata

title: Untitled

---

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>智能撲滿</title>
        <link rel="stylesheet" href="css/home.css">  <!--連結到index.css-->
        <link rel="icon" href="asset/image/logo_money.png">
        <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <body>
        <nav>
            <ul class="container-nav">
                <li class="container-nav-btn">
                    <a href="">立即試算</a>
                </li>
                <li class="container-nav-btn">
                    <a href="">關於我們</a>
                </li>
                <li class="container-nav-btn">
                    <a href="">知識＋</a>
                </li>
                <li class="container-nav-btn" id="container-nav-btn-expect">
                    <a href="">會員專區</a>
                </li>
            </ul>
        </nav>

        <!-- first paragraph -->
        <div class="container-first-paragraph">
            <div class="container-first-paragraph-pic">
                <img src="asset/image/未命名的作品 (1).png" alt="" width="500px" id="first-paragraph-pic">
            </div>
            <div class="container-first-paragraph-text">
                <p>即刻加入智能撲滿<br><br>無上限試算最適合您的投資組合</p>
                
                <button class="btn-join-us"><a href="https://www.google.com/search?q=css+%E8%A1%8C%E9%AB%98&oq=css+%E8%88%AA%E9%AB%98&aqs=chrome.1.69i57j0i10.16428j0j7&sourceid=chrome&ie=UTF-8">加入我們</a></button>
            </div>
        </div>

        <!-- second paragraph -->
        <div class="container-second-paragraph">
            <div id="container-second-paragraph-chart">
                <div id="container-chart"></div>
            </div>
            
        </div>
        <script>
            const data = {
                "1月": 12,
                "2月": 18,
                "3月": 22,
                "4月": 25,
                "5月": 32,
                "6月": 35,
                "7月": 26,
                "8月": 18
            }
    
            const container = document.querySelector('#container-chart');
            const xAxisCate = Object.keys(data);
            const seriesData = xAxisCate.map(key => data[key]);
    
            var myChart = Highcharts.chart(container, {
            chart: {
                type: "line"
            },
            title: {
                text: "您的投資組合",
            },
            subtitle: {
                // 副標題設定
            },
            caption: {
                // 圖表說明設定
            },
            credits: {
                // 版權標籤設定
            },
            xAxis: {
                categories: xAxisCate
            },
            yAxis: {
                title: {
                text: "YY"
                }
            },
            series: [{
                name: "XX",
                data: seriesData
            }]
            });    
        </script> 
    </body>
</html>
```

----------

```
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pie chart pratice</title>
    <link rel="stylesheet" href="/test.css">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
   

<figure class="highcharts-figure">
  <div id="container"></div>
  </p>
</figure>
<script>
    // Build the chart
    var result =
    [['AMAZON.COM', 50 ,'電傷平台'], 
    ['ABBOTT LABORATORIES', 30], 
    ['AES', 15], 
    ['ABIOMED', 5]];
console.log(result.length)











Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: '您的投資組合'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  accessibility: {
    point: {
      valueSuffix: '%'
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      },
      showInLegend: true
    }
  },
  series: [{
    name: '權重',
    colorByPoint: true,
    data: [{
      name: result[0][0],
      y: result[0][1],
      // sliced: true,
      // selected: true
    }, {
      name: result[1][0],
      y: result[1][1]
    }, {
      name: result[2][0],
      y: result[2][1]
    }, {
      name: result[3][0],
      y: result[3][1]
    }
    ]
  }]
});
</script>
</body>
</html>
```

-----------


```
body {
    margin: 0%;
    font-family: "GT America Black","Helvetica Neue","Helvetica",Arial,sans-serif;
}

/* button */
.btn-join-us {
    width: 120px;
    height: 45px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: bold;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
}

.btn-join-us a {
    color: inherit;  /* 移除超連結顏色 */
    text-decoration: none;  /* 移除超連結底線 */
    display: block;  /* 讓 <a> 填滿 <li> */
}
  
.btn-join-us:hover {
    background-color: #ffd65c;
    color: #fff;
    transform: translateY(-7px);
}

/* navbar */
.container-nav {
    display: flex;
    justify-content: center;
    list-style: none;  /* 移除項目符號 */
    /* background-color: beige; */
    margin: 0%;
    padding: 1%;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
}

.container-nav a {
    color: inherit;  /* 移除超連結顏色 */
    text-decoration: none;  /* 移除超連結底線 */
    display: block;  /* 讓 <a> 填滿 <li> */
    
}

.container-nav-btn {
    /* padding: 10px 20px; */
    font-weight: bold;
    letter-spacing: 1.5px;
}

.container-nav-btn:not(#container-nav-btn-expect) {
    border-color: gray;
    border: 1px;
    border-right-style: dashed;
}

.container-nav-btn-text:hover {
    background-color: #ffd65c;
    color: white;
    border-radius: 10px;
}
.container-nav-btn-text {
    margin: 0 10px;
    padding: 10px;
    /* background-color: bisque; */
}

/* first paragraph */
.container-first-paragraph {
    margin:5% 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.container-first-paragraph-pic {
    width: 50%;
    /* background-color:blue;  */
    text-align: center;
}

.container-first-paragraph-text {
    width: 50%;
    /* background-color:red;  */
    vertical-align: middle;
    letter-spacing: 2.5px;
    line-height: 30px;
    font-size: 24px;
    
}

#first-paragraph-pic {
    width: 80%;
}

#container-first-paragraph-btn-join-us {
    margin-top: 20px;
}

/* second paragraph */
.container-second-paragraph {
    /* height: 500px;
    background-color: antiquewhite; */
    margin:5% 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.container-second-paragraph-text {
    width: 40%;
    /* background-color:red;  */
    
    display: flex;
    justify-content: center;  /* 水平置中 */
    align-items: center;  /* 垂直置中 */
    letter-spacing: 2.5px;
    line-height: 40px;
    font-size: 24px;
    /* background-color: aqua; */

}

.container-second-paragraph-chart {
    width: 60%;
    /* background-color: aqua; */
}

/* third paragraph */
```

-------

```
<!DOCTYPE html>
<html lang="zh-Hant-TW">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>智能撲滿</title>
        <link rel="stylesheet" href="css/home.css">  <!--連結到index.css-->
        <link rel="icon" href="asset/image/logo_money.png">
        <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <body>
        <nav>
            <ul class="container-nav">
                <li class="container-nav-btn">
                    <div class="container-nav-btn-text">
                        <a href="login.htm">立即試算</a>
                    </div>
                </li>
                <li class="container-nav-btn">
                    <div class="container-nav-btn-text">
                        <a href="">關於我們</a>
                    </div>
                </li>
                <li class="container-nav-btn">
                    <div class="container-nav-btn-text">
                        <a href="">知識＋</a>
                    </div>
                   
                </li>
                <li class="container-nav-btn" id="container-nav-btn-expect">
                    <div class="container-nav-btn-text">
                        <a href="member.htm">會員專區</a>
                    </div>
                    
                </li>
            </ul>
        </nav>

        <!-- first paragraph -->
        <div class="container-first-paragraph">
            <div class="container-first-paragraph-pic">
                <img src="asset/image/未命名的作品 (1).png" alt="" width="500px" id="first-paragraph-pic">
            </div>
            <div class="container-first-paragraph-text">
                <p>即刻加入智能撲滿<br><br>無上限試算最適合您的投資組合</p>
                
                <button class="btn-join-us" id="container-first-paragraph-btn-join-us"><a href="https://www.google.com/search?q=css+%E8%A1%8C%E9%AB%98&oq=css+%E8%88%AA%E9%AB%98&aqs=chrome.1.69i57j0i10.16428j0j7&sourceid=chrome&ie=UTF-8">加入我們</a></button>
            </div>
        </div>

        <!-- second paragraph -->
        <div class="container-second-paragraph">
            <div class="container-second-paragraph-text">
                <p>客制化的投資組合<br>更貼合你的風險評價<br>一同攜手打造財富自由</p>
            </div>
            <div class="container-second-paragraph-chart">
                <div id="container-chart"></div>
            </div>
            
        </div>

        <!-- third paragraph -->
        
        

        <script>
            const data = {
                "1月": 12,
                "2月": 18,
                "3月": 22,
                "4月": 25,
                "5月": 32,
                "6月": 35,
                "7月": 26,
                "8月": 18
            }
    
            const container = document.querySelector('#container-chart');
            const xAxisCate = Object.keys(data);
            const seriesData = xAxisCate.map(key => data[key]);
    
            var myChart = Highcharts.chart(container, {
            chart: {
                type: "line"
            },
            title: {
                text: "您的投資組合",
            },
            subtitle: {
                // 副標題設定
            },
            caption: {
                // 圖表說明設定
            },
            credits: {
                // 版權標籤設定
            },
            xAxis: {
                categories: xAxisCate
            },
            yAxis: {
                title: {
                text: "投報率百分比"
                }
            },
            series: [{
                name: "投報率曲線",
                data: seriesData
            }]
            });    
        </script> 
    </body>
</html>

```

------------

```
<!DOCTYPE html>
<html lang="zh-Hant-TW">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>智能撲滿</title>
        <link rel="stylesheet" href="../css/member.css">  <!--連結到index.css-->
        <link rel="icon" href="../asset/image/logo_money.png">
        <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    </head>
    <body>
        
        <nav class="container-navbar">
            <ul class="container-nav">
                <li class="container-nav-logo">
                    <a href="home.htm"><img src="../asset/image/logo_pig-removebg-preview.png" alt="" width="75px" style="left: 50px; top: 5px; position: absolute;"></a>
                </li>
                <li class="container-nav-btn">
                    <div class="container-nav-btn-text">
                        <a href="invest.htm">立即試算</a>
                    </div>
                </li>
                <li class="container-nav-btn">
                    <div class="container-nav-btn-text">
                        <a href="about-us.htm">關於我們</a>
                    </div>
                </li>
                <li class="container-nav-btn">
                    <div class="container-nav-btn-text">
                        <a href="knowledge.htm">知識＋</a>
                    </div>
                   
                </li>
                <li class="container-nav-btn" id="container-nav-btn-expect">
                    <div class="container-nav-btn-text"  id="container-nav-btn-text-active">
                        <a href="member.htm">會員專區</a>
                    </div>
                    
                </li>
            </ul>
        </nav>
        <!-- first paragraph -->
        <!-- <div class="contanier-first-paragraph">
            <nav class="container-first-paragraph-nav">
                <a data-id="1">個人檔案</a>
                <a data-id="2">歷史試算紀錄</a>
            </nav>
        </div>
        <script>
            document.querySelectorAll('.container-first-paragraph-nav a').forEach(e => e.addEventListener('click', _ => change(e.dataset.id)))
        </script> -->

         <div class="container">

            <nav class="second">
                <a data-id="1">個人檔案</a>
                <a data-id="2">歷史試算紀錄</a>
            </nav>
            <main >
                <div class="active">
                    <article class="container-personial-text">
                       <article class="container-text">
                            <p>姓名：李品嫻</p>
                            <p>帳號：giftshop2658</p>
                            <p>電話：0967328055</p>
                            <p>電子郵件：10846034@ntub.edu.tw</p>
                            
                        </article>
                        <article>
                            <p>年齡：20</p>
                            <p>收入：0-10000</p>
                            <p>職業：學生</p>
                        </article> 
                    </article>
                    
                   
                </div>
                <div>
                    <article class="container-personial-text">
                        <article class="container-text">
                           <figure class="highcharts-figure">
            <article id="container" style="width: 50%;"></article>
        </figure>
                         </article> 
                     </article>
                </div>
            </main>
          
          </div>
          
        <script>
            document.querySelectorAll('nav a')
            .forEach(e => e.addEventListener('click', _ => change(e.dataset.id)))


            function change(n) {
            let panels = document.querySelectorAll('main div')
            panels.forEach(p => p.classList.remove('active'))
            panels[n - 1].classList.add('active')
            }
        </script>


  
        <script>
            // Build the chart
            var result =
            [['AMAZON.COM', 0.05 ], 
            ['ABBOTT LABORATORIES', 30], 
            ['AES', 15], 
            ['ABIOMED', 5]];
        console.log(result.length)
        
        Highcharts.chart('container', {
            chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
            },
            title: {
            text: '您的投資組合'
            },
            tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            accessibility: {
            point: {
                valueSuffix: '%'
            }
            },
            plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                enabled: false
                },
                showInLegend: true
            }
            },
            series: [{
            name: '權重',
            colorByPoint: true,
            data: [{
                name: result[0][0],
                y: result[0][1]*1000,
                // sliced: true,
                // selected: true
            }, {
                name: result[1][0],
                y: result[1][1]
            }, {
                name: result[2][0],
                y: result[2][1]
            }, {
                name: result[3][0],
                y: result[3][1]
            }
            ]
            }]
        });
        </script>
    </body>
</html>
```

------


```
body {
    margin: 0%;
    font-family: "GT America Black","Helvetica Neue","Helvetica",Arial,sans-serif;
}

/* button */
.btn-join-us {
    width: 120px;
    height: 45px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: bold;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
}

.btn-join-us a {
    color: inherit;  /* 移除超連結顏色 */
    text-decoration: none;  /* 移除超連結底線 */
    display: block;  /* 讓 <a> 填滿 <li> */
}
  
.btn-join-us:hover {
    background-color: #ffd65c;
    color: #fff;
    transform: translateY(-7px);
}

/* navbar */
.container-navbar {
    height: 80px;
    box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
}

.container-nav {
    display: flex;
    justify-content: center;
    list-style: none;  /* 移除項目符號 */
    /* background-color: beige; */
    margin: 0%;
    padding: 1%;
    
    
}

.container-nav a {
    color: inherit;  /* 移除超連結顏色 */
    text-decoration: none;  /* 移除超連結底線 */
    display: block;  /* 讓 <a> 填滿 <li> */
    
}

.container-nav-btn {
    /* padding: 10px 20px; */
    font-weight: bold;
    letter-spacing: 1.5px;
}

.container-nav-btn:not(#container-nav-btn-expect) {
    border-color: gray;
    border: 1px;
    border-right-style: dashed;
}

.container-nav-btn-text:hover {
    background-color: #ffd65c;
    color: white;
    border-radius: 10px;
}

#container-nav-btn-text-active{
    background-color: #ffd65c;
    color: white;
    border-radius: 10px;
}

.container-nav-btn-text {
    margin: 0 10px;
    padding: 10px;
    /* background-color: bisque; */
}

/* first paragraph */
.container {
    display: flex;
    margin: 5% 15%;
    /* width: 20%; */
  }
.second {
    display: flex;
    flex-direction: column;
    margin-right: 100px;
    /* background-color: seagreen; */
    cursor: pointer;
    min-width: 18%;
  }

.second a {
    padding: 20px;
    font-weight: bold;
}

.second a:hover {
    background-color: gainsboro;
    border-radius: 10px;
    display: block;
    
}

main {
    margin: 0 0 0 2%;
    
}

main div {
    display: none;
    padding: 10px;
}

.active {
    display: block;
    background-color: bisque;
    border: black;
    /* width: 80%; */
}

.container-text {
    margin-bottom: 50px;
    margin-right: 100px;
}

.container-personial-text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 40px;
    letter-spacing: 2.5px;
}

```

[['AMAZON.COM', 0.0010118917506], ['ABBOTT LABORATORIES', 0.0021446362575], ['AES', 0.0027373317373], ['ABIOMED', 0.0010968569476]]
