Biểu đồ của Google - Dongthoigian.net https://dongthoigian.net/tag/bieu-do-cua-google/ Tue, 07 Nov 2023 07:26:14 +0000 vi hourly 1 https://wordpress.org/?v=6.8 https://dongthoigian.net/wp-content/uploads/2025/02/cropped-dongthoigian_huedc-32x32.png Biểu đồ của Google - Dongthoigian.net https://dongthoigian.net/tag/bieu-do-cua-google/ 32 32 241113670 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 17128 Biểu đồ của Google – Màu biểu đồ biểu đồ https://dongthoigian.net/bieu-do-cua-google-mau-bieu-do-bieu-do/ https://dongthoigian.net/bieu-do-cua-google-mau-bieu-do-bieu-do/#respond Thu, 02 Nov 2023 13:07:47 +0000 https://dongthoigian.net/?p=17108 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 – Màu biểu đồ biểu đồ appeared first on Dongthoigian.net.

]]> Sau đây là ví dụ về biểu đồ biểu đồ có 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 màu để thay đổi màu mặc định của biểu đồ biểu đồ. // Set chart optionsvar options = {colors: [‘green’]};

Ví dụ

googlecharts_histogram_color.htm

y là ví dụ về biểu đồ biểu đồ có 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 màu để thay đổi màu mặc định của biểu đồ biểu đồ.

// Set chart optionsvar options = {colors: [‘green’]};

Ví dụ

googlecharts_histogram_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']});     
      </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([
               ['Student Roll No', 'height'],
               ['1', 80],['2', 55],['3', 68],['4', 80],['5', 54],
               ['6', 70],['7', 85],['8', 78],['9', 70],['10', 58],
               ['11', 90],['12', 65],['13', 88],['14', 82],['15', 65],
               ['16', 86],['17', 45],['18', 62],['19', 84],['20', 75],
               ['21', 82],['22', 75],['23', 58],['24', 70],['25', 85]		  
            ]);
              
            // Set chart options
            var options = {
               title: 'Students height, in cm',
               legend: { position: 'none' },
               colors: ['green']
            };				

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

Xác minh kết quả.

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 – Nhóm biểu đồ biểu đồ

Sau đây là ví dụ về biểu đồ biểu đồ có kích thước nhóm 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 BuckSize của biểu đồ để thay đổi kích thước nhóm mặc định của biểu đồ biểu đồ.

// Set chart options
var options = {
   histogram: { bucketSize: 5 }
};

Ví dụ : googlecharts_histogram_bucket.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([
               ['Student Roll No', 'height'],
               ['1', 80],['2', 55],['3', 68],['4', 80],['5', 54],
               ['6', 70],['7', 85],['8', 78],['9', 70],['10', 58],
               ['11', 90],['12', 65],['13', 88],['14', 82],['15', 65],
               ['16', 86],['17', 45],['18', 62],['19', 84],['20', 75],
               ['21', 82],['22', 75],['23', 58],['24', 70],['25', 85]		  
            ]);
              
            // Set chart options
            var options = {
               title: 'Students height, in cms',
               legend: { position: 'none' },
               histogram: { bucketSize: 5 }
            };				

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

Xác minh kết quả.

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 đồ biểu đồ Nhiều chuỗi

Sau đây là ví dụ về biểu đồ biểu đồ có nhiều chuỗi. 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_histogram_multiple.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([
               ['Student Roll No', 'Height', 'Weight'],
               ['1', 80, 40],['2', 55, 30],['3', 68, 34],['4', 80, 40],['5', 54, 27],
               ['6', 70, 35],['7', 85, 42],['8', 78, 40],['9', 70, 35],['10', 58, 28],
               ['11', 90, 45],['12', 65, 33],['13', 88, 50],['14', 82, 41],['15', 65, 30],
               ['16', 86, 43],['17', 45, 30],['18', 62, 30],['19', 84, 42],['20', 75, 40],
               ['21', 82, 41],['22', 75, 40],['23', 58, 30],['24', 70, 35],['25', 85, 40]		  
            ]);
              
            // Set chart options
            var options = {
               title: 'Students Height and Weight',
               legend: { position: 'bottom' }      
            };					

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

Biểu đồ của Google – Biểu đồ đường

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

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

Ví dụ : googlecharts_line_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','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	  
            };

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

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 : Biểu đồ đường cơ bản Với các điểm có thể nhìn thấy

