Google Charts https://dongthoigian.net/big-data/google-charts/ Wed, 15 Nov 2023 06:17:09 +0000 vi hourly 1 https://wordpress.org/?v=6.7.1 https://dongthoigian.net/wp-content/uploads/2021/07/cropped-logo-dongthoigian-32x32.png Google Charts https://dongthoigian.net/big-data/google-charts/ 32 32 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 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 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 Biểu đồ của Google – Biểu đồ phân tán https://dongthoigian.net/bieu-do-cua-google-bieu-do-phan-tan/ https://dongthoigian.net/bieu-do-cua-google-bieu-do-phan-tan/#respond Tue, 14 Nov 2023 07:06:12 +0000 https://dongthoigian.net/?p=17160 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 đồ của Google – Biểu đồ phân tán appeared first on Dongthoigian.net.

]]> Biểu đồ Sankey, Biểu đồ phân tán, Biểu đồ khu vực theo từng bước, Bảng, Mốc thời gian, Bản đồ cây, Đường xu hướng được sử dụng để vẽ biểu đồ dựa trên phân tá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 phân tán sau đây.

Biểu đồ của Google – Biểu đồ phân tán cơ bản

Sau đây là một ví dụ về biểu đồ phân tán 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 ScatterChart để hiển thị biểu đồ dựa trên phân tán.

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

Ví dụ

googlecharts_scatter_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">
         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'
            };

            // 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 đồ phân tán cơ bản

Biểu đồ của Google – Biểu đồ phân tán vật chất

Sau đây là một ví dụ về biểu đồ phân tán 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 Scatter để hiển thị biểu đồ vật liệu.

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

//Material chartvar chart = new google.charts.Scatter(document.getElementById(‘container’));

Ví dụ

googlecharts_scatter_material.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','scatter']});     
      </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	  
            };

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

Xác minh kết quả.

Biểu đồ phân tán cơ bản

Biểu đồ phân tán với trục Y kép

Sau đây là ví dụ về biểu đồ phân tán vật liệu có trục Y kép. 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 axes.y để hiển thị trục y kép.

// Set chart options
var options = { 
   axes: {
      y: {
         'hours studied': {label: 'Hours Studied'},
         'final grade': {label: 'Final Exam Grade'}
      }
   }
};

Ví dụ

