带有自定义轴线和刻度标签的基本折线图

前一个
下一个

以下是一个具有自定义轴线和刻度标签的基本折线图示例。我们已经在Google 图表配置语法一章中看到了用于绘制此图表的配置。那么，我们来看看完整的示例。

配置

我们添加了textStyle和titleTextStyle配置来更改默认文本样式。

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

示例

googlecharts_line_axis.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 = {'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>

结果

验证结果。

googlecharts_line_charts.htm
打印页面
上一个
下一个
广告