biểu đồ Google - Dongthoigian.net https://dongthoigian.net/tag/bieu-do-google/ Wed, 15 Nov 2023 06:17:09 +0000 vi hourly 1 https://wordpress.org/?v=6.7.2 https://dongthoigian.net/wp-content/uploads/2025/02/cropped-dongthoigian_huedc-32x32.png biểu đồ Google - Dongthoigian.net https://dongthoigian.net/tag/bieu-do-google/ 32 32 241113670 Biểu đồ Google – Đường xu hướng hàm mũ https://dongthoigian.net/bieu-do-google-duong-xu-huong-ham-mu/ https://dongthoigian.net/bieu-do-google-duong-xu-huong-ham-mu/#respond Wed, 15 Nov 2023 06:16:43 +0000 https://dongthoigian.net/?p=17187 Cú pháp cấu hình biểu đồ của Google

The post Biểu đồ Google – Đường xu hướng hàm mũ appeared first on Dongthoigian.net.

]]> Sau đây là một ví dụ về biểu đồ đường xu hướng hàm mũ. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng cấu hình đường xu hướng để hiển thị sơ đồ đường xu hướng.

var options = {
   trendlines: { 0: {type: 'exponential'} }    // Draw a trendline for data series 0.
};

Ví dụ

googlecharts_trendlines_exponential.htm

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Age');
            data.addColumn('number', 'Weight');
            data.addRows([
               [ 8,      12],
               [ 4,      5.5],
               [ 11,     14],
               [ 4,      5],
               [ 3,      3.5],
               [ 6.5,    7]
            ]);
               
            // Set chart options
            var options = {
               'title':'Age vs Weight',
               'width':550,
               'height':400,
               'legend': 'none',
               trendlines: { 0: {type: 'exponential'} }   // Draw a trendline for data series 0.
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.ScatterChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Xác minh kết quả.

Cú pháp cấu hình biểu đồ của Google

Biểu đồ Google – Đường xu hướng đa thức

Sau đây là một ví dụ về biểu đồ đường xu hướng đa thức. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng cấu hình đường xu hướng để hiển thị sơ đồ đường xu hướng.

var options = {
   trendlines: { 0: {
      type: 'polynomial',
      degree: 3,
      visibleInLegend: true,}
   }	  // Draw a trendline for data series 0.
};

Ví dụ

googlecharts_trendlines_polynomial.htm

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Age');
            data.addColumn('number', 'Weight');
            data.addRows([
               [ 8,      12],
               [ 4,      5.5],
               [ 11,     14],
               [ 4,      5],
               [ 3,      3.5],
               [ 6.5,    7]
            ]);
               
            // Set chart options
            var options = {
               'title':'Age vs Weight',
               'width':550,
               'height':400,
               'legend': 'none',
               trendlines: { 0: 
                  {
                     type: 'polynomial',
                     degree: 3,
                     visibleInLegend: true,
                  }
               }	// Draw a trendline for data series 0.
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.ScatterChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Xác minh kết quả.

Cú pháp cấu hình biểu đồ của Google

The post Biểu đồ Google – Đường xu hướng hàm mũ appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-google-duong-xu-huong-ham-mu/feed/ 0 17187 Biểu đồ Google – Tô màu biểu đồ dòng thời gian https://dongthoigian.net/bieu-do-google-to-mau-bieu-do-dong-thoi-gian/ https://dongthoigian.net/bieu-do-google-to-mau-bieu-do-dong-thoi-gian/#respond Wed, 15 Nov 2023 05:39:26 +0000 https://dongthoigian.net/?p=17180 Tìm hiểu google charts Biểu đồ TreeMap

The post Biểu đồ Google – Tô màu biểu đồ dòng thời gian appeared first on Dongthoigian.net.

]]> Sau đây là ví dụ về biểu đồ dòng thời gian với màu tùy chỉnh. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng cấu hình dòng thời gian để ẩn nhãn hàng.

// Set chart options
var options = {
   colors: ['#cbb69d', '#603913', '#c69c6e']
};

Ví dụ

