Chèn bảng/ biểu đồ vào Blog

Chèn bảng, biểu đồ vào blog

Hướng dẫn chèn biểu đồ của google vào Blog/ website.

Hehe, hôm nay đang mày mò cách tạo biểu đồ online để làm Infographic thì vớ được bác Google cho phép tạo và nhúng luôn ^O^ Viết tut cho bà con ngay kẻo nguội :3

1. Chức năng

Chèn bảng/ biểu trực tuyến vào website/ blog. Hàng của bác Gồ đảm bảo vừa đep lại vừa nhanh.

2. Tạo bảng/ biểu đồ

Các bạn vào địa chỉ sau: http://bit.ly/OaDi6w

Nhấn Get Started để tạo biểu đồ. Theo mặc định bạn sẽ tạo được 1 biểu đồ hình tròn như trong hình.

Để chọn các loại bản đồ/ biểu đồ khác, các bạn vào Chart Gallery để tìm. http://bit.ly/1co5ePf

Có cả thảy 18 loại bảng biểu phụ vụ cho các cụ. Click vào tên bảng/ biểu để tạo.

Oh yeah, biểu đồ đây rồi. Thế nhập số liệu vào chỗ nào??? Các bác bình tĩnh đừng quăng gạch em vội >m<

Bác Google không chơi kiểu mì ăn liền nên các bạn phải tùy biến bảng biểu bằng code. Nhìn thì hơi rắc rối chứ hiểu rồi thì phê lắm :3

Kéo xuống chỗ Code it yourself on the Visualization Playground nhé

Copy toàn bộ đoạn code bên dưới, vào Blog, tạo bài mới và chuyển sang chế độ HTML rồi paste nó vào đó.

3. Hiệu chỉnh bảng/ biểu đồ

CHÚ Ý: Tuyệt đối không được xóa bất cứ loại dấu nào trong đoạn code.

Ở đây mình lấy ví dụ là biểu đồ hình tròn cho dễ ^^

Đoạn code mà bác Gồ cho chúng ta:

</center>
<html>
  <head>
    
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

// Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

// Create the data table.
        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]
        ]);

// Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

// Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

Chúng ta cần chú ý tới những đoạn sau:

Đây là tên và tỉ lệ của 5 đối tượng có trong biểu đồ. Ta có thể thêm, bớt đối tượng, thay đổi ti lệ để phù hợp với mục đích sử dụng.
Ví dụ: ['Onions', 1],
Trong đó Onions là tên của đối tượng. Phần này sẽ hiển thị ở chỗ chú thích. 1 là tỉ lệ của đối tượng đó. Các bạn có thể dùng tỷ lệ phần chục hoặc tỷ lệ phần trăm. Theo mình nên dùng tỷ lệ phần trăm cho chính xác.

How Much Pizza I Ate Last Night là tên biểu đồ.
400 là chiều ngang tính theo đơn vị pixel
300 là chiều cao tính theo đơn vị pixel
Thông thường ta nhân đôi 2 thông số này thành 600 và 400 là vừa phải. Ví dụ biểu đồ của mình:

// Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

// Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Bữa sáng', 20],
          ['Bữa trưa', 35],
          ['Bữa xế', 10],
          ['Bữa tối', 25],
          ['Bữa đêm', 10]
        ]);

// Set chart options
        var options = {'title':'Biểu đồ tỷ lệ các bữa ăn trong ngày',
                       'width':600,
                       'height':400};

Tugumi Yên Thảo

Header$type=menu

Archive Pages Design$type=blogging

Chèn bảng/ biểu đồ vào Blog

Youtube

WEEK TRENDING

Unordered List

YEAR POPULAR