自訂點

總覽

在許多 Google 圖表中,資料值會顯示在確切的時間點。折線圖只是一組以線連接的點,散佈圖是沒有任何點的。

在散佈圖以外的所有圖表中,這些點的大小預設為零。您可以使用 pointSize 選項控制其大小,並使用 pointShape 選項控制其形狀。

上面可以看到,包含六個序列的圖表,各有 pointSize 30,但 pointShape 不同。

選項完整 HTML
        var options = {
          legend
: 'none',
          hAxis
: { minValue: 0, maxValue: 7 },
         
pointSize: 30,
          series
: {
               
0: { pointShape: 'circle' },
               
1: { pointShape: 'triangle' },
               
2: { pointShape: 'square' },
               
3: { pointShape: 'diamond' },
               
4: { pointShape: 'star' },
               
5: { pointShape: 'polygon' }
           
}

       
};
  <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, null, null, null, null, null],
             
[2, null, 3, null, null, null, null],
             
[3, null, null, 4, null, null, null],
             
[4, null, null, null, 5, null, null],
             
[5, null, null, null, null, 6, null],
             
[6, null, null, null, null, null, 7]
       
]);

       
var options = {
          legend
: 'none',
         
pointSize: 30,
          series
: {
               
0: { pointShape: 'circle' },
               
1: { pointShape: 'triangle' },
               
2: { pointShape: 'square' },
               
3: { pointShape: 'diamond' },
               
4: { pointShape: 'star' },
               
5: { pointShape: 'polygon' }
           
}

       
};

       
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>

一些簡易範例

與上一節的圖表不同,大部分的圖表只有一個系列。以下折線圖範例包含 20 pt 圓形點:

由於預設的 pointShape 為圓形,因此可以將其排除在選項之外:

選項完整 HTML
        var options = {
          legend
: 'none',
          hAxis
: { minValue: 0, maxValue: 9 },
          curveType
: 'function',
         
pointSize: 20,
     
};
  <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', 'Y'],
             
[1, 3],
             
[2, 2.5],
             
[3, 3],
             
[4, 4],
             
[5, 4],
             
[6, 3],
             
[7, 2.5],
             
[8, 3]
       
]);

       
var options = {
          legend
: 'none',
          hAxis
: { minValue: 0, maxValue: 9 },
          curveType
: 'function',
         
pointSize: 20,
       
};

       
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>

如要將形狀從「圓形」變更為其他形狀,請將 pointShape 設為「三角形」、「正方形」、「菱形」、「星號」或「多邊形」:

選項完整 HTML
        var options = {
          legend
: 'none',
          hAxis
: { minValue: 0, maxValue: 9 },
          colors
: ['#795548'],
          pointSize
: 20,
         
pointShape: 'square'
       
};
  <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', 'Y'],
             
[1, 3],
             
[2, 2.5],
             
[3, 3],
             
[4, 4],
             
[5, 4],
             
[6, 3],
             
[7, 2.5],
             
[8, 3]
       
]);

       
var options = {
          legend
: 'none',
          hAxis
: { minValue: 0, maxValue: 9 },
          colors
: ['#795548'],
          pointSize
: 20,
         
pointShape: 'square'
       
};

       
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>

您可以運用「星號」和「多邊形」形狀自訂邊數 (預設值為五)。部分四面星星:

選項完整 HTML
        var options = {
          legend
: 'none',
          hAxis
: { minValue: 0, maxValue: 9 },
          colors
: ['#EF851C'],
          pointSize
: 30,
         
pointShape: { type: 'star', sides: 4 }
       
};
<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', 'Y'],
             
[1, 3],
             
[2, 2.5],
             
[3, 3],
             
[4, 4],
             
[5, 4],
             
[6, 3],
             
[7, 2.5],
             
[8, 3]
       
]);

       
var options = {
          legend
: 'none',
          hAxis
: { minValue: 0, maxValue: 9 },
          colors
: ['#EF851C'],
          pointSize
: 30,
         
pointShape: { type: 'star', sides: 4 }
       
};

       
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>

您可以使用 dent 選項進一步自訂星號,而該選項可控制星號的串連方式。凹陷接近零時,星星會類似星魚;當凹陷接近一時,星體會穿過等邊多邊形。

以下是 0.05 到 0.8 的凹槽星號:

選項完整 HTML
var options = {
    legend
: 'none',
    hAxis
: { textPosition: 'none' },
    vAxis
: { textPosition: 'none', gridlines: { count: 0 },
             baselineColor
: 'white' },
    colors
: ['#E94D20', '#ECA403', '#63A74A',
             
'#15A0C8', '#4151A3', '#703593', '#981B48'],
    pointSize
: 20,
    annotations
: { stemColor: 'white', textStyle: { fontSize: 16 } },
    series
: {
       
0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } },
       
