googlecharts - Dongthoigian.net https://dongthoigian.net/tag/googlecharts/ Sun, 05 Nov 2023 07:53:49 +0000 vi hourly 1 https://wordpress.org/?v=6.8 https://dongthoigian.net/wp-content/uploads/2025/02/cropped-dongthoigian_huedc-32x32.png googlecharts - Dongthoigian.net https://dongthoigian.net/tag/googlecharts/ 32 32 241113670 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 17114 Biểu đồ của Google – Biểu đồ vùng xếp chồng https://dongthoigian.net/bieu-do-cua-google-bieu-do-vung-xep-chong/ https://dongthoigian.net/bieu-do-cua-google-bieu-do-vung-xep-chong/#respond Tue, 17 Oct 2023 12:38:02 +0000 https://dongthoigian.net/?p=17037 Tìm hiểu  Cú pháp cấu hình biểu đồ của Google

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

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

Cấu hình

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

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

Ví dụ

googlecharts_area_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">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Asia', 'Europe'],
               ['2013',  1000,      400],
               ['2014',  1170,      460],
               ['2015',  1300,       480],
               ['2016',  1530,      540]
            ]);

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

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

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

Biểu đồ của Google

Biểu đồ của Google – Biểu đồ vùng xếp chồng 100%

Sau đây là ví dụ về biểu đồ vùng 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 100%.

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

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

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

            var options = {title: 'Population (in millions)',
               hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
               vAxis: {minValue: 0},
               isStacked: 'percent'
            };  

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

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

Biểu đồ vùng xếp chồng 100%

Biểu đồ khu vực có điểm bị thiếu

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

Ví dụ

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

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

            var options = {title: 'Population (in millions)',
               hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
               vAxis: {minValue: 0}
            };  

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

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

googlecharts

Biểu đồ vùng có trục đảo ngược

Sau đây là một ví dụ về biểu đồ vùng đảo ngượ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 định hướng để hiển thị biểu đồ vùng đảo ngược.

// Set chart options
var options = {
   orientation: 'vertical'
};

Ví dụ

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

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

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

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

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

Biểu đồ vùng có trục đảo ngược

Biểu đồ Google – Biểu đồ thanh

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

Sau đây là một ví dụ về biểu đồ thanh 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 BarChart để hiển thị biểu đồ dựa trên khu vực. //bar chartvar chart = new google.visualization.BarChart(document.getElementById(‘container’));

Ví dụ

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

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

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

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

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

Biểu đồ thanh cơ bản

Xem thêm : Biểu đồ Google – Biểu đồ thanh được nhóm

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

]]> https://dongthoigian.net/bieu-do-cua-google-bieu-do-vung-xep-chong/feed/ 0 17037