帶可定製線條樣式的基本折線圖

以下示例展示了帶自定義線條樣式的基本折線圖。我們已經在 Google Charts 配置語法章節看到了繪製此圖所使用的配置。那麼，我們來看看完整示例。

配置

我們已新增 lineWidth 和 lineDashStyle 配置以更改預設線條樣式。

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

這裡 0 表示第一個序列，1 表示第二個序列。

示例

googlecharts_line_style.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'
               },
               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>

結果

驗證結果。

googlecharts_line_charts.htm

列印頁面