googlecharts_scatter_dually.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','scatter']});     
      </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', 'Student ID');
            data.addColumn('number', 'Hours Studied');
            data.addColumn('number', 'Final');

            data.addRows([
               [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
               [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
               [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
               [9, 9, 80],  [10, 10, 82], [11, 0, 75],
               [12, 5, 80], [13, 3, 90],  [14, 1, 72],
               [15, 5, 75], [16, 6, 68],  [17, 7, 98],
               [18, 3, 82], [19, 9, 94],  [20, 2, 79],
               [21, 2, 95], [22, 2, 86],  [23, 3, 67],
               [24, 4, 60], [25, 2, 80],  [26, 6, 92],
               [27, 2, 81], [28, 8, 79],  [29, 9, 83]
            ]);

            var options = {
               chart: {
                  title: 'Students\' Final Grades',
                  subtitle: 'based on hours studied'
               },
               width: 800,
               height: 500,
               series: {
                  0: {axis: 'hours studied'},
                  1: {axis: 'final grade'}
               },
               axes: {
                  y: {
                     'hours studied': {label: 'Hours Studied'},
                     'final grade': {label: 'Final Exam Grade'}
                  }
               }
            };
            // Instantiate and draw the chart.
            var chart = new google.charts.Scatter(document.getElementById('container'));
            chart.draw(data, google.charts.Scatter.convertOptions(options));
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Xác minh kết quả.

Biểu đồ phân tán cơ bản

Biểu đồ của Google – Biểu đồ phân tán trục X hàng đầu

Sau đây là ví dụ về biểu đồ phân tán vật liệu có Trục X ở trên cù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 axes.x để hiển thị trục x ở trên cùng.

// Set chart options
var options = { 
   axes: {
      x: {
         0: {side: 'top'}
      }
   }
};

Ví dụ

googlecharts_scatter_topx.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','scatter']});     
      </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,
               axes: {
                  x: {
                     0: {side: 'top'}
                  }
               }	  
            };

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

Xác minh kết quả.

Biểu đồ phân tán cơ bản

Biểu đồ của Google – Biểu đồ vùng theo bước

Biểu đồ vùng bậc thang là biểu đồ vùng dựa trên bậc thang. Chúng ta sẽ thảo luận về các loại biểu đồ vùng dạng bậc thang sau đây. Biểu đồ của Google – Biểu đồ theo bước cơ bản

Sau đây là một ví dụ về biểu đồ vùng có bậc 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 SteppedAreaChart để hiển thị biểu đồ vùng theo bậc.

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

Ví dụ

googlecharts_stepped_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 = 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'}      
            };
                  
            // 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ả.

Biểu đồ phân tán cơ bản

Xem Thêm : Biểu đồ của Google – Biểu đồ theo bậc xếp chồng

The post Biểu đồ của Google – Biểu đồ phân tán appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-cua-google-bieu-do-phan-tan/feed/ 0 Biểu đồ của Google – Biểu đồ hình tròn 3D https://dongthoigian.net/bieu-do-cua-google-bieu-do-hinh-tron-3d/ https://dongthoigian.net/bieu-do-cua-google-bieu-do-hinh-tron-3d/#respond Wed, 08 Nov 2023 03:43:51 +0000 https://dongthoigian.net/?p=17150 đã sử dụng cấu hình is3D để đặt biểu đồ hình tròn làm biểu đồ bánh rán.

The post Biểu đồ của Google – Biểu đồ hình tròn 3D appeared first on Dongthoigian.net.

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

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

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

Biểu đồ Google – Biểu đồ Sankey cơ bản

Sau đây là một ví dụ về sơ đồ sankey 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 Sankey để hiển thị sơ đồ sankey.

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

Ví dụ

googlecharts_sankey_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: ['sankey']});     
      </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', 'From');
            data.addColumn('string', 'To');
            data.addColumn('number', 'Weight');

            data.addRows([
               [ 'Brazil', 'Portugal', 5 ],
               [ 'Brazil', 'France', 1 ],
               [ 'Brazil', 'Spain', 1 ],
               [ 'Brazil', 'England', 1 ],
               
               [ 'Canada', 'Portugal', 1 ],
               [ 'Canada', 'France', 5 ],
               [ 'Canada', 'England', 1 ],
               
               [ 'Mexico', 'Portugal', 1 ],
               [ 'Mexico', 'France', 1 ],
               [ 'Mexico', 'Spain', 5 ],
               [ 'Mexico', 'England', 1 ],
               
               [ 'USA', 'Portugal', 1 ],
               [ 'USA', 'France', 1 ],
               [ 'USA', 'Spain', 1 ],
               [ 'USA', 'England', 5 ]
            ]);	

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

Xác minh kết quả.

Biểu đồ Google – Biểu đồ Sankey đa cấp

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

Ví dụ

googlecharts_sankey_multilevel.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: ['sankey']});     
      </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', 'From');
            data.addColumn('string', 'To');
            data.addColumn('number', 'Weight');

            data.addRows([
               [ 'Brazil', 'Portugal', 5 ],
               [ 'Brazil', 'France', 1 ],
               [ 'Brazil', 'Spain', 1 ],
               [ 'Brazil', 'England', 1 ],
               
               [ 'Canada', 'Portugal', 1 ],
               [ 'Canada', 'France', 5 ],
               [ 'Canada', 'England', 1 ],
               
               [ 'Mexico', 'Portugal', 1 ],
               [ 'Mexico', 'France', 1 ],
               [ 'Mexico', 'Spain', 5 ],
               [ 'Mexico', 'England', 1 ],
               
               [ 'USA', 'Portugal', 1 ],
               [ 'USA', 'France', 1 ],
               [ 'USA', 'Spain', 1 ],
               [ 'USA', 'England', 5 ],
               
               [ 'Portugal', 'Angola', 2 ],
               [ 'Portugal', 'Senegal', 1 ],
               [ 'Portugal', 'Morocco', 1 ],
               [ 'Portugal', 'South Africa', 3 ],
               
               [ 'France', 'Angola', 1 ],
               [ 'France', 'Senegal', 3 ],
               [ 'France', 'Mali', 3 ],
               [ 'France', 'Morocco', 3 ],
               [ 'France', 'South Africa', 1 ],
               
               [ 'Spain', 'Senegal', 1 ],
               [ 'Spain', 'Morocco', 3 ],
               [ 'Spain', 'South Africa', 1 ],
               
               [ 'England', 'Angola', 1 ],
               [ 'England', 'Senegal', 1 ],
               [ 'England', 'Morocco', 2 ],
               [ 'England', 'South Africa', 7 ],
               
               [ 'South Africa', 'China', 5 ],
               [ 'South Africa', 'India', 1 ],
               [ 'South Africa', 'Japan', 3 ],
               
               [ 'Angola', 'China', 5 ],
               [ 'Angola', 'India', 1 ],
               [ 'Angola', 'Japan', 3 ],
               
               [ 'Senegal', 'China', 5 ],
               [ 'Senegal', 'India', 1 ],
               [ 'Senegal', 'Japan', 3 ],
               
               [ 'Mali', 'China', 5 ],
               [ 'Mali', 'India', 1 ],
               [ 'Mali', 'Japan', 3 ],
               
               [ 'Morocco', 'China', 5 ],
               [ 'Morocco', 'India', 1 ],
               [ 'Morocco', 'Japan', 3 ]
            ]);	

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

