google charts - Dongthoigian.net https://dongthoigian.net/tag/google-charts/ Wed, 15 Nov 2023 05:39:52 +0000 vi hourly 1 https://wordpress.org/?v=6.8 https://dongthoigian.net/wp-content/uploads/2025/02/cropped-dongthoigian_huedc-32x32.png google charts - Dongthoigian.net https://dongthoigian.net/tag/google-charts/ 32 32 241113670 Biểu đồ của Google – Biểu đồ theo bậc xếp chồng https://dongthoigian.net/bieu-do-cua-google-bieu-do-theo-bac-xep-chong/ https://dongthoigian.net/bieu-do-cua-google-bieu-do-theo-bac-xep-chong/#respond Tue, 14 Nov 2023 07:27:12 +0000 https://dongthoigian.net/?p=17169 sử dụng cấu hình isStacked để hiển thị biểu đồ xếp chồng.

The post Biểu đồ của Google – Biểu đồ theo bậc xếp chồng appeared first on Dongthoigian.net.

]]> Sau đây là một ví dụ về biểu đồ vùng có bậc xếp chồng lên nhau. 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
};

Ví dụ

googlecharts_stepped_stacked.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 = google.visualization.arrayToDataTable([
               ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
               ['Alfred Hitchcock (1935)', 8.4,         7.9],
               ['Ralph Thomas (1959)',     6.9,         6.5],
               ['Don Sharp (1978)',        6.5,         6.4],
               ['James Hawes (2008)',      4.4,         6.2]
            ]);

            var options = {
               title: 'The decline of \'The 39 Steps\'',
               vAxis: {title: 'Accumulated Rating'},
               isStacked: true      
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.SteppedAreaChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Xác minh kết quả.

isStacked để hiển thị biểu đồ xếp chồng.

Biểu đồ bậc xếp chồng 100%

Sau đây là ví dụ về biểu đồ vùng bậc thang 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

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: 'percent'
};

Ví dụ

