Vẽ biểu đồ (chart) cho trang web bằng HTML và Google Charts
HTML
29
google charts
1
Javascript
230
Male avatar

TungVuong viết ngày 20/04/2018


Chào mọi người, trong bài viết này chúng ta sẽ tìm hiểu cách vẽ biểu đồ cho website 1 cách đơn giản dễ làm với HTML và Google Charts.

Đầu tiên các bạn tạo 1 file HTML và nhập đoạn code sau:
<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

</body>
<html>

Kế đến thêm đoạn script chứa API của google:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Cuối cùng add đoạn Javascript sau:

<script type="text/javascript">
// Load google chartsgoogle.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart valuesfunction drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Work', 8],
  ['Friends', 2],
  ['Eat', 2],
  ['TV', 3],
  ['Gym', 2],
  ['Sleep', 7]
]);

  // Optional; add a title and set the width and height of the chart  var options = {'title':'My Average Day', 'width':400, 'height':300};

  // Display the chart inside the <div> element with id="piechart"  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}</script>

Kết quả ta được biểu đồ sau
Vẽ biểu đồ (chart) cho trang web bằng HTML và Google Charts
Vẽ biểu đồ (chart) cho trang web bằng HTML và Google Charts

Các bạn xem thêm các biểu đồ khác của Google tại đây: https://google-developers.appspot.com/chart/

Hướng dẫn Get Iframe Elements bằng JavaScript

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

TungVuong

7 bài viết.
5 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
7 1
Đi backlink&nbsp;trong SEO là điều mà ai cũng phải biết và đầu tư cho nó nhiều nhất. Dưới đây, mình chia sẻ các trang web có thể đi backlink khá tố...
TungVuong viết 2 tháng trước
7 1
Male avatar
3 1
Welcome mọi người đến với 5minuteshack, nơi đơn giản hóa các kiến thức lập trình để mọi người không phải mất nhiều thời gian tìm hiểu nhiều nơi, th...
TungVuong viết 2 tháng trước
3 1
Male avatar
3 2
Hôm nay chúng ta sẽ viết một game tương tự flappy bird bằng HTML và JavaScript một cách đơn giản, bài viết không chỉ giúp bạn nâng cao khả năng lập...
TungVuong viết 2 tháng trước
3 2
Bài viết liên quan
White
41 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
41 8
White
24 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
24 8
White
6 0
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: (Link)) lên trình duyệt và nhấn Enter? Đầu tiên, t...
Lam Pham viết 4 tháng trước
6 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
5 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!