Xác minh kết quả

Sau đây là ví dụ về sơ đồ sankey 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 sankey để tùy chỉnh sơ đồ sankey.

// Set chart options
var options = {
   width: 550,
   sankey: {
      node: { colors: [ '#a61d4c' ] },
      link: { color: { stroke: 'black', strokeWidth: 1 } },
   }
};

Ví dụ

googlecharts_sankey_customized.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: ['sankey']});     
      </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', 'From');
            data.addColumn('string', 'To');
            data.addColumn('number', 'Weight');

            data.addRows([
               [ 'Brazil', 'Portugal', 5 ],
               [ 'Brazil', 'France', 1 ],
               [ 'Brazil', 'Spain', 1 ],
               [ 'Brazil', 'England', 1 ],
               
               [ 'Canada', 'Portugal', 1 ],
               [ 'Canada', 'France', 5 ],
               [ 'Canada', 'England', 1 ],
               
               [ 'Mexico', 'Portugal', 1 ],
               [ 'Mexico', 'France', 1 ],
               [ 'Mexico', 'Spain', 5 ],
               [ 'Mexico', 'England', 1 ],
               
               [ 'USA', 'Portugal', 1 ],
               [ 'USA', 'France', 1 ],
               [ 'USA', 'Spain', 1 ],
               [ 'USA', 'England', 5 ]
            ]);	

            // Set chart options
            var options = {
               width: 550,
               sankey: {
                  node: { colors: [ '#a61d4c' ] },
                  link: { 
                     color: { 
                        stroke: 'black', 
                        strokeWidth: 1 
                     } 
                  },
               }
            };
                  
            // Instantiate and draw the chart.
            var chart = new google.visualization.Sankey(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 đồ phân tán

The post Biểu đồ của Google – Biểu đồ hình tròn 3D appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-cua-google-bieu-do-hinh-tron-3d/feed/ 0 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 Biểu đồ đường cơ bản với kiểu đường có thể tùy chỉnh https://dongthoigian.net/bieu-do-duong-co-ban-voi-kieu-duong-co-the-tuy-chinh/ https://dongthoigian.net/bieu-do-duong-co-ban-voi-kieu-duong-co-the-tuy-chinh/#respond Tue, 07 Nov 2023 07:25:50 +0000 https://dongthoigian.net/?p=17136 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 đồ đường cơ bản với kiểu đường có thể tùy chỉnh appeared first on Dongthoigian.net.

]]> Sau đây là ví dụ về biểu đồ đường cơ bản với kiểu đường 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 đã thêm cấu hình lineWidth và lineDashStyle để thay đổi kiểu đường mặc định.

// Set chart options
var options = {
   series: {
      0: {
         lineWidth: 10,
         lineDashStyle: [5, 1, 5]
      },
      1: {
         lineWidth: 5,
         lineDashStyle: [7, 2, 4, 3]
      }
   }
};

Ở đây 0 biểu thị chuỗi thứ nhất, 1 biểu thị chuỗi thứ hai.

Ví dụ