googlecharts_timelines_color.htm

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi"></script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['timeline']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            
            data.addColumn({ 
               type: 'string', id: 'President'
            });
            
            data.addColumn({ 
               type: 'date', id: 'Start' 
            });
            
            data.addColumn({ 
               type: 'date', id: 'End'
            });
            
            data.addRows([
               [ 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
               [ 'John Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
               [ 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]
            ]);

            var options = {      
               width: '100%', 
               height: '100%',
               colors: ['#cbb69d', '#603913', '#c69c6e']
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.Timeline(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Xác minh kết quả.

Biểu đồ TreeMap

Biểu đồ của Google – Biểu đồ TreeMap

TreeMap là biểu diễn trực quan của cây dữ liệu, trong đó mỗi nút có thể có 0 hoặc nhiều nút con và một nút cha (ngoại trừ nút gốc). Mỗi nút được hiển thị dưới dạng hình chữ nhật, có thể thay đổi kích thước và tô màu theo các giá trị mà chúng ta chỉ định. Kích thước và màu sắc có giá trị tương đối so với tất cả các nút khác trong biểu đồ. Sau đây là một ví dụ về biểu đồ dạng cây. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng lớp TreeMap để hiển thị sơ đồ cây.

//TreeMap chartvar chart = new google.visualization.TreeMap(document.getElementById(‘container’));

Ví dụ

googlecharts_treemap.htm

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['treemap']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([
               ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
               ['Global',    null,                 0,                               0],
               ['America',   'Global',             0,                               0],
               ['Europe',    'Global',             0,                               0],
               ['Asia',      'Global',             0,                               0],
               ['Australia', 'Global',             0,                               0],
               ['Africa',    'Global',             0,                               0],  
               
               ['USA',       'America',            52,                              31],
               ['Mexico',    'America',            24,                              12],
               ['Canada',    'America',            16,                              -23],
               
               ['France',    'Europe',             42,                              -11],
               ['Germany',   'Europe',             31,                              -2],
               ['Sweden',    'Europe',             22,                              -13],   
               
               ['China',     'Asia',               36,                              4],
               ['Japan',     'Asia',               20,                              -12],
               ['India',     'Asia',               40,                              63],                  
               
               ['Egypt',     'Africa',             21,                              0],          
               ['Congo',     'Africa',             10,                              12],
               ['Zaire',     'Africa',             8,                               10]
            ]);
            var options = {      
               minColor: '#f00',
               midColor: '#ddd',
               maxColor: '#0d0',
               headerHeight: 15,
               fontColor: 'black',
               showScale: true
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.TreeMap(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Xác minh kết quả.

Biểu đồ TreeMap

Biểu đồ Google – Biểu đồ đường xu hướng

Đường xu hướng là một đường được xếp chồng lên biểu đồ để thể hiện hướng chung của dữ liệu. Biểu đồ của Google có thể tự động tạo các đường xu hướng cho Biểu đồ Sankey, Biểu đồ phân tán, Biểu đồ vùng từng bước, Bảng, Mốc thời gian, Bản đồ cây, Đường xu hướng, Biểu đồ thanh, Biểu đồ cột và Biểu đồ đường.. Chúng ta sẽ thảo luận về các loại biểu đồ đường xu hướng sau.

Biểu đồ Google – Đường xu hướng cơ bản

Sau đây là một ví dụ về biểu đồ đường xu hướng cơ bản. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng cấu hình đường xu hướng để hiển thị sơ đồ đường xu hướng.

var options = {
   trendlines: { 0: {} }    // Draw a trendline for data series 0.
};

Ví dụ

googlecharts_trendlines_basic.htm

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Age');
            data.addColumn('number', 'Weight');
            data.addRows([
               [ 8,      12],
               [ 4,      5.5],
               [ 11,     14],
               [ 4,      5],
               [ 3,      3.5],
               [ 6.5,    7]
            ]);
               
            // Set chart options
            var options = {
               'title':'Age vs Weight',
               'width':550,
               'height':400,
               'legend': 'none',
               trendlines: { 0: {} }    // Draw a trendline for data series 0.
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.ScatterChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Xác minh kết quả.

Biểu đồ TreeMap

Xem thêm : Biểu đồ Google – Đường xu hướng hàm mũ

The post Biểu đồ Google – Tô màu biểu đồ dòng thời gian appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-google-to-mau-bieu-do-dong-thoi-gian/feed/ 0 17180 Biểu đồ Google – Biểu đồ thanh có nhãn dữ liệu https://dongthoigian.net/bieu-do-google-bieu-do-thanh-co-nhan-du-lieu/ https://dongthoigian.net/bieu-do-google-bieu-do-thanh-co-nhan-du-lieu/#respond Sat, 28 Oct 2023 10:51:10 +0000 https://dongthoigian.net/?p=17065 cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google 

The post Biểu đồ Google – Biểu đồ thanh có nhãn dữ liệu appeared first on Dongthoigian.net.

]]> Sau đây là ví dụ về biểu đồ thanh có nhãn dữ liệu. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng vai trò làm cấu hình chú thích để hiển thị nhãn dữ liệu trong biểu đồ thanh

var data = google.visualization.arrayToDataTable([
   ['Year', 'Asia', { role: 'annotation'} ,'Europe', { role: 'annotation'}],
   ['2012',  900,'900',      390, '390']
]);

Ví dụ

googlecharts_bar_labels.htm Bản thử trực tiếp

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Asia', { role: 'annotation'} ,'Europe', { role: 'annotation'}],
               ['2012',  900,'900',      390, '390'],
               ['2013',  1000,'1000',      400,'400'],
               ['2014',  1170,'1170',      440,'440'],
               ['2015',  1250,'1250',       480,'480'],
               ['2016',  1530,'1530',      540,'540']
            ]);

            var options = {title: 'Population (in millions)', isStacked:'percent'};  

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Kết quả Xác minh kết quả.

Biểu đồ Google

Biểu đồ của Google – Biểu đồ bong bóng

Biểu đồ của Google – Biểu đồ bong bóng cơ bản

Sau đây là một ví dụ về biểu đồ bong bóng cơ bản. Biểu đồ bong bóng được sử dụng để trực quan hóa tập dữ liệu có từ hai đến bốn chiều. Hai chiều đầu tiên được hiển thị dưới dạng tọa độ, chiều thứ ba là màu sắc và chiều thứ tư là kích thước. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng lớp BubbleChart để hiển thị biểu đồ dựa trên bong bóng.

//bubble chartvar chart = new google.visualization.BubbleChart(document.getElementById(‘container’));

Ví dụ

googlecharts_bubble_basic.htm Bản thử trực tiếp

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Id');
            data.addColumn('number', 'Age');
            data.addColumn('number', 'Weight');
            data.addRows([
               [ '', 8,      12],
               [ '', 4,      5.5],
               [ '', 11,     14],
               [ '', 4,      5],
               [ '', 3,      3.5],
               [ '', 6.5,    7]
            ]);
               
            // Set chart options
            var options = {'title':'Age vs Weight', 'width':550, 'height':400};

            // Instantiate and draw the chart.
            var chart = new google.visualization.BubbleChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Kết quả Xác minh kết quả.

Biểu đồ của Google

Biểu đồ của Google – Biểu đồ bong bóng có nhãn

Sau đây là ví dụ về biểu đồ bong bóng có nhãn dữ liệu. Biểu đồ bong bóng được sử dụng để trực quan hóa tập dữ liệu có từ hai đến bốn chiều. Hai chiều đầu tiên được hiển thị dưới dạng tọa độ, chiều thứ ba là màu sắc và chiều thứ tư là kích thước. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng lớp BubbleChart để hiển thị biểu đồ dựa trên bong bóng.

//area chart
var chart = new google.visualization.BubbleChart(document.getElementById('container'));

Ví dụ

googlecharts_bubble_labels.htm Bản thử trực tiếp

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Id');
            data.addColumn('number', 'Age');
            data.addColumn('number', 'Weight');
            data.addRows([
               [ 'Robert', 8,      12],
               [ 'Mohan', 4,      5.5],
               [ 'Ramesh', 11,     14],
               [ 'Julie', 4,      5],
               [ 'Sohan', 3,      3.5],
               [ 'Karim', 6.5,    7]
            ]);
               
            // Set chart options
            var options = {'title':'Age vs Weight', 'width':550, 'height':400};

            // Instantiate and draw the chart.
            var chart = new google.visualization.BubbleChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Kết quả Xác minh kết quả.

Biểu đồ của Google

xem thêm : Biểu đồ của Google – Biểu đồ lịch

The post Biểu đồ Google – Biểu đồ thanh có nhãn dữ liệu appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-google-bieu-do-thanh-co-nhan-du-lieu/feed/ 0 17065 Biểu đồ Google – Biểu đồ thanh được nhóm https://dongthoigian.net/bieu-do-google-bieu-do-thanh-duoc-nhom/ https://dongthoigian.net/bieu-do-google-bieu-do-thanh-duoc-nhom/#respond Sat, 21 Oct 2023 08:10:57 +0000 https://dongthoigian.net/?p=17048 chương Cú pháp cấu hình biểu đồ của Google

The post Biểu đồ Google – Biểu đồ thanh được nhóm appeared first on Dongthoigian.net.

]]> Sau đây là một ví dụ về biểu đồ thanh được nhóm. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Ví dụ

googlecharts_bar_grouped.htm Bản thử trực tiếp

<html>
   <head>
      <title>Google Charts dongthoigianl</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Asia', 'Europe'],
               ['2012',  900,      390],
               ['2013',  1000,      400],
               ['2014',  1170,      440],
               ['2015',  1250,       480],
               ['2016',  1530,      540]
            ]);

            var options = {title: 'Population (in millions)'};  

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Kết quả Xác minh kết quả.

