plotly.js 線圖繪圖示範
將繪圖的部分寫在.js檔案中，用.html檔案呼叫繪圖的部分.js
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8">
<script src=”https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type=”text/javascript” src=”E_9_1.js”></script>
</head9>
<body>
<p>最簡單的線圖</p>
<div id=”epf” style=”width:100%;height:500px;”></div>
</body>
</html>
window.addEventListener(“load”, function() {
showplot();
})
function showplot() {
var ExpP = document.getElementById(“epf”);
Plotly.plot( ExpP, [{
x: [1, 2, 3, 4, 5, 6, 7],
y: [0.125, 0.25, 0.5, 1, 2, 4, 8],
marker: {
color: ‘DodgerBlue’
} }], {
margin: { t: 1 } } );
}
<二>
window.addEventListener(“load”, function() {
showplot();
})
function showplot() {
var ExpP = document.getElementById(“epf”);
var xi = []; var yi = [];
for (i = 1; i <= 7; i+=1) {
xi[i-1] = i;
yi[i-1] = Math.pow(2, i);
}
console.log(xi);
console.log(yi);
Plotly.plot( ExpP, [{
x: xi,
y: yi,
marker: {
color: ‘red’
} }], {
margin: { t: 1 } } );
}
<三>
window.addEventListener(“load”, function() {
showplot();
})
function showplot() {
var ExpP = document.getElementById(“epf”);
var xi = []; var yi = []; var k = 0;
for (i = 0; i < 5.5; i=i+0.05) {
xi[k] = i;
yi[k] = Math.cos(Math.sqrt(i));
k+=1;
}
console.log(k);
Plotly.plot( ExpP, [{
x: xi,
y: yi,
type: ‘bar’,
marker: {
color: ‘DarkOrange’
}
}]);
}
ChartType
line
bar
area
pie
histgram
box
contour
scatter
surface
mesh
time series
candlestick
ohlc