googlecharts_line_style.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','line']});  
      </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', 'Month');
            data.addColumn('number', 'Tokyo');
            data.addColumn('number', 'New York');
            data.addColumn('number', 'Berlin');
            data.addColumn('number', 'London');
            data.addRows([
               ['Jan',  7.0, -0.2, -0.9, 3.9],
               ['Feb',  6.9, 0.8, 0.6, 4.2],
               ['Mar',  9.5,  5.7, 3.5, 5.7],
               ['Apr',  14.5, 11.3, 8.4, 8.5],
               ['May',  18.2, 17.0, 13.5, 11.9],
               ['Jun',  21.5, 22.0, 17.0, 15.2],
               
               ['Jul',  25.2, 24.8, 18.6, 17.0],
               ['Aug',  26.5, 24.1, 17.9, 16.6],
               ['Sep',  23.3, 20.1, 14.3, 14.2],
               ['Oct',  18.3, 14.1, 9.0, 10.3],
               ['Nov',  13.9,  8.6, 3.9, 6.6],
               ['Dec',  9.6,  2.5,  1.0, 4.8]
            ]);
               
            // Set chart options
            var options = {
               'title' : 'Average Temperatures of Cities',
               hAxis: {
                  title: 'Month'
               },
               vAxis: {
                  title: 'Temperature'
               },   
               'width':550,
               'height':400,
               series: {
                  0: {
                     lineWidth: 10,
                     lineDashStyle: [5, 1, 5]
                  },
                  1: {
                     lineWidth: 5,
                     lineDashStyle: [7, 2, 4, 3]
                  }
               }
            };

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

Xác minh kết quả.

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

Biểu đồ của Google – Bản đồ

Biểu đồ Google Map sử dụng API Google Maps để hiển thị Bản đồ. Giá trị dữ liệu được hiển thị dưới dạng điểm đánh dấu trên bản đồ. Giá trị dữ liệu có thể là tọa độ (cặp kinh độ dài) hoặc địa chỉ thực tế. Bản đồ sẽ được chia tỷ lệ tương ứng để bao gồm tất cả các điểm đã xác định.

Biểu đồ của Google – Bản đồ cơ bản

Sau đây là một ví dụ về một bản đồ 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 Map để hiển thị biểu đồ dựa trên bản đồ.

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

Ví dụ

googlecharts_map_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: ['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([
               ['Country', 'Population'],
               ['China', 'China: 1,363,800,000'],
               ['India', 'India: 1,242,620,000'],
               ['US', 'US: 317,842,000'],
               ['Indonesia', 'Indonesia: 247,424,598'],
               ['Brazil', 'Brazil: 201,032,714'],
               ['Pakistan', 'Pakistan: 186,134,000'],
               ['Nigeria', 'Nigeria: 173,615,000'],
               ['Bangladesh', 'Bangladesh: 152,518,015'],
               ['Russia', 'Russia: 146,019,512'],
               ['Japan', 'Japan: 127,120,000']
            ]);
              
            // Set chart options
            var options = {showTip: true};				

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

Bản đồ sử dụng Vĩ độ/Kinh độ

Sau đây là ví dụ về bản đồ sử dụng vĩ độ và kinh độ. 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 Map để hiển thị biểu đồ dựa trên bản đồ.

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

Ví dụ

googlecharts_map_latitude.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};				

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

Xem thêm : Google Charts – Đánh dấu tùy chỉnh bản đồ

The post Biểu đồ đường cơ bản với kiểu đường có thể tùy chỉnh appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-duong-co-ban-voi-kieu-duong-co-the-tuy-chinh/feed/ 0 Biểu đồ đường cơ bản với các đường cong https://dongthoigian.net/bieu-do-duong-co-ban-voi-cac-duong-cong/ https://dongthoigian.net/bieu-do-duong-co-ban-voi-cac-duong-cong/#respond Sun, 05 Nov 2023 08:08:43 +0000 https://dongthoigian.net/?p=17128 biểu đồ của Google

The post Biểu đồ đường cơ bản với các đường cong appeared first on Dongthoigian.net.

]]> Sau đây là ví dụ về biểu đồ đường cơ bản với các đường cong mượt 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 đã thêm cấu hình màu nền để thay đổi màu nền mặc định.

// Set chart options
var options = {
   curveType: 'function'
};

Ví dụ

