w3schools範例描繪台灣平均每人GDP
<html>
<style>/* CSS註解定義h1風格 */
h1{border: solid 10px red;
border-radius: 30px;
text-align: center;background-color: blue;
color: white; }
</style>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>/* 使用網路程式庫 */
<body>
<h1>台灣平均每人gdp的時間序列</h1><!--id=identity識別-->
<div id="Taiwan" style="width:100%;max-width:700px"></div>
<h1>w3schools範例:房屋面積與價格關係</h1>
<div id="myPlot" style="width:100%;max-width:700px"></div>
<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定義台灣
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
var layoutT = {
xaxis: {range: [2010, 2022], title: "西元年"},
yaxis: {range: [500000, 800000], title: "平均每人GDP台幣"},
title: "台灣平均每人GDP的時間序列"
};
// Display using Plotly
Plotly.newPlot("myPlot", data, layout);
Plotly.newPlot("Taiwan", dataT, layoutT);/* 畫台灣平均每人GDP */
</script>
</body>
</html>
留言
張貼留言