1.กำหนด library path
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
2.กำหนดขนาดด้วย style
<style> #chart {max-width: 650px; margin: 35px auto; } </style>
3.กำหนดที่สำหรับ render
<div id="chart"></div>
4.กำหนดลักษณะ chart ด้วย javascript
เช่น
<script>
var options = {
chart: {
type: 'bar' },
series: [{
name: 'sales',
data: [30,40,45,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
หมาเหตุ : มีตัวอย่างการดึงข้อมูลจาก Api มาแสดงกราฟได้ทันที
https://apexcharts.com/docs/update-charts-from-json-api-ajax/
ตย.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Axios Example </title>
<style>
#chart { max-width: 450px; margin: 35px auto; }
</style>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var options = {
series: [],
chart: {
height: 250,
type: 'bar',
},
dataLabels: {
enabled: false
},
title: {
text: 'Ajax Example',
},
noData: {
text: 'Loading...'
},
xaxis: {
type: 'category',
tickPlacement: 'on',
labels: {
rotate: -45,
rotateAlways: true
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
// AXIOS for GET DATA ///////////////////
axios({
method: 'GET',
url: 'http://223.27.246.234/poe12-opendata/apexcharts_data/daily_passenger.php',
})
.then(function(response) {
chart.updateSeries([{
name: 'Passenger-in',
data: response.data
}])
})
/////////End Axios///////////////////////
</script>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น