googlecharts_line_curve.htm

   <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','line']});  
      </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', 'Month');
            data.addColumn('number', 'Tokyo');
            data.addColumn('number', 'New York');
            data.addColumn('number', 'Berlin');
            data.addColumn('number', 'London');
            data.addRows([
               ['Jan',  7.0, -0.2, -0.9, 3.9],
               ['Feb',  6.9, 0.8, 0.6, 4.2],
               ['Mar',  9.5,  5.7, 3.5, 5.7],
               ['Apr',  14.5, 11.3, 8.4, 8.5],
               ['May',  18.2, 17.0, 13.5, 11.9],
               ['Jun',  21.5, 22.0, 17.0, 15.2],
               
               ['Jul',  25.2, 24.8, 18.6, 17.0],
               ['Aug',  26.5, 24.1, 17.9, 16.6],
               ['Sep',  23.3, 20.1, 14.3, 14.2],
               ['Oct',  18.3, 14.1, 9.0, 10.3],
               ['Nov',  13.9,  8.6, 3.9, 6.6],
               ['Dec',  9.6,  2.5,  1.0, 4.8]
            ]);
            
            // Set chart options
            var options = {'title' : 'Average Temperatures of Cities',
               hAxis: {
                  title: 'Month'
               },
               vAxis: {
                  title: 'Temperature'
               },   
               'width':550,
               'height':400,
               curveType: 'function'
            };

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

Xác minh kết quả.

biểu đồ đường cơ bản với các đường cong

Biểu đồ của Google – Biểu đồ đường vật liệu

Sau đây là một ví dụ về biểu đồ dòng 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 Line để hiển thị biểu đồ vật liệu.

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

//Material chartvar chart = new google.charts.Line(document.getElementById(‘container’));

Ví dụ

googlecharts_line_material.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','line']});  
      </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', 'Month');
            data.addColumn('number', 'Tokyo');
            data.addColumn('number', 'New York');
            data.addColumn('number', 'Berlin');
            data.addColumn('number', 'London');
            data.addRows([
               ['Jan',  7.0, -0.2, -0.9, 3.9],
               ['Feb',  6.9, 0.8, 0.6, 4.2],
               ['Mar',  9.5,  5.7, 3.5, 5.7],
               ['Apr',  14.5, 11.3, 8.4, 8.5],
               ['May',  18.2, 17.0, 13.5, 11.9],
               ['Jun',  21.5, 22.0, 17.0, 15.2],
               
               ['Jul',  25.2, 24.8, 18.6, 17.0],
               ['Aug',  26.5, 24.1, 17.9, 16.6],
               ['Sep',  23.3, 20.1, 14.3, 14.2],
               ['Oct',  18.3, 14.1, 9.0, 10.3],
               ['Nov',  13.9,  8.6, 3.9, 6.6],
               ['Dec',  9.6,  2.5,  1.0, 4.8]
            ]);
            
            // Set chart options
            var options = {
               chart: {
                  title: 'Average Temperatures of Cities',
                  subtitle: 'Source: worldclimate.com'
               },   
               hAxis: {
                  title: 'Month',         
               },
               vAxis: {
                  title: 'Temperature',        
               }, 
               'width':550,
               'height':400      
            };

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

Xác minh kết quả.

biểu đồ đường cơ bản với các đường cong

Biểu đồ Google – Biểu đồ dòng X hàng đầu

Sau đây là ví dụ về biểu đồ đường vật liệu có trục x ở trê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 axes.x ở đây để có trục x ở đầu biểu đồ.

// Set chart options
var options = {
   axes: {
      x: {
         0: {side: 'top'}
      }      
   }
};

Ví dụ

