Hướng dẫn tạo biểu đồ cho web với google chart

Google với website | Lập Trình PHP | 31/12/2015 | 3570 |

Google Charts cung cấp một cách hoàn hảo để hiển thị dữ liệu trên trang web của bạn. Từ biểu đồ dòng đơn giản để bản đồ cây phân cấp phức tạp, các bộ sưu tập biểu đồ cung cấp một số lượng lớn sẵn sàng để sử dụng các loại biểu đồ.

Cách phổ biến nhất để sử dụng Google Charts là với JavaScript đơn giản mà bạn nhúng trong trang web của bạn. Bạn tải một số thư viện Google Charts, danh sách các dữ liệu với các tùy chọn để điều chỉnh biểu đồ cho riêng mình, cuối cùng tạo ra một đối tượng biểu đồ với một id mà bạn chọn. Tiếp theo trong webite của mình, bạn tạo một thẻ div với id để hiển thị biểu đồ Google.

google chart

Đó là tất cả những gì bạn cần để bắt đầu.

Chart được tiếp xúc với các lớp JavaScript, và Google chart cung cấp nhiều loại biểu đồ để bạn sử dụng. Với các dữ liệu mạch định của biểu đồ sẽ giúp cho bạn dễ dàng hiểu và nắm rõ nguyên tắt hoạt động của Google Chart, và bạn luôn có thể tùy chỉnh một biểu đồ cho phù hợp với cái nhìn và cảm nhận của trang web bạn. Tính tương tác của Chart là rất cao với nhiều sự kiện, cho phép bạn kết nối chúng để tạo ra các biểu đồ phức tạp hoặc những kinh nghiệm khác tích hợp với trang web của bạn. Chart được thực hiện bằng cách sử dụng công nghệ HTML5 / SVG để cung cấp khả năng tương thích trình duyệt chéo (bao gồm cả VML cho phiên bản cũ IE) và tính di động đa nền tảng cho iPhone, iPad và Android. Người dùng của bạn sẽ không bao giờ có để gây rối với các plugin hay phần mềm nào. Nếu họ có một trình duyệt web, họ có thể nhìn thấy biểu đồ của bạn.

Tất cả các loại biểu đồ là phổ biến với dữ liệu bằng cách sử dụng các lớp DataTable, làm cho nó dễ dàng để chuyển đổi giữa các loại biểu đồ như bạn thử nghiệm để tìm lý tưởng. DataTable cung cấp phương pháp để phân loại, sửa đổi, dữ liệu lọc, và có thể được phổ biến trực tiếp từ trang web của bạn, một cơ sở dữ liệu, hoặc bất kỳ nhà cung cấp dữ liệu hỗ trợ các giao thức Chart Datasource. (Giao thức đó bao gồm một ngôn ngữ truy vấn SQL giống và được thực hiện bởi Google Spreadsheets, Google Fusion Tables, và bên thứ ba cung cấp dữ liệu như SalesForce. Bạn thậm chí có thể thực hiện các giao thức trên trang web của riêng bạn và trở thành một nhà cung cấp dữ liệu cho các dịch vụ khác.)

Ví dụ: Vẽ biểu đồ hình tròn.

Bạn tạo file bieudo.html với nội dung như đoạn code sau:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.0', {'packages':['corechart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Kết quả hiển thị trên web

biểu đồ hình tròn vẽ bằng google chart

Các bạn có thể xem thêm cách vẽ biểu đồ với google chart tại đây.