```
<!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]]
Sign in with Wallet
Connect another wallet