googlecharts_line_topx.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','line']});  
      </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', 'Month');
            data.addColumn('number', 'Tokyo');
            data.addColumn('number', 'New York');
            data.addColumn('number', 'Berlin');
            data.addColumn('number', 'London');
            data.addRows([
               ['Jan',  7.0, -0.2, -0.9, 3.9],
               ['Feb',  6.9, 0.8, 0.6, 4.2],
               ['Mar',  9.5,  5.7, 3.5, 5.7],
               ['Apr',  14.5, 11.3, 8.4, 8.5],
               ['May',  18.2, 17.0, 13.5, 11.9],
               ['Jun',  21.5, 22.0, 17.0, 15.2],
               
               ['Jul',  25.2, 24.8, 18.6, 17.0],
               ['Aug',  26.5, 24.1, 17.9, 16.6],
               ['Sep',  23.3, 20.1, 14.3, 14.2],
               ['Oct',  18.3, 14.1, 9.0, 10.3],
               ['Nov',  13.9,  8.6, 3.9, 6.6],
               ['Dec',  9.6,  2.5,  1.0, 4.8]
            ]);
            
            // Set chart options
            var options = {
               chart: {
                  title: 'Average Temperatures of Cities',
                  subtitle: 'Source: worldclimate.com'
               },   
               hAxis: {
                  title: 'Month',         
               },
               vAxis: {
                  title: 'Temperature',        
               }, 
               'width':550,
               'height':400,
               axes: {
                  x: {
                     0: {side: 'top'}
                  }      
               }      
            };

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

Xác minh kết quả.

biểu đồ đường cơ bản với các đường cong

Xem thêm : Biểu đồ đường cơ bản với kiểu đường có thể tùy chỉnh

The post Biểu đồ đường cơ bản với các đường cong appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-duong-co-ban-voi-cac-duong-cong/feed/ 0 Biểu đồ đường cơ bản với trục có thể tùy chỉnh và nhãn đánh dấu https://dongthoigian.net/bieu-do-duong-co-ban-voi-truc-co-the-tuy-chinh-va-nhan-danh-dau/ https://dongthoigian.net/bieu-do-duong-co-ban-voi-truc-co-the-tuy-chinh-va-nhan-danh-dau/#respond Sun, 05 Nov 2023 07:51:57 +0000 https://dongthoigian.net/?p=17123 cấu hình textStyle và titleTextStyle để thay đổi kiểu văn bản mặc định.

The post Biểu đồ đường cơ bản với trục có thể tùy chỉnh và nhãn đánh dấu appeared first on Dongthoigian.net.

]]> Sau đây là ví dụ về biểu đồ đường cơ bản với trục tùy chỉnh và nhãn đánh dấ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 đã thêm cấu hình textStyle và titleTextStyle để thay đổi kiểu văn bản mặc định.

// Set chart options
var options = {
   textStyle: {
      color: '#01579b',
      fontSize: 20,
      fontName: 'Arial',
      bold: true,
      italic: true
   },
   titleTextStyle: {
      color: '#01579b',
      fontSize: 16,
      fontName: 'Arial',
      bold: false,
      italic: true
   }
};

Ví dụ

googlecharts_line_axis.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','line']});  
      </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', 'Month');
            data.addColumn('number', 'Tokyo');
            data.addColumn('number', 'New York');
            data.addColumn('number', 'Berlin');
            data.addColumn('number', 'London');
            data.addRows([
               ['Jan',  7.0, -0.2, -0.9, 3.9],
               ['Feb',  6.9, 0.8, 0.6, 4.2],
               ['Mar',  9.5,  5.7, 3.5, 5.7],
               ['Apr',  14.5, 11.3, 8.4, 8.5],
               ['May',  18.2, 17.0, 13.5, 11.9],
               ['Jun',  21.5, 22.0, 17.0, 15.2],
               
               ['Jul',  25.2, 24.8, 18.6, 17.0],
               ['Aug',  26.5, 24.1, 17.9, 16.6],
               ['Sep',  23.3, 20.1, 14.3, 14.2],
               ['Oct',  18.3, 14.1, 9.0, 10.3],
               ['Nov',  13.9,  8.6, 3.9, 6.6],
               ['Dec',  9.6,  2.5,  1.0, 4.8]
            ]);
               
            // Set chart options
            var options = {'title' : 'Average Temperatures of Cities',
               hAxis: {
                  title: 'Month',
                  textStyle: {
                     color: '#01579b',
                     fontSize: 20,
                     fontName: 'Arial',
                     bold: true,
                     italic: true
                  },
                  
                  titleTextStyle: {
                     color: '#01579b',
                     fontSize: 16,
                     fontName: 'Arial',
                     bold: false,
                     italic: true
                  }
               },
               
               vAxis: {
                  title: 'Temperature',
                  textStyle: {
                     color: '#1a237e',
                     fontSize: 24,
                     bold: true
                  },
                  titleTextStyle: {
                     color: '#1a237e',
                     fontSize: 24,
                     bold: true
                  }
               }, 
               
               'width':550,
               'height':400,	  
               colors: ['#a52714', '#0000ff', '#ff0000', '#00ff00']
            };

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