googlecharts_stepped_percent.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 = google.visualization.arrayToDataTable([
               ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
               ['Alfred Hitchcock (1935)', 8.4,         7.9],
               ['Ralph Thomas (1959)',     6.9,         6.5],
               ['Don Sharp (1978)',        6.5,         6.4],
               ['James Hawes (2008)',      4.4,         6.2]
            ]);

            var options = {
               title: 'The decline of \'The 39 Steps\'',
               vAxis: {title: 'Accumulated Rating'},
               isStacked: 'percent'      
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.SteppedAreaChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Xác minh kết quả.

isStacked để hiển thị biểu đồ xếp chồng.

Biểu đồ của Google – Biểu đồ dạng bảng

Biểu đồ bảng giúp hiển thị một bảng có thể được sắp xếp và phân trang. Các ô trong bảng có thể được định dạng bằng chuỗi định dạng hoặc bằng cách chèn trực tiếp HTML dưới dạng giá trị ô. Các giá trị số được căn phải theo mặc định; giá trị boolean được hiển thị dưới dạng dấu kiểm hoặc dấu chéo. Người dùng có thể chọn các hàng đơn bằng bàn phím hoặc chuột. Tiêu đề cột có thể được sử dụng để sắp xếp. Hàng tiêu đề vẫn cố định trong quá trình cuộn. Bảng kích hoạt các sự kiện tương ứng với tương tác của người dù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 lớp Bảng để hiển thị biểu đồ dựa trên Bảng. //table chartvar chart = new google.visualization.Table(document.getElementById(‘container’));

Ví dụ

googlecharts_table_chart.htm

<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: ['table']});     
      </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', 'Name');
            data.addColumn('number', 'Salary');
            data.addColumn('boolean', 'Full Time Employee');
            data.addRows([
               ['Mike',  {v: 10000, f: '$10,000'}, true],
               ['Jim',   {v:8000,   f: '$8,000'},  false],
               ['Alice', {v: 12500, f: '$12,500'}, true],
               ['Bob',   {v: 7000,  f: '$7,000'},  true]
            ]);

            var options = {
               showRowNumber: true,
               width: '100%', 
               height: '100%'
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.Table(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Xác minh kết quả.

isStacked để hiển thị biểu đồ xếp chồng.

Biểu đồ của Google – Biểu đồ theo dòng thời gian

Các mốc thời gian mô tả cách một tập hợp các tài nguyên được sử dụng theo thời gian. Chúng ta sẽ thảo luận về các loại biểu đồ Dòng thời gian sau đây.

Biểu đồ Google – Biểu đồ mốc thời gian cơ bản

Sau đây là một ví dụ về biểu đồ mốc thời gian 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 lớp Dòng thời gian để hiển thị sơ đồ dòng thời gian. //Timeline chartvar chart = new google.visualization.Timeline(document.getElementById(‘container’));

Ví dụ

googlecharts_timelines_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: ['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([
            [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
            [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
            [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

            var options = {      
               width: '100%', 
               height: '100%'
            };
                  
            // 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ả.

isStacked để hiển thị biểu đồ xếp chồng.

Biểu đồ mốc thời gian có nhãn dữ liệu

Sau đây là ví dụ về biểu đồ dòng thời gian 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 lớp Dòng thời gian để hiển thị sơ đồ dòng thời gian.

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

Ví dụ

googlecharts_timelines_labels.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: 'string', id: 'Name' });
            data.addColumn({ type: 'date', id: 'Start' });
            data.addColumn({ type: 'date', id: 'End' });
            data.addRows([
            [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
            [ '2', 'John Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
            [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

            var options = {      
               width: '100%', 
               height: '100%'	  
            };
                  
            // 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ả.

isStacked để hiển thị biểu đồ xếp chồng.

Biểu đồ dòng thời gian không có Nhãn hàng

Sau đây là ví dụ về biểu đồ dòng thời gian không có nhãn hà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 dòng thời gian để ẩn nhãn hàng.

// Set chart options
var options = {
   timeline: { showRowLabels: false }
};

Ví dụ

googlecharts_timelines_row.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%',
               timeline: { showRowLabels: false }
            };

            // 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ả.

isStacked để hiển thị biểu đồ xếp chồng.

Xem thêm : Biểu đồ Google – Tô màu biểu đồ dòng thời gian

The post Biểu đồ của Google – Biểu đồ theo bậc xếp chồng appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-cua-google-bieu-do-theo-bac-xep-chong/feed/ 0 17169 Google Charts – Đánh dấu tùy chỉnh bản đồ https://dongthoigian.net/google-charts-danh-dau-tuy-chinh-ban-do/ https://dongthoigian.net/google-charts-danh-dau-tuy-chinh-ban-do/#respond Tue, 07 Nov 2023 07:50:34 +0000 https://dongthoigian.net/?p=17141 Biểu đồ của Google - Biểu đồ hình tròn

The post Google Charts – Đánh dấu tùy chỉnh bản đồ appeared first on Dongthoigian.net.

]]> Sau đây là ví dụ về bản đồ sử dụng các điểm đánh dấ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 biểu tượng để đánh dấu tùy chỉnh.

// Set chart options
var options = {
   showTip: true,
   icons: {
      default: {
         normal: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
         selected: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
      }
   }	  
};

Ví dụ

googlecharts_map_markers.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: ['map']});     
      </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([
               ['Lat', 'Long', 'Name'],
               [37.4232, -122.0853, 'Work'],
               [37.4289, -122.1697, 'University'],
               [37.6153, -122.3900, 'Airport'],
               [37.4422, -122.1731, 'Shopping']
            ]);
              
            // Set chart options
            var options = {
               showTip: true,
               icons: {
                  default: {
                     normal: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
                     selected: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
                  }
               }	  
            };			

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

Xác minh kết quả.

Google Charts - Đánh dấu tùy chỉnh bản đồ

Biểu đồ Google – Sơ đồ tổ chức

<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: ['orgchart']});     
      </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', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            // For each orgchart box, provide the name, manager, and tooltip to show.
            data.addRows([
               [{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
               [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
               ['Alice', 'Robert', ''],
               ['Bob', 'Jim', 'Bob Sponge'],
               ['Carol', 'Bob', '']
            ]);			

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

Xác minh kết quả.

Google Charts - Đánh dấu tùy chỉnh bản đồ

Biểu đồ của Google – Biểu đồ hình tròn

Biểu đồ hình tròn được sử dụng để vẽ biểu đồ dựa trên hình tròn. Trong phần này chúng ta sẽ thảo luận về các loại biểu đồ dựa trên hình tròn sau đây.

Biểu đồ của Google – Biểu đồ bánh rán cơ bản

Sau đây là một ví dụ về biểu đồ bánh rá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 pieHole để đặt biểu đồ hình tròn làm biểu đồ bánh rán.

// Set chart options
var options = { 
   pieHole: 0.4
};

Ví dụ

googlecharts_pie_donut.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">
         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', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addRows([
               ['Firefox', 45.0],
               ['IE', 26.8],
               ['Chrome', 12.8],
               ['Safari', 8.5],
               ['Opera', 6.2],
               ['Others', 0.7]
            ]);
               
            // Set chart options
            var options = {
               'title':'Browser market shares at a specific website, 2014',
               'width':550,
               'height':400,
               pieHole: 0.4
            };

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

Xác minh kết quả.

Google Charts - Đánh dấu tùy chỉnh bản đồ

Biểu đồ của Google – Biểu đồ hình tròn 3D

Sau đây là ví dụ về biểu đồ 3d Pie. 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 is3D để đặt biểu đồ hình tròn làm biểu đồ bánh rán.

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

Ví dụ

googlecharts_pie_3d.htm

<html>
   <head>
      <title>Google Charts donthoigian</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', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addRows([
               ['Firefox', 45.0],
               ['IE', 26.8],
               ['Chrome', 12.8],
               ['Safari', 8.5],
               ['Opera', 6.2],
               ['Others', 0.7]
            ]);
               
            // Set chart options
            var options = {
               'title':'Browser market shares at a specific website, 2014',
               'width':550,
               'height':400,
               is3D:true
            };

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

Xác minh kết quả.

Google Charts - Đánh dấu tùy chỉnh bản đồ

Biểu đồ của Google – Biểu đồ hình tròn bùng nổ

Sau đây là một ví dụ về biểu đồ Pie đã được giải 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ác lát cắt có cấu hình bù để đặt biểu đồ hình tròn dưới dạng biểu đồ đã chia nhỏ.

// Set chart options
var options = { 
   slices: {  
      1: {offset: 0.2},
      3: {offset: 0.3}                  
   }
};

Ví dụ

googlecharts_pie_exploded.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">
         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', 'Browser');
            data.addColumn('number', 'Percentage');
            data.addRows([
               ['Firefox', 45.0],
               ['IE', 26.8],
               ['Chrome', 12.8],
               ['Safari', 8.5],
               ['Opera', 6.2],
               ['Others', 0.7]
            ]);
               
            // Set chart options
            var options = {
               'title':'Browser market shares at a specific website, 2014',
               'width':550,
               'height':400,
               slices: {  
                  1: {offset: 0.2},
                  3: {offset: 0.3}                  
               }
            };

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

Xác minh kết quả.

Xem thêm : Biểu đồ của Google – Biểu đồ hình tròn 3D

The post Google Charts – Đánh dấu tùy chỉnh bản đồ appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/google-charts-danh-dau-tuy-chinh-ban-do/feed/ 0 17141 Biểu đồ của Google – Biểu đồ khu vực https://dongthoigian.net/bieu-do-cua-google-bieu-do-khu-vuc/ https://dongthoigian.net/bieu-do-cua-google-bieu-do-khu-vuc/#respond Sun, 15 Oct 2023 08:04:31 +0000 https://dongthoigian.net/?p=17020 biểu đồ này trong chương Cú pháp cấu hình biểu đồ của Google 

The post Biểu đồ của Google – Biểu đồ khu vực appeared first on Dongthoigian.net.

]]> Biểu đồ vùng được sử dụng để vẽ biểu đồ dựa trên vùng. Trong phần này chúng ta sẽ thảo luận về các loại biểu đồ dựa trên khu vực sau đây.

