Google 圖表 - 材質折線圖

以下是一個材料折線圖示例。我們已經看到在 Google 圖表配置語法一章節中用來繪製該圖的配置。因此，我們來看完整示例。

配置

我們使用 Line 類來顯示材料圖。

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

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

示例

googlecharts_line_material.htm

即時演示

<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','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>

結果

驗證結果。

googlecharts_line_charts.htm

列印頁面

上一步

下一步