The post Biểu đồ của Google – Màu biểu đồ biểu đồ appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-cua-google-mau-bieu-do-bieu-do/feed/ 0 17108 Biểu đồ của Google – Biểu đồ lịch https://dongthoigian.net/bieu-do-cua-google-bieu-do-lich/ https://dongthoigian.net/bieu-do-cua-google-bieu-do-lich/#respond Mon, 30 Oct 2023 04:25:06 +0000 https://dongthoigian.net/?p=17073 Biểu đồ lịch cơ bản

The post Biểu đồ của Google – Biểu đồ lịch appeared first on Dongthoigian.net.

]]> Biểu đồ Google – Biểu đồ lịch cơ bản

Sau đây là một ví dụ về biểu đồ lịch cơ bản. Biểu đồ lịch được sử dụng để trực quan hóa dữ liệu theo một khoảng thời gian. 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 Lịch để hiển thị biểu đồ dựa trên lịch.

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

Ví dụ

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

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart','calendar']});     
      </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: 'date', id: 'Date' });
            data.addColumn({ type: 'number', id: 'Students' });
            data.addRows([
               [ new Date(2012, 3, 13), 50 ],
               [ new Date(2012, 3, 14), 50 ],
               [ new Date(2012, 3, 15), 49 ],
               [ new Date(2012, 3, 16), 48 ],
               [ new Date(2012, 3, 17), 50 ],
               
               [ new Date(2012, 4, 1), 50 ],
               [ new Date(2012, 4, 2), 50 ],
               [ new Date(2012, 4, 3), 49 ],
               [ new Date(2012, 4, 4), 48 ],
               [ new Date(2012, 4, 5), 50 ],
               
               [ new Date(2012, 5, 4), 40 ],
               [ new Date(2012, 5, 5), 50 ],
               [ new Date(2012, 5, 10), 48 ],
               [ new Date(2012, 5, 11), 50 ],
               [ new Date(2012, 5, 12), 42 ],
               [ new Date(2012, 5, 20), 45 ],
               [ new Date(2012, 5, 21), 46 ],
               [ new Date(2012, 5, 29), 45 ],
               
               [ new Date(2013, 3, 13), 40 ],
               [ new Date(2013, 3, 14), 40 ],
               [ new Date(2013, 3, 15), 39 ],
               [ new Date(2013, 3, 16), 38 ],
               [ new Date(2013, 3, 17), 40 ],
               
               [ new Date(2013, 4, 1), 40 ],
               [ new Date(2013, 4, 2), 40 ],
               [ new Date(2013, 4, 3), 49 ],
               [ new Date(2013, 4, 4), 48 ],
               [ new Date(2013, 4, 5), 40 ],
               
               [ new Date(2013, 5, 4), 40 ],
               [ new Date(2013, 5, 5), 50 ],
               [ new Date(2013, 5, 12), 48 ],
               [ new Date(2013, 5, 13), 40 ],
               [ new Date(2013, 5, 19), 32 ],
               [ new Date(2013, 5, 23), 45 ],
               [ new Date(2013, 5, 24), 36 ],
               [ new Date(2013, 5, 30), 45 ]
            ]);

               
            // Set chart options
            var options = {'title':'Attendence', 'width':550, 'height':400};

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

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

Biểu đồ Google - Biểu đồ lịch cơ bản

Biểu đồ Google – Biểu đồ lịch tùy chỉnh

Sau đây là ví dụ về biểu đồ lịch tùy chỉnh. Biểu đồ lịch được sử dụng để trực quan hóa dữ liệu theo một khoảng thời gian. 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 lịch để tùy chỉnh lịch.

// Set chart options
var options = {
   calendar: {
      yearLabel: {
         fontName: 'Times-Roman',
         fontSize: 32,
         color: '#1A8763',
         bold: true,
         italic: true
      },
      
      monthOutlineColor: {
         stroke: '#981b48',
         strokeOpacity: 0.8,
         strokeWidth: 2
      },
      
      unusedMonthOutlineColor: {
         stroke: '#bc5679',
         strokeOpacity: 0.8,
         strokeWidth: 1
      }		 
   }
};

Ví dụ

