ChartJS – Hướng dẫn sử dụng biểu đồ ChartJS

Bài viết này hướng dẫn bạn cách tích hợp ChartJS và sử dụng biểu đồ trong ứng dụng web, các bước thực hiện khá đơn giản như sau:

  • Download ChartJS và tích hợp vào trang như sau

<script src=”Scripts/Chart.min.js” />;

  • Khai báo canvas trong HTML như sau

<canvas id=”clients” width=”500″ height=”350″></canvas>

  • Load dữ liệu cho biểu đồ và vẽ biểu đồ

<script>
var barData = {
labels: [‘Italy’, ‘UK’, ‘USA’, ‘Germany’, ‘France’, ‘Japan’],
datasets: [
{
label: ‘2010 customers #’,
fillColor: ‘#382765’,
data: [2500, 1902, 1041, 610, 1245, 952]
},
{
label: ‘2014 customers #’,
fillColor: ‘#7BC225’,
data: [3104, 1689, 1318, 589, 1199, 1436]
}
]
};

var context = document.getElementById(‘clients’).getContext(‘2d’);
var clientsChart = new Chart(context).Bar(barData);
</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s