Xác minh kết quả

Biểu đồ đường cơ bản

Biểu đồ đường cơ bản có dấu thập

Sau đây là ví dụ về biểu đồ đường cơ bản có dấu thập xuất hiện khi chọn điểm 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 đã thêm cấu hình tâm ngắm để hiển thị tâm ngắm khi lựa chọn.

// Set chart options
var options = {
   crosshair: {
      color: '#000',
      trigger: 'selection'
   }
};

Ví dụ

googlecharts_line_crosshairs.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','line']});
      </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', 'Month');
            data.addColumn('number', 'Tokyo');
            data.addColumn('number', 'New York');
            data.addColumn('number', 'Berlin');
            data.addColumn('number', 'London');
            data.addRows([
               ['Jan',  7.0, -0.2, -0.9, 3.9],
               ['Feb',  6.9, 0.8, 0.6, 4.2],
               ['Mar',  9.5,  5.7, 3.5, 5.7],
               ['Apr',  14.5, 11.3, 8.4, 8.5],
               ['May',  18.2, 17.0, 13.5, 11.9],
               ['Jun',  21.5, 22.0, 17.0, 15.2],
               
               ['Jul',  25.2, 24.8, 18.6, 17.0],
               ['Aug',  26.5, 24.1, 17.9, 16.6],
               ['Sep',  23.3, 20.1, 14.3, 14.2],
               ['Oct',  18.3, 14.1, 9.0, 10.3],
               ['Nov',  13.9,  8.6, 3.9, 6.6],
               ['Dec',  9.6,  2.5,  1.0, 4.8]
            ]);
               
            // Set chart options
            var options = {'title' : 'Average Temperatures of Cities',
               hAxis: {
                  title: 'Month',
               },
               vAxis: {
                  title: 'Temperature',
               }, 
               'width':550,
               'height':400,	  
               crosshair: {
                  color: '#000',
                  trigger: 'selection'
               }
            };

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

Xác minh kết quả.

Biểu đồ đường cơ bản

Xem thêm : Biểu đồ đường cơ bản với các đường cong

The post Biểu đồ đường cơ bản với trục có thể tùy chỉnh và nhãn đánh dấu appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-duong-co-ban-voi-truc-co-the-tuy-chinh-va-nhan-danh-dau/feed/ 0 Biểu đồ đường cơ bản Với các điểm có thể nhìn thấy https://dongthoigian.net/bieu-do-duong-co-ban-voi-cac-diem-co-the-nhin-thay/ https://dongthoigian.net/bieu-do-duong-co-ban-voi-cac-diem-co-the-nhin-thay/#respond Thu, 02 Nov 2023 13:22:40 +0000 https://dongthoigian.net/?p=17114 Cú pháp cấu hình biểu đồ của Google

The post Biểu đồ đường cơ bản Với các điểm có thể nhìn thấy appeared first on Dongthoigian.net.

]]> Sau đây là ví dụ về biểu đồ đường cơ bản với các điểm dữ liệu hiển thị. 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 đã thêm cấu hình pointVisible để hiển thị điểm dữ liệu.

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