googlecharts_calendar_customized.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','calendar']});     
      </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: 'date', id: 'Date' });
            data.addColumn({ type: 'number', id: 'Students' });
            data.addRows([
               [ new Date(2012, 3, 13), 50 ],
               [ new Date(2012, 3, 14), 50 ],
               [ new Date(2012, 3, 15), 49 ],
               [ new Date(2012, 3, 16), 48 ],
               [ new Date(2012, 3, 17), 50 ],
            
               [ new Date(2012, 4, 1), 50 ],
               [ new Date(2012, 4, 2), 50 ],
               [ new Date(2012, 4, 3), 49 ],
               [ new Date(2012, 4, 4), 48 ],
               [ new Date(2012, 4, 5), 50 ], 
            
               [ new Date(2012, 5, 4), 40 ],
               [ new Date(2012, 5, 5), 50 ],
               [ new Date(2012, 5, 10), 48 ],
               [ new Date(2012, 5, 11), 50 ],
               [ new Date(2012, 5, 12), 42 ],
               [ new Date(2012, 5, 20), 45 ],
               [ new Date(2012, 5, 21), 46 ],
               [ new Date(2012, 5, 29), 45 ],
            
               [ new Date(2013, 3, 13), 40 ],
               [ new Date(2013, 3, 14), 40 ],
               [ new Date(2013, 3, 15), 39 ],
               [ new Date(2013, 3, 16), 38 ],
               [ new Date(2013, 3, 17), 40 ], 
            
               [ new Date(2013, 4, 1), 40 ],
               [ new Date(2013, 4, 2), 40 ],
               [ new Date(2013, 4, 3), 49 ],
               [ new Date(2013, 4, 4), 48 ],
               [ new Date(2013, 4, 5), 40 ],
            
               [ new Date(2013, 5, 4), 40 ],
               [ new Date(2013, 5, 5), 50 ],
               [ new Date(2013, 5, 12), 48 ],
               [ new Date(2013, 5, 13), 40 ],
               [ new Date(2013, 5, 19), 32 ],
               [ new Date(2013, 5, 23), 45 ],
               [ new Date(2013, 5, 24), 36 ],
               [ new Date(2013, 5, 30), 45 ]
            ]);

            
            // Set chart options
            var options = {
               'title':'Attendence',
               'width':550,
               'height':400,
               calendar: {
               
                  yearLabel: {
                     fontName: 'Times-Roman',
                     fontSize: 32,
                     color: '#1A8763',
                     bold: true,
                     italic: true
                  },
               
                  monthOutlineColor: {
                     stroke: '#981b48',
                     strokeOpacity: 0.8,
                     strokeWidth: 2
                  },
               
                  unusedMonthOutlineColor: {
                     stroke: '#bc5679',
                     strokeOpacity: 0.8,
                     strokeWidth: 1
                  }		 
               }
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.Calendar(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 đồ lịch cơ bản

Biểu đồ Google – Biểu đồ nến

Biểu đồ nến được sử dụng để hiển thị giá trị mở và đóng trên một phương sai giá trị và thường được sử dụng để thể hiện cổ phiếu. Trong phần này chúng ta sẽ thảo luận về các loại biểu đồ dựa trên nến sau đây.

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

Sau đây là một ví dụ về biểu đồ nến cơ bản. Biểu đồ hình nến thường được sử dụng để hiển thị giá trị mở và đóng được phủ lên trên tổng phương sai. Biểu đồ nến thường được sử dụng để thể hiện hành vi giá trị cổ phiếu. Trong biểu đồ này, các ô đã điền được vẽ cho các mục có giá trị mở nhỏ hơn giá trị đóng (tăng) và , và các ô rỗng được vẽ khi giá trị mở của mục lớn hơn giá trị đóng (mất). 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 CandlestickChart để hiển thị biểu đồ dựa trên nến.

//candlestick chart
var chart = new google.visualization.CandlestickChart
(document.getElementById('container'));

Ví dụ

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

<html>
   <head>
      <title>Google Charts dongthoigian</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Mon', 20, 28, 38, 45],
               ['Tue', 31, 38, 55, 66],
               ['Wed', 50, 55, 77, 80],
               ['Thu', 77, 77, 66, 50],
               ['Fri', 68, 66, 22, 15]
               // Treat first row as data as well.
            ], true);
              
            // Set chart options
            var options = {legend: 'none'};

            // Instantiate and draw the chart.
            var chart = new google.visualization.CandlestickChart(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 đồ lịch cơ bản

Xem thêm Biểu đồ nến tùy chỉnh

The post Biểu đồ của Google – Biểu đồ lịch appeared first on Dongthoigian.net.

]]> https://dongthoigian.net/bieu-do-cua-google-bieu-do-lich/feed/ 0 17073