Biểu đồ vùng cơ bản

Sau đây là một ví dụ về biểu đồ vù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 Ví dụ

googlecharts_area_basic.htm

<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', 'Sales', 'Expenses'],
               ['2013',  1000,      400],
               ['2014',  1170,      460],
               ['2015',  660,       1120],
               ['2016',  1030,      540]
            ]);

            var options = {title: 'Company Performance',
               hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
               vAxis: {minValue: 0}
            };  

            // Instantiate and draw the chart.
            var chart = new google.visualization.AreaChart(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 đồ vùng có giá trị âm

Sau đây là ví dụ về biểu đồ vùng có giá trị â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 Ví dụ

googlecharts_area_ Negative.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">
         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'],
               ['2013',  1000,      400],
               ['2014',  -1170,      460],
               ['2015',  -660,       1120],
               ['2016',  1030,      540]
            ]);

            var options = {
               isStacked: true,
               title: 'Population',
               hAxis: {title: 'Year',titleTextStyle: {color: '#333'}},
               vAxis: {minValue: 0}
            };  

            // Instantiate and draw the chart.
            var chart = new google.visualization.AreaChart(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 đồ vùng xếp chồng

The post Biểu đồ của Google – Biểu đồ khu vực appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-cua-google-bieu-do-khu-vuc/feed/ 0 17020