biểu đồ của Google

Biểu đồ Google – Biểu đồ thanh xếp chồng

Sau đây là một ví dụ về biểu đồ thanh xếp chồng. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng cấu hình isStacked để hiển thị biểu đồ xếp chồng

// Set chart options
var options = {
   isStacked: true
};

<html>
   <head>
      <title>Google Charts dongthoigianl</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Asia', 'Europe'],
               ['2012',  900,      390],
               ['2013',  1000,      400],
               ['2014',  1170,      440],
               ['2015',  1250,       480],
               ['2016',  1530,      540]
            ]);

            var options = {title: 'Population (in millions)', isStacked:true};  

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Kết quả Xác minh kết quả.

biểu đồ của Google

Biểu đồ Google – Biểu đồ thanh xếp chồng phủ định

Sau đây là ví dụ về biểu đồ thanh xếp chồng âm. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng cấu hình isStacked để hiển thị biểu đồ xếp chồng

// Set chart options
var options = {
   isStacked: true
};

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Sales', 'Expenses'],
               ['2012',  900,      390],
               ['2013',  -1000,      400],
               ['2014',  -1170,      440],
               ['2015',  1250,       480],
               ['2016',  1530,      540]
            ]);

            var options = {
               title: 'Company Performance',
               isStacked:true	  
            };  

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Kết quả Xác minh kết quả

