W3schools範例製作台灣平均每人GDP和西元年關係
<html>
<style>/* 註解定義h1的風格類型 */
h1{border: 10px solid #fff5ee;
border-radius: 20px;
text-align: center;
background-color: #ffcccb;
color: white;
padding: 5px;
}
</style>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<h1>台灣平均每人GDP與西元年關係</h1>
<div id="Taiwan" style="width:100%;max-width:700px"></div>
<h1>w3schools範例:房價與面積</h1>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<h1>學習心得</1>
今天學的程式設計非常有趣且有深度。
<script>
var xArray = [50,60,70,80,90,100,110,120,130,140,150];
var yArray = [7,8,8,9,9,9,10,11,14,14,15];
/* 以下台灣資料GDP */
var xArrayT = [2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021];
var yArrayT = [527186,537021,565198,607264,633367,650854,667945,677201,691326,726396,797546];
// Define Data定義資料
var data = [{
x:xArray,
y:yArray,
mode:"markers"
}];
// Define Data定義資料台灣GDP
var dataT = [{
x:xArrayT,
y:yArrayT,
mode:"markers"
}];
// Define Layout 定義圖形的配置
var layout = {
xaxis: {range: [40, 160], title: "平方公尺Square Meters"},
yaxis: {range: [5, 16], title: "價格百萬美元Price in Millions"},
title: "房價與面積關係House Prices vs. Size"
};
// Define Layout 定義圖形的配置畫台灣GDP
var layoutT = {
xaxis: {range: [2011, 2022], title: "西元年"},
yaxis: {range: [500000, 800000], title: "平均每人GDP台幣"},
title: "台灣平均每人GDP"
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
Plotly.newPlot("Taiwan", dataT, layoutT);
</script>
</body>
</html>
https://html-css-javascript-java.blogspot.com/2022/10/w3schoolsgdp.html
留言
張貼留言