1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } },
       
2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } },
       
3: { pointShape: { type: 'star', sides: 5 } },
       
4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } },
       
5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } },
       
6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } },
   
}
};
<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 = new google.visualization.DataTable();
          data
.addColumn('string', 'Element');
          data
.addColumn('number', 'A');
          data
.addColumn( { type: 'string', role: 'annotation' });
          data
.addColumn('number', 'B');
          data
.addColumn( { type: 'string', role: 'annotation' });
          data
.addColumn('number', 'C');
          data
.addColumn( { type: 'string', role: 'annotation' });
          data
.addColumn('number', 'D');
          data
.addColumn( { type: 'string', role: 'annotation' });
          data
.addColumn('number', 'E');
          data
.addColumn( { type: 'string', role: 'annotation' });
          data
.addColumn('number', 'F');
          data
.addColumn( { type: 'string', role: 'annotation' });
          data
.addColumn('number', 'G');
          data
.addColumn( { type: 'string', role: 'annotation' });
          data
.addRow(['A', 1, "dent: 0.05", , , , , , , , , , , , null]);
          data
.addRow(['B', , , 1, "dent: 0.1", , , , , , , , , , null]);
          data
.addRow(['C', , , , , 1, "dent: 0.2", , , , , , , , null]);
          data
.addRow(['D', , , , , , , 1, "default", , , , , , null]);
          data
.addRow(['E', , , , , , , , , 1, "dent: 0.5", , , , null]);
          data
.addRow(['F', , , , , , , , , , , 1, "dent: 0.7", , null]);
          data
.addRow(['G', , , , , , , , , , , , , 1, "dent: 0.8"]);

         
var options = {
              legend
: 'none',
              hAxis
: { textPosition: 'none' },
              vAxis
: { textPosition: 'none', gridlines: { count: 0 },
                       baselineColor
: 'white' },
              colors
: ['#E94D20', '#ECA403', '#63A74A',
                       
'#15A0C8', '#4151A3', '#703593', '#981B48'],
              pointSize
: 20,
              annotations
: { stemColor: 'white', textStyle: { fontSize: 16 } },
              series
: {
                 
0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } },
                 
1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } },
                 
2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } },
                 
3: { pointShape: { type: 'star', sides: 5 } },
                 
4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } },
                 
5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } },
                 
6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } },
             
}
         
};

         
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>

輪播

所有點形狀都可以使用 rotation 選項旋轉 (以度為單位)。舉例來說,我們可以將下列面積圖中的三角形旋轉 180 度,讓三角形朝下:

選項完整 HTML
        var options = {
          legend
: 'none',
          colors
: ['#15A0C8'],
          pointSize
: 30,
         
pointShape: { type: 'triangle', rotation: 180 }
       
};
  <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', 'Y'],
             
[1, 3],
             
[2, 2.5],
             
[3, 2],
             
[4, 3],
             
[5, 4.5],
             
[6, 6.5],
             
[7, 9],
             
[8, 12]
       
]);

       
var options = {
          legend
: 'none',
          colors
: ['#15A0C8'],
          pointSize
: 30,
         
pointShape: { type: 'triangle', rotation: 180 }
       
};

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

自訂個別積分

根據預設,套用到某個點的樣式會套用至系列中的所有點。如要變更特定資料點的外觀,只要設定其樣式即可。

在下圖中,我們將其中一個點的大小增加、將透明度降低為 0.3,以及變更形狀和顏色:

<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', 'Y', {'type': 'string', 'role': 'style'}],
             
[1, 3, null],
             
[2, 2.5, null],
             
[3, 3, null],
             
[4, 4, null],
             
[5, 4, null],
             
[6, 3, 'point { size: 18; shape-type: star; fill-color: #a52714; }'],
             
[7, 2.5, null],
             
[8, 3, null]
       
]);

       
var options = {
          legend
: 'none',
          hAxis
: { minValue: 0, maxValue: 9 },
          curveType
: 'function',
          pointSize
: 7,
          dataOpacity
: 0.3
       
};

       
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>

可用的自訂樣式如下:

  • fill-color (以十六進位字串表示)。
  • shape-dent
  • shape-rotation
  • shape-sides
  • shape-type
  • stroke-color (以十六進位字串表示)。
  • stroke-width (以十六進位字串表示)。
  • size
  • visible (指出該點是否可見)。

不透明度是由樣式控制,而是使用 dataOpacity 選項。