biểu đồ của Google

Biểu đồ Google – Biểu đồ thanh xếp chồng 100%

Sau đây là ví dụ về biểu đồ thanh xếp chồng 100%. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

// Set chart options
var options = {
   isStacked: 'percent'
};

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Asia', 'Europe'],
               ['2012',  900,      390],
               ['2013',  1000,      400],
               ['2014',  1170,      440],
               ['2015',  1250,       480],
               ['2016',  1530,      540]
            ]);

            var options = {
               title: 'Population (in millions)',
               isStacked:'percent'	  
            };  

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Kết quả Xác minh kết quả.

biểu đồ của Google

Biểu đồ Google – Biểu đồ thanh vật liệu

Sau đây là một ví dụ về biểu đồ thanh vật liệu. Chúng ta đã thấy cấu hình được sử dụng để vẽ biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google . Vì vậy, hãy xem ví dụ đầy đủ.

Cấu hình

Chúng tôi đã sử dụng lớp Bar để hiển thị biểu đồ vật liệu.

//classic chart
var chart = new google.visualization.BarChart(document.getElementById('container'));

//Material chart
var chart = new google.charts.Bar(document.getElementById('container'));

//set the bar to be horizontal using options
var options = {      
   bars: 'horizontal'	  
};

Ví dụ

googlecharts_bar_material.htm

Bản thử trực tiếp

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart','bar']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Asia', 'Europe'],
               ['2012',  900,      390],
               ['2013',  1000,      400],
               ['2014',  1170,      440],
               ['2015',  1250,       480],
               ['2016',  1530,      540]
            ]);

            var options = {title: 'Population (in millions)', bars: 'horizontal'};  

            // Instantiate and draw the chart.
            var chart = new google.charts.Bar(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Kết quả Xác minh kết quả.

biểu đồ của Google

Xem thêm : Biểu đồ Google – Biểu đồ thanh có nhãn dữ liệu

The post Biểu đồ Google – Biểu đồ thanh được nhóm appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-google-bieu-do-thanh-duoc-nhom/feed/ 0 17048