本頁面由 Cloud Translation API 翻譯而成。

自訂線條

總覽
變更色彩
變更厚度
虛線

簡介

部分 Google 圖表 (例如面積圖、折線圖和組合圖) 都有連接資料點的線段。您可以使用這個頁面的技術，自訂線條的顏色、粗細和虛線。

變更色彩

您可以透過兩種方式，變更連接 Google 圖表資料點的線條顏色：使用 colors 選項來變更圖表調色盤，或使用 series 選項來指定特定係列的顏色。

在下圖中，我們明確設定了每個系列的顏色。

選項

        var options = {
          legend: 'none',
          series: {
            0: { color: '#e2431e' },
            1: { color: '#e7711b' },
            2: { color: '#f1ca3a' },
            3: { color: '#6f9654' },
            4: { color: '#1c91c0' },
            5: { color: '#43459d' },
          }
        };

完整 HTML

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          series: {
            0: { color: '#e2431e' },
            1: { color: '#e7711b' },
            2: { color: '#f1ca3a' },
            3: { color: '#6f9654' },
            4: { color: '#1c91c0' },
            5: { color: '#43459d' },
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

在上方指定顏色，以十六進位值 (例如'#e2431e' 或 '#f00' 代表飽和紅色)。以下範例將說明此情況，並示範如何使用 colors 選項修正圖表調色盤，而不控制個別系列的顏色，以控制色彩。不同之處在於，如果您修正調色盤，且區塊數量超過調色盤的數量，系統會重複使用這些顏色：如果調色盤是由紅色和藍色組成，一半的系列為紅色，而另一個系列則是藍色。

選項

        var options = {
          legend: 'none',
          colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray']
        };

完整 HTML

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray']
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

變更厚度

您可以使用 lineWidth 選項來控制線條粗細：

選項

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          lineWidth: 10,
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

完整 HTML

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          lineWidth: 10,
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

如要控制系列的線條寬度，請使用 series 選項：

選項

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          series: {
            0: { lineWidth: 1 },
            1: { lineWidth: 2 },
            2: { lineWidth: 4 },
            3: { lineWidth: 8 },
            4: { lineWidth: 16 },
            5: { lineWidth: 24 }
          },
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

完整 HTML

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          series: {
            0: { lineWidth: 1 },
            1: { lineWidth: 2 },
            2: { lineWidth: 4 },
            3: { lineWidth: 8 },
            4: { lineWidth: 16 },
            5: { lineWidth: 24 }
          },
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

虛線

許多虛線樣式的樣式都可透過 lineDashStyle 選項使用，也就是使用數字陣列。第一個數字代表破折號的長度，第二個數字代表後方的間隔。如果第三個數字是下一個破折號的長度，第四個數字 (如果存在) 是下一個間隔的長度。

系統繪製圖表時，會重複這些長度，因此 [4, 4] 代表連續 4 個破折號和 4 個間距間隔。[5, 1, 3] 代表 5 長破折號、1 長間隔、3 長破折號和 5 長度間隔等等。以下列舉部分範例：

選項

        var options = {
          hAxis: { maxValue: 10 },
          vAxis: { maxValue: 18 },
          chartArea: { width: 380 },
          lineWidth: 4,
          series: {
            0: { lineDashStyle: [1, 1] },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] },
            3: { lineDashStyle: [5, 1, 3] },
            4: { lineDashStyle: [4, 1] },
            5: { lineDashStyle: [10, 2] },
            6: { lineDashStyle: [14, 2, 7, 2] },
            7: { lineDashStyle: [14, 2, 2, 7] },
            8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
          },
          colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
                   '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
        };

完整 HTML

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', 'lineDashStyle: [1, 1]', 'lineDashStyle: [2, 2]',
               'lineDashStyle: [4, 4]', 'lineDashStyle: [5, 1, 3]',
               'lineDashStyle: [4, 1]',
               'lineDashStyle: [10, 2]', 'lineDashStyle: [14, 2, 7, 2]',
               'lineDashStyle: [14, 2, 2, 7]',
               'lineDashStyle: [2, 2, 20, 2, 20, 2]'],
              [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
              [2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
              [3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
              [4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
              [5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
              [6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
              [7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
              [8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
              [9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
        ]);

        var options = {
          hAxis: { maxValue: 10 },
          vAxis: { maxValue: 18 },
          chartArea: { width: 380 },
          lineWidth: 4,
          series: {
            0: { lineDashStyle: [1, 1] },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] },
            3: { lineDashStyle: [5, 1, 3] },
            4: { lineDashStyle: [4, 1] },
            5: { lineDashStyle: [10, 2] },
            6: { lineDashStyle: [14, 2, 7, 2] },
            7: { lineDashStyle: [14, 2, 2, 7] },
            8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
          },
          colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
                   '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>