Ví dụ : googlecharts_line_points.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','line']});  
      </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', 'Month');
            data.addColumn('number', 'Tokyo');
            data.addColumn('number', 'New York');
            data.addColumn('number', 'Berlin');
            data.addColumn('number', 'London');
            data.addRows([
               ['Jan',  7.0, -0.2, -0.9, 3.9],
               ['Feb',  6.9, 0.8, 0.6, 4.2],
               ['Mar',  9.5,  5.7, 3.5, 5.7],
               ['Apr',  14.5, 11.3, 8.4, 8.5],
               ['May',  18.2, 17.0, 13.5, 11.9],
               ['Jun',  21.5, 22.0, 17.0, 15.2],
               
               ['Jul',  25.2, 24.8, 18.6, 17.0],
               ['Aug',  26.5, 24.1, 17.9, 16.6],
               ['Sep',  23.3, 20.1, 14.3, 14.2],
               ['Oct',  18.3, 14.1, 9.0, 10.3],
               ['Nov',  13.9,  8.6, 3.9, 6.6],
               ['Dec',  9.6,  2.5,  1.0, 4.8]
            ]);
               
            // Set chart options
            var options = {'title' : 'Average Temperatures of Cities',
               hAxis: {
                  title: 'Month'
               },
               vAxis: {
                  title: 'Temperature'
               },   
               'width':550,
               'height':400,
               pointsVisible: true	  
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.LineChart(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 – Biểu đồ đường cơ bản với màu nền có thể tùy chỉnh

Sau đây là ví dụ về biểu đồ đường cơ bản với màu nền 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 đã thêm cấu hình màu nền để thay đổi màu nền mặc định.

// Set chart options
var options = {
   backgroundColor: '#f1f8e9'
};

Ví dụ : googlecharts_line_background.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','line']});  
      </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', 'Month');
            data.addColumn('number', 'Tokyo');
            data.addColumn('number', 'New York');
            data.addColumn('number', 'Berlin');
            data.addColumn('number', 'London');
            data.addRows([
               ['Jan',  7.0, -0.2, -0.9, 3.9],
               ['Feb',  6.9, 0.8, 0.6, 4.2],
               ['Mar',  9.5,  5.7, 3.5, 5.7],
               ['Apr',  14.5, 11.3, 8.4, 8.5],
               ['May',  18.2, 17.0, 13.5, 11.9],
               ['Jun',  21.5, 22.0, 17.0, 15.2],
               
               ['Jul',  25.2, 24.8, 18.6, 17.0],
               ['Aug',  26.5, 24.1, 17.9, 16.6],
               ['Sep',  23.3, 20.1, 14.3, 14.2],
               ['Oct',  18.3, 14.1, 9.0, 10.3],
               ['Nov',  13.9,  8.6, 3.9, 6.6],
               ['Dec',  9.6,  2.5,  1.0, 4.8]
            ]);
               
            // Set chart options
            var options = {'title' : 'Average Temperatures of Cities',
               hAxis: {
                  title: 'Month'
               },
               vAxis: {
                  title: 'Temperature'
               },   
               'width':550,
               'height':400,
               backgroundColor: '#f1f8e9'
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.LineChart(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 đồ đường cơ bản với màu đường có thể tùy chỉnh

Sau đây là ví dụ về biểu đồ đường cơ bản với màu đường 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 đã thêm cấu hình màu để thay đổi màu đường mặc định.

// Set chart options
var options = {
   colors: ['#a52714', '#0000ff', '#ff0000', '#00ff00']
};

Ví dụ : googlecharts_line_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">
         google.charts.load('current', {packages: ['corechart','line']});  
      </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', 'Month');
            data.addColumn('number', 'Tokyo');
            data.addColumn('number', 'New York');
            data.addColumn('number', 'Berlin');
            data.addColumn('number', 'London');
            
            data.addRows([
               ['Jan',  7.0, -0.2, -0.9, 3.9],
               ['Feb',  6.9, 0.8, 0.6, 4.2],
               ['Mar',  9.5,  5.7, 3.5, 5.7],
               ['Apr',  14.5, 11.3, 8.4, 8.5],
               ['May',  18.2, 17.0, 13.5, 11.9],
               ['Jun',  21.5, 22.0, 17.0, 15.2],
               
               ['Jul',  25.2, 24.8, 18.6, 17.0],
               ['Aug',  26.5, 24.1, 17.9, 16.6],
               ['Sep',  23.3, 20.1, 14.3, 14.2],
               ['Oct',  18.3, 14.1, 9.0, 10.3],
               ['Nov',  13.9,  8.6, 3.9, 6.6],
               ['Dec',  9.6,  2.5,  1.0, 4.8]
            ]);
               
            // Set chart options
            var options = {'title' : 'Average Temperatures of Cities',
               hAxis: {title: 'Month'},
               vAxis: {title: 'Temperature'},   
               'width':550,
               'height':400,
               colors: ['#a52714', '#0000ff', '#ff0000', '#00ff00']
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.LineChart(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

Xem thêm : Biểu đồ đường cơ bản với trục có thể tùy chỉnh và nhãn đánh dấu

The post Biểu đồ đường cơ bản Với các điểm có thể nhìn thấy appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-duong-co-ban-voi-cac-diem-co-the-nhin-thay/feed/ 0