視覺化：散佈圖

總覽

散佈圖會在圖表上標出資料點。使用者將遊標懸停在資料點上時，系統就會顯示工具提示，並提供更多資訊。

視瀏覽器功能而定，Google 散佈圖會在瀏覽器中使用 SVG 或 VML 算繪。

範例

 
<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([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

變更形狀及加上動畫效果

根據預設，散佈圖會以圓形呈現資料集的元素。您可以使用 pointShape 選項指定其他形狀，詳情請參閱自訂點說明文件。

與多數其他 Google 圖表一樣，您可以使用事件製作動畫。您可以為第一個 ready 事件新增事件監聽器，並在完成需要的修改後重新繪製圖表。在第一個 ready 事件過後，您可以監聽 animationfinish 事件以重複執行程序，進而產生連續動畫。animation 選項可控制重繪的執行方式：立即 (無動畫) 或流暢，以及是否流暢且快速地執行何種行為。

良好零件
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
完整 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 = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

建立 Material 散佈圖

Google 在 2014 年公布了相關規範，讓 Google 平台提供的各種資源和應用程式 (例如 Android 應用程式) 能夠提供一致的外觀和風格。這項作業稱為「Material Design」。我們將提供所有核心圖表的「Material」版本；如果您需要，歡迎繼續使用。

建立材質散佈圖表與建立「傳統」散佈圖的做法類似，您會載入 Google Visualization API (雖然使用 'scatter' 套件而非 'corechart' 套件)、定義資料表，然後建立物件 (但類別不是 google.charts.Scatter，而不是 google.visualization.ScatterChart)。

注意：舊版 Internet Explorer 不支援 Material 圖表。(IE8 以下版本不支援 SVG，Material 圖表需要此格式)。

與傳統散佈圖相比，「材質散佈圖表」有多項小幅改善，包括可因應重疊點的可變透明度、改善調色盤、標籤格式更清晰、預設間距、更柔和的格線和標題 (以及新增字幕)。

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

Material 圖表目前為 Beta 版。外觀和互動功能基本上是最終版本，但許多傳統圖表尚未提供可用選項。如需目前不支援的選項清單，請參閱這個問題。

此外，宣告選項的方式尚未定案，因此如果你使用的是任何傳統選項，就必須將以下行取代為 Material 選項：

chart.draw(data, options);

...包含以下內容：

chart.draw(data, google.charts.Scatter.convertOptions(options));

2-Y 圖表

有時您會想在散佈圖中顯示兩個序列，其中包含兩個獨立的 Y 軸：一個序列的左軸，另一個則用右軸：

請注意，我們不僅是兩個 Y 軸不同的標記 (「期末成績」和「受訓時數」)，也分別有各自的評分標準和格線。如要自訂這項行為，請使用 vAxis.gridlines 選項。

在下方程式碼中，axes 和 series 選項會指定圖表的雙 Y 外觀。series 選項會指定每個座標要使用的軸 ('final grade' 和 'hours studied'；不需要與資料表中的資料欄名稱建立任何關係)。接著，axes 選項會將這張圖表設為雙 Y 圖表，將 'Final Exam Grade' 軸放在左側和右側 'Hours Studied' 軸。

      google.charts.load('current', {'packages':['corechart', 'scatter']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Scatter(chartDiv);
          materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ScatterChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

「Top-X」圖表

注意：Top-X 軸僅適用於 Material 圖表 (也就是含有 scatter 套件的軸)。

如果您想將 X 軸標籤和標題置於圖表頂端而非底部，可以使用 axes.x 選項在 Material 圖表中執行這項操作：

 
      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

        chart.draw(data, google.charts.Scatter.convertOptions(options));
      }

載入中

google.charts.load 套件名稱為 "corechart"，視覺化的類別名稱為 google.visualization.ScatterChart。

  google.charts.load("current", {packages: ["corechart"]});

  var visualization = new google.visualization.ScatterChart(container);

質感散佈圖表，google.charts.load 套件名稱為 "scatter"，視覺化的類別名稱為 google.charts.Scatter。

  google.charts.load("current", {packages: ["scatter"]});

  var visualization = new google.charts.Scatter(container);

資料格式

資料列：表格中的每一列都代表一組 x 軸值相同的資料點。

資料欄：

  第 0 欄 第 1 欄 ... 第 N 欄
用途： 資料點 X 值 序列 1 Y 值 ... 序列 N Y 值
資料類型： 字串、數字或日期/日期/時間/時間 字串、數字或日期/日期/時間/時間 ... 字串、數字或日期/日期/時間/時間
角色： 資料 資料 ... 資料
選用的資料欄角色：

無

 ...

如要指定多個序列，請指定兩個以上的 Y 軸欄，且只在一個 Y 欄中指定 Y 值：

X 值 序列 1 Y 值 序列 2 Y 值
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

設定選項

名稱
aggregationTarget
系統會將多個選取的資料彙整成工具提示：
  • 'category'：按照 x 值將所選資料分組。
  • 'series'：按照序列將所選資料分組。
  • 'auto'：如果所有選項都具有相同的 x 值，請依 x 值分組所選資料，否則會依序列分組。
  • 'none'：每個選取項目只顯示一個工具提示。
aggregationTarget 通常會與 selectionMode 和 tooltip.trigger 搭配使用，例如：
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
類型：字串
預設：「auto」
animation.duration

此為動畫的時間長度，以毫秒為單位。詳情請參閱動畫說明文件。

類型：數字
預設值：0
animation.easing

套用至動畫的加/減速功能。可用選項如下所示：

  • 「線性」- 固定速度。
  • 「in」 - 減輕 - 開始緩慢並加快速度。
  • 'out' - 簡化 - 啟動並放慢速度。
  • 「inAndOut」- 加速進出，先放慢速度、放慢速度再放慢。
類型：字串
預設：「線性」
animation.startup

指定圖表是否會在初次繪圖時顯示動畫。如果設為 true，圖表會從基準開始，並動畫呈現最終狀態。

類型：布林值
預設 false
annotations.boxStyle

如果圖表支援註解，annotations.boxStyle 物件會控制註解周圍方塊的外觀：

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

這個選項目前支援區域、長條圖、柱狀圖、組合圖、折線圖和散佈圖。註解圖表不支援此功能。

類型：物件
預設值：null
annotations.datum
如果圖表支援註解，annotations.datum 物件可讓您覆寫 Google 圖表為個別資料元素提供的註解 (例如長條圖上每個長條顯示的值)。您可以使用 annotations.datum.stem.color 控制顏色，使用 annotations.datum.stem.length 控製字根長度，並使用 annotations.datum.style 控制樣式。
類型：物件
預設：顏色為「黑色」，長度為 12，樣式為「點」。
annotations.domain
如果圖表支援註解，annotations.domain 物件可讓您覆寫 Google 圖表針對網域提供的註解 (圖表的主要軸，例如一般折線圖上的 X 軸)。您可以使用 annotations.domain.stem.color 控制顏色，使用 annotations.domain.stem.length 控製字根長度，並使用 annotations.domain.style 控制樣式。
類型：物件
預設：顏色為「黑色」，長度為 5，樣式為「點」。
annotations.highContrast
如果圖表支援註解，您可以使用 annotations.highContrast 布林值覆寫 Google 圖表的註解顏色選項。根據預設，annotations.highContrast 為 true，因此圖表會選取對比度良好的註解顏色：深色背景使用淺色，淺色背景則為深色。如果將 annotations.highContrast 設為 false，且未指定自己的註解顏色，Google 圖表會為註解使用預設的系列顏色：
類型：布林值
預設值：true
annotations.stem
如果圖表支援註解，您可以使用 annotations.stem 物件覆寫 Google 圖表的 Stem 樣式選項。您可以使用 annotations.stem.color 和字根長度annotations.stem.length控制顏色。請注意，詞幹長度選項對具有 'line' 樣式的註解沒有影響：針對 'line' Daatum 註解，詞幹長度一律與文字相同；如果是 'line' 網域註解，詞幹延伸至整個圖表。
類型：物件
預設：顏色為「黑色」；網域註解的長度為 5，Datum 註解則為 12。
annotations.style
如果圖表支援註解，您可以使用 annotations.style 選項覆寫 Google 圖表的註解類型選項。可以是 'line' 或 'point'。
類型：字串
預設：「point」
annotations.textStyle
如果圖表支援註解，annotations.textStyle 物件會控制註解文字的外觀：
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

這個選項目前支援區域、長條圖、柱狀圖、組合圖、折線圖和散佈圖。 註解圖表 不支援此功能。

類型：物件
預設值：null
axisTitlesPosition

比較軸標題和圖表區域的位置。支援的值：

  • 內 - 在圖表區域繪製軸標題。
  • 消失 - 在圖表區域外繪製軸標題。
  • 無 - 省略軸標題。
類型：字串
預設值：「out」
backgroundColor

圖表主要區域的背景顏色。可以是簡單的 HTML 顏色字串 (例如 'red' 或 '#00cc00')，或具有下列屬性的物件。

類型：字串或物件
預設：「white」
backgroundColor.stroke

圖表邊框顏色，以 HTML 顏色字串表示。

類型：字串
預設值：「#666」
backgroundColor.strokeWidth

邊框寬度 (以像素為單位)。

類型：數字
預設值：0
backgroundColor.fill

圖表填滿顏色，以 HTML 顏色字串表示。

類型：字串
預設：「white」
chart.title

在質感設計圖表中，此選項可指定標題。

類型：字串
預設值：null
chart.subtitle

在質感設計圖表中，此選項可指定字幕。只有質感圖表支援字幕。

類型：字串
預設值：null
chartArea

此物件可讓成員設定圖表區域的位置和大小 (繪製圖表時不含軸和圖例)。系統支援兩種格式：一個數字，或後接 % 的數字。簡單數字是以像素為單位的值，數字後面加上 % 代表百分比。範例：chartArea:{left:20,top:0,width:'50%',height:'75%'}

類型：物件
預設值：null
chartArea.backgroundColor
圖表區域背景顏色。使用字串時，可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時，可以提供下列屬性：
  • stroke：以十六進位字串或英文顏色名稱提供的顏色。
  • strokeWidth：如有提供，會在指定寬度的圖表區域 (以及 stroke 的顏色) 周圍繪製邊框。
類型：字串或物件
預設：「white」
chartArea.left

從左框線繪製圖表的時間長度。

類型：數字或字串
預設：自動
chartArea.top

圖表與上框線的繪製距離。

類型：數字或字串
預設：自動
chartArea.width

圖表區域寬度。

類型：數字或字串
預設：自動
chartArea.height

圖表區域高度。

類型：數字或字串
預設：自動
顏色

圖表元素要使用的顏色。字串陣列，其中每個元素都是 HTML 顏色字串，例如：colors:['red','#004411']。

類型：字串陣列
預設：預設顏色
十字瞄準線

包含圖表的 crosshair 屬性的物件。

類型：物件
預設值：null
crosshair.color

十字瞄準線顏色，以顏色名稱 (例如「blue」) 或是 RGB 值 (例如「#adf」)。

類型：字串
類型：default
crosshair.focused

焦點位於時，包含十字瞄準線屬性的物件。
例如：crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

類型：物件
預設：預設值
crosshair.opacity

十字瞄準線的不透明度，0.0 表示完全透明，且 1.0 完全不透明。

類型：數字
預設值：1.0
crosshair.orientation

十字瞄準線，可以是「垂直」代表垂直髮，「水平」代表只有水平，「兩者」代表傳統十字。

類型：字串
預設：「secondary」
crosshair.selected

包含選取時交叉線屬性的物件。
例如： crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

類型：物件
預設：預設值
crosshair.trigger

顯示十字瞄準線的時機：在 'focus'、'selection' 或 'both' 上。

類型：字串
預設：「secondary」
curveType

控制線條寬度不為零時的線條曲線。可以是下列任一值：

  • 「無」- 沒有曲線的直線。
  • 函式 - 線條角度會平滑。
類型：字串
預設：「無」
dataOpacity

資料點的透明度，1.0 表示完全不透明，0.0 則完全透明。 在散佈圖、直方圖、長條圖和柱狀圖中，這是指可見資料：散佈圖中的圓點和其他矩形中的矩形。在選取資料的圖表中，系統會建立圓點 (例如折線和面積圖)，指的是懸停或選取時顯示的圓形。組合圖同時呈現出兩種行為，而這個選項對其他圖表沒有影響。(如要變更趨勢線的不透明度，請參閱 趨勢線不透明度 相關說明)。

類型：數字
預設值：1.0
enableInteractivity

圖表是否會擲回以使用者為基礎的事件，或是對使用者互動做出反應。如果設為 False，圖表不會擲回「select」或其他互動型事件 (但「會」擲回已就緒或錯誤的事件)，且不會顯示懸停文字，或根據使用者輸入內容而變更。

類型：布林值
預設值：true
explorer

explorer 選項可讓使用者平移及縮放 Google 圖表。explorer: {} 提供預設的探索工具行為，讓使用者可透過拖曳來水平和垂直平移，以及捲動畫面來縮放畫面。

這項功能仍在實驗階段，未來版本可能會有所異動。

注意：多層檢視僅適用於連續軸 (例如數字或日期)。

類型：物件
預設值：null
explorer.actions

Google 圖表探索工具支援三種操作：

  • dragToPan：拖曳即可水平和垂直平移圖表。如要僅沿著水平軸平移，請使用 explorer: { axis: 'horizontal' }。垂直軸也很類似。
  • dragToZoom：探索工具的預設行為是在使用者捲動畫面時放大和縮小。如果使用 explorer: { actions: ['dragToZoom', 'rightClickToReset'] }，沿著矩形區域拖曳即可放大該區域。建議您在使用 dragToZoom 時一律使用 rightClickToReset。如要自訂縮放比例，請參閱 explorer.maxZoomIn、explorer.maxZoomOut 和 explorer.zoomDelta。
  • rightClickToReset：在圖表上按一下滑鼠右鍵，即可將圖表恢復至原始的平移和縮放等級。
類型：字串陣列
預設：['dragToPan', 'rightClickToReset']
explorer.axis

根據預設，使用 explorer 選項時，使用者可以水平和垂直平移。如果您只想橫向平移，請使用 explorer: { axis: 'horizontal' }。同樣地，explorer: { axis: 'vertical' } 會啟用僅限垂直的平移功能。

類型：字串
預設：水平和垂直平移
explorer.keepInBounds

根據預設，無論資料位於何處，使用者都可以平移所有內容。如要確保使用者不會平移超出原始圖表範圍，請使用 explorer: { keepInBounds: true }。

類型：布林值
預設值：false
explorer.maxZoomIn

探險家可放大的上限。根據預設，使用者可以放大到足夠的畫面，只會看到原始檢視畫面的 25%。設定 explorer: { maxZoomIn: .5 } 能讓使用者只放大到夠大的程度，只看得到原始檢視畫面的一半。

類型：數字
預設值：0.25
explorer.maxZoomOut

探險家可縮小的最大範圍。根據預設，使用者可以縮小到夠大的範圍，讓圖表只佔用 1/4 的可用空間。如果設定 explorer: { maxZoomOut: 8 }，使用者就能縮小到圖表只佔 1/8 的可用空間。

類型：數字
預設：4
explorer.zoomDelta

使用者放大或縮小時，explorer.zoomDelta 會決定其縮放的比例。數字越小，縮放效果也越流暢。

類型：數字
預設值：1.5
fontSize

圖表中所有文字的預設字型大小 (以像素為單位)。您可以使用特定圖表元素的屬性覆寫這項設定。

類型：數字
預設：自動
fontName

圖表中所有文字的預設字型。您可以使用特定圖表元素的屬性覆寫這項設定。

類型：字串
預設值：「trigger」
forceIFrame

在內嵌頁框中繪製圖表。(請注意，在 IE8 中，系統會忽略此選項；所有 IE8 圖表都會繪製成 iFrame。)

類型：布林值
預設值：false
hAxis

可讓成員設定各種水平軸元素的物件。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
類型：物件
預設值：null
hAxis.baseline

橫軸的基準線。

類型：數字
預設：自動
hAxis.baselineColor

水平軸的基準顏色。可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。

類型：數字
預設：「black」
hAxis.direction

沿著水平軸的值成長的方向。指定 -1 將值的順序反轉。

類型：1 或 -1
預設值：1
hAxis.format

數字軸標籤的格式字串。這是 ICU 模式集 的子集。舉例來說，{format:'#,###%'} 會針對值 10、7.5 及 0.5，顯示「1,000%」、「750%」和「50%」。您也可以提供下列任一項目：

  • {format: 'none'}：顯示不含格式的數字 (例如8000000 顆)
  • {format: 'decimal'}：顯示包含千位數分隔符的數字 (例如8,000,000 人)
  • {format: 'scientific'}：以科學記號顯示數字 (例如8e6)。
  • {format: 'currency'}：以當地幣別顯示數字 (例如$8,000,000.00 美元)
  • {format: 'percent'}：以百分比顯示數字 (例如800,000,000%)
  • {format: 'short'}：顯示縮寫數字 (例如800 萬)
  • {format: 'long'}：將數字顯示為完整的字詞 (例如800 萬)

套用至標籤的實際格式是衍生自載入 API 時使用的語言代碼。詳情請參閱「 載入特定語言代碼的圖表 」。

計算刻點值和格線時，系統會考慮所有相關格線選項的幾種替代組合，如果格式化的刻點標籤重複或重疊，系統會拒絕替代組合。因此，如果您只想顯示整數刻點值，則可以指定 format:"#"，但請注意，如果沒有替代項目符合這項條件，系統就不會顯示格線或刻點。

類型：字串
預設：自動
hAxis.gridlines

具有屬性，可設定水平軸格線的物件。請注意，水平軸格線是垂直繪製的。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{color: '#333', minSpacing: 20}
類型：物件
預設值：null
hAxis.gridlines.color

圖表區域中的水平格線顏色。指定有效的 HTML 顏色字串。

類型：字串
預設：「#CCC」
hAxis.gridlines.count

圖表區域中的水平格線約略數量。 如果為 gridlines.count 指定正數，系統會使用該數字計算格線之間的 minSpacing。 您可以將 1 值指定為只繪製一個格線，指定 0 值則可繪製不繪製格線。指定 -1 (此為預設值)，即可依據其他選項自動計算格線數量。

類型：數字
預設：-1
hAxis.gridlines.units

將日期/日期時間/時間資料類型與圖表計算的格線搭配使用時，覆寫預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。

一般格式為：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

詳情請參閱日期和時間。

類型：物件
預設值：null
hAxis.minorGridlines

此物件可讓成員在水平軸上設定次要格線，與 hAxis.gridlines 選項類似。

類型：物件
預設值：null
hAxis.minorGridlines.color

圖表區域中的水平小格線顏色。指定有效的 HTML 顏色字串。

類型：字串
預設：使用格線與背景顏色混合
hAxis.minorGridlines.count

minorGridlines.count 選項大部分都已淘汰，除非將計數設為 0 來停用次要格線。次要格線的數量現在完全取決於主要格線之間的間隔 (請參閱 hAxis.gridlines.interval) 和最低所需空間 (請參閱 hAxis.minorGridlines.minSpacing)。

類型：數字
預設值：1
hAxis.minorGridlines.units

與計算的次要格線搭配使用時，覆寫日期/日期時間/時間資料類型各個面向的預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。

一般格式為：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

詳情請參閱日期和時間。

類型：物件
預設值：null
hAxis.logScale

hAxis 屬性將水平軸設為對數尺度 (要求所有值都必須為正數)。如果為「是」，請設為 true。

類型：布林值
預設值：false
hAxis.scaleType

hAxis 屬性，讓水平軸成為對數尺度。可以是下列任一值：

  • null - 不執行對數縮放。
  • 「log」：對數縮放。系統不會繪製負值和零的值。這個選項與設定 hAxis: { logscale: true } 相同。
  • 「MirrorLog」：繪製負值和零的對數進行對數縮放。負數的繪製值是絕對值記錄檔的負數。接近 0 的值會以線性比例繪製。
類型：字串
預設值：null
hAxis.textPosition

橫軸文字相對於圖表區域的位置。支援的值：「out」、「in」、「none」。

類型：字串
預設值：「out」
hAxis.textStyle

這個物件會指定水平軸文字樣式。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

將自動產生的 X 軸刻點替換為指定的陣列。陣列的每個元素應為有效的刻點值 (例如數字、日期、時間或時間) 或物件。如果是物件，則應提供用於刻點值的 v 屬性，以及選用的 f 屬性，其中含有要顯示為標籤的常值字串。

除非您指定要覆寫的 viewWindow.min 或 viewWindow.max，否則 viewWindow 會自動展開以包含最小和最大滴答。

例：

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
類型：元素陣列
預設：自動
hAxis.title

hAxis 屬性，指定橫軸的標題。

類型：字串
預設值：null
hAxis.titleTextStyle

這個物件會指定水平軸標題文字樣式。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

將水平軸的最大值移至指定值；在多數圖表中，這個值會向右移動。如果設為值小於資料的最大 x 值，系統會忽略這項設定。 hAxis.viewWindow.max 會覆寫這項屬性。

類型：數字
預設：自動
hAxis.minValue

將水平軸的最小值移至指定值；在大多數圖表中，這個數字會向左移動。如果設定的值大於資料中最小值 x 值，系統會忽略這項設定。 hAxis.viewWindow.min 會覆寫這項屬性。

類型：數字
預設：自動
hAxis.viewWindowMode

指定如何縮放水平軸，以轉譯圖表區域中的值。支援的字串值如下：

  • 「漂亮」：縮放水平值，讓最大和最小值在圖表區域的左右兩側顯示。ViewWindow 會展開為最接近的數字主要格線，或找出最接近日期和時間的次要格線。
  • 「maximized」：縮放水平值，讓最大和最小值觸及圖表區域的左右兩側。這項操作會忽略 haxis.viewWindow.min 和 haxis.viewWindow.max。
  • 「explicit」：已淘汰指定圖表區域左右比例值的選項。(已淘汰，因為 haxis.viewWindow.min 和 haxis.viewWindow.max 是多餘的值)。系統會裁剪這些值以外的資料值。您必須指定 hAxis.viewWindow 物件，說明要顯示的最大值和最小值。
類型：字串
預設值：等同於「漂亮」，但使用時優先度為 haxis.viewWindow.min 和 haxis.viewWindow.max。
hAxis.viewWindow

指定水平軸的裁剪範圍。

類型：物件
預設值：null
hAxis.viewWindow.max

要顯示的水平資料最大值。

當 hAxis.viewWindowMode 為「漂亮」或「最大化」時，系統會忽略此值。

類型：數字
預設：自動
hAxis.viewWindow.min

要顯示的水平資料最小值。

當 hAxis.viewWindowMode 為「漂亮」或「最大化」時，系統會忽略此值。

類型：數字
預設：自動
高度

圖表的高度，以像素為單位。

類型：數字
預設：所含元素的高度
傳說

由成員組成的物件，可設定圖例的各個層面。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
類型：物件
預設值：null
legend.alignment

圖例的對齊。可以是下列其中一項：

  • 「開始」：與為圖例分配的區域起點對齊。
  • 「center」：以圖例的分配區域為中心。
  • 「end」：與圖例的分配區域結尾對齊。

起點、中心和結束點是以圖例的樣式 (垂直或水平) 為準。舉例來說，在「右側」圖例中，「start」和「end」分別位於頂端和底部。如果是「頂端」圖例，「start」和「end」則分別位於區域的左側和右側。

預設值取決於圖例位置。「bottom」圖例的預設值為「center」，其他圖例則預設為「start」。

類型：字串
預設：自動
legend.maxLines

圖例中的行數上限。將這個項目設為大於一的數字，即可為圖例新增線條。請注意：決定實際算繪行數的確切邏輯仍在浮動中。

此選項目前僅適用於圖例.position 為「top」時。

類型：數字
預設值：1
legend.pageIndex

已為圖例預先選取零開始頁面索引。

類型：數字
預設值：0
legend.position

圖例位置。可以是下列其中一項：

  • 「bottom」- 圖表下方。
  • 'left' - 在圖表左側，左軸沒有任何相關的序列。 因此，如果您想在左側放置圖例，請使用 targetAxisIndex: 1 選項。
  • 「in」 - 圖表內部 (位於圖表左上角)。
  • 「無」- 不顯示圖例。
  • 「right」：圖表右側。與 vAxes 選項不相容。
  • 「top」：圖表上方。
類型：字串
預設值：「right」
legend.textStyle

指定圖例文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
lineWidth

線條寬度 (以像素為單位)。使用 0 即可隱藏所有線條，只顯示點。

類型：數字
預設值：0
方向

圖表方向。如果設為 'vertical'，系統會旋轉圖表的軸線，讓柱狀圖 (例如) 柱狀圖變為長條圖，而面積圖會向右成長而非向上：

類型：字串
預設：「Horizontal」
pointShape

個別資料元素的形狀：「圓形」、「三角形」、「正方形」、「鑽石」、「星星」或「多邊形」。如需範例，請參閱 點數說明文件 。

類型：字串
預設：「circle」
pointSize

資料點的直徑，以像素為單位。輸入 0 即可隱藏所有點。您可以使用 series 屬性覆寫個別序列的值。如果使用趨勢線，這個選項也會影響組成資料點的 pointSize，這會改變趨勢線的顯示寬度。如要避免這種情況，您可以使用 trendlines.n.pointsize 選項覆寫該設定。

類型：數字
預設：7
pointsVisible

決定是否顯示點。設為 false 即可隱藏所有點。 您可以使用 series 屬性覆寫個別序列的值。如果使用趨勢線，pointsVisible 選項會影響所有趨勢線上各點的可見度，除非您使用 trendlines.n.pointsVisible 選項覆寫這個趨勢。

您也可以使用 "point {visible: true}" 格式的樣式角色覆寫這項設定。

類型：布林值
預設值：true
selectionMode

當 selectionMode 為 'multiple' 時，使用者可以選取多個資料點。

類型：字串
預設：「single」
系列叢書

物件的陣列，每個物件都會說明圖表中對應序列的格式。如要使用時間序列的預設值，請指定空白物件 {}。如未指定序列或值，則會使用全域值。每個物件都支援下列屬性：

  • color - 此系列使用的顏色。指定有效的 HTML 顏色字串。
  • labelInLegend：要顯示在圖表圖例中的序列說明。
  • lineWidth：覆寫這個序列的全域 lineWidth 值。
  • pointShape：覆寫這個系列的全域 pointShape 值。
  • pointSize：覆寫這個序列的全域 pointSize 值。
  • pointsVisible：覆寫這個系列的全域 pointsVisible 值。
  • visibleInLegend - 布林值，其中 true 代表序列應有圖例項目，而 false 則表示不應。預設值為 true。

您可以指定物件的陣列，其中每個陣列都會依指定順序套用至系列，或者您可以指定各子項一個數字鍵，代表要套用哪個序列。舉例來說，以下兩個宣告皆相同，並將第一個序列宣告為來自圖例，第 4 個是紅色且從圖例中消失：

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
類型：物件陣列，或含有巢狀物件的物件
預設：{}
主題

主題是一組預先定義的選項值，可搭配運作來達成特定圖表行為或視覺效果。目前只有一個主題：

  • 「最大化」- 將圖表區域最大化，並在圖表區內繪製圖例和所有標籤。設定下列選項： 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
類型：字串
預設值：null
title

顯示在圖表上方的文字。

類型：字串
預設：無標題
titlePosition

圖表標題的放置位置，與圖表區域比較。支援的值：

  • in - 在圖表區域繪製標題。
  • out - 在圖表區域外繪製標題。
  • 無 - 省略標題。
類型：字串
預設值：「out」
titleTextStyle

指定標題文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
工具提示

可讓成員設定各種工具提示元素的物件。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{textStyle: {color: '#FF0000'}, showColorCode: true}
類型：物件
預設值：null
tooltip.ignoreBounds

如果設為 true，系統就會允許工具提示的繪圖，超出圖表任何邊的邊界。

注意：這僅適用於 HTML 工具提示。透過 SVG 工具提示啟用這項功能時，系統會裁剪圖表邊界外的所有溢位。詳情請參閱「自訂工具提示內容」一文。

類型：布林值
預設值：false
tooltip.isHtml

如果設為 true，將使用 HTML 算繪 (而非 SVG 算繪) 的工具提示。詳情請參閱「自訂工具提示內容」一文。

注意：泡泡圖圖表「不」支援透過工具提示欄資料角色自訂 HTML 工具提示內容。

類型：布林值
預設值：false
tooltip.showColorCode

如為 true，則在工具提示中的系列資料旁邊顯示彩色方塊。

類型：布林值
預設值：false
tooltip.textStyle

指定工具提示文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

觸發工具提示的使用者互動：

  • 「焦點」- 當使用者將遊標懸停在元素上時，就會顯示工具提示。
  • 「無」- 不會顯示工具提示。
  • 「selection」- 使用者選取元素時，系統會顯示工具提示。
類型：字串
預設：「focus」
趨勢線

在支援圖表的圖表中顯示 趨勢線 。根據預設，系統會使用線性趨勢線，但您可以使用 trendlines.n.type 選項自訂這個選項。

趨勢線是以個別系列為依據，因此您的選項在大部分時間看起來會像這樣：

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
類型：物件
預設值：null
trendlines.n.color

趨勢線 的顏色，以英文顏色名稱或十六進位字串表示。

類型：字串
預設：預設系列顏色
trendlines.n.degree

針對 type: 'polynomial' 的 趨勢線 ，多項式的程度 (2 代表二次方，3 代表立方體，以此類推)。(即將推出的 Google 圖表版本將預設等級從 3 變更為 2)。

類型：數字
預設值：3
trendlines.n.labelInLegend

設定後， 趨勢線 會以這個字串顯示在圖例中。

類型：字串
預設值：null
trendlines.n.lineWidth

趨勢線 的線條寬度 (以像素為單位)。

類型：數字
預設值：2
trendlines.n.opacity

趨勢線 的透明度，從 0.0 (透明) 到 1.0 (不透明)。

類型：數字
預設值：1.0
trendlines.n.pointSize

趨勢線 是指在圖表上戳出許多圓點；這個很少需要的選項可讓您自訂圓點的大小。趨勢線的 lineWidth 選項通常較為理想。不過，如果您使用全域 pointSize 選項，且希望趨勢線的點大小不同，就需要這個選項。

類型：數字
預設值：1
trendlines.n.pointsVisible

趨勢線 會在圖表中戳許多圓點。趨勢線的 pointsVisible 選項可決定是否要顯示特定趨勢線的資料點。

類型：布林值
預設值：true
trendlines.n.showR2

是否在圖例或趨勢線工具提示中顯示 決定係數 。

類型：布林值
預設值：false
trendlines.n.type

趨勢線 是否為 'linear' (預設)、'exponential' 或 'polynomial'。

類型：字串
預設：線性
trendlines.n.visibleInLegend

是否在圖例中顯示 趨勢線 。(顯示在趨勢線的工具提示中)。

類型：布林值
預設值：false
vAxis

包含成員的物件，可設定各種垂直軸元素。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
類型：物件
預設值：null
vAxis.baseline

vAxis 屬性，指定縱軸的基準。如果基準大於最高格線大小或小於最低格線，系統會將基準線四捨五入至最接近的格線。

類型：數字
預設：自動
vAxis.baselineColor

指定縱軸的基準顏色。可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。

類型：數字
預設：「black」
vAxis.direction

垂直軸值成長的方向。根據預設，低值會顯示在圖表底部。指定 -1 將值的順序反轉。

類型：1 或 -1
預設值：1
vAxis.format

數字軸標籤的格式字串。這是 ICU 模式集 的子集。舉例來說，{format:'#,###%'} 會針對值 10、7.5 及 0.5，顯示「1,000%」、「750%」和「50%」。您也可以提供下列任一項目：

  • {format: 'none'}：顯示不含格式的數字 (例如8000000 顆)
  • {format: 'decimal'}：顯示包含千位數分隔符的數字 (例如8,000,000 人)
  • {format: 'scientific'}：以科學記號顯示數字 (例如8e6)。
  • {format: 'currency'}：以當地幣別顯示數字 (例如$8,000,000.00 美元)
  • {format: 'percent'}：以百分比顯示數字 (例如800,000,000%)
  • {format: 'short'}：顯示縮寫數字 (例如800 萬)
  • {format: 'long'}：將數字顯示為完整的字詞 (例如800 萬)

套用至標籤的實際格式是衍生自載入 API 時使用的語言代碼。詳情請參閱「 載入特定語言代碼的圖表 」。

計算刻點值和格線時，系統會考慮所有相關格線選項的幾種替代組合，如果格式化的刻點標籤重複或重疊，系統會拒絕替代組合。因此，如果您只想顯示整數刻點值，則可以指定 format:"#"，但請注意，如果沒有替代項目符合這項條件，系統就不會顯示格線或刻點。

類型：字串
預設：自動
vAxis.gridlines

包含成員用來設定縱軸格線的物件。請注意，垂直軸格線是水平繪製的。如要指定這個物件的屬性，您可以使用物件常值標記法，如下所示：

{color: '#333', minSpacing: 20}
類型：物件
預設值：null
vAxis.gridlines.color

圖表區域中的垂直格線顏色。指定有效的 HTML 顏色字串。

類型：字串
預設：「#CCC」
vAxis.gridlines.count

圖表區域中的水平格線約略數量。 如果為 gridlines.count 指定正數，系統會使用該數字計算格線之間的 minSpacing。 您可以將 1 值指定為只繪製一個格線，指定 0 值則可繪製不繪製格線。指定 -1 (此為預設值)，即可依據其他選項自動計算格線數量。

類型：數字
預設：-1
vAxis.gridlines.units

將日期/日期時間/時間資料類型與圖表計算的格線搭配使用時，覆寫預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。

一般格式為：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

詳情請參閱日期和時間。

類型：物件
預設值：null
vAxis.minorGridlines

此物件可讓成員在垂直軸上設定次要格線，與 vAxis.gridlines 選項類似。

類型：物件
預設值：null
vAxis.minorGridlines.color

圖表區域中的垂直小格線顏色。指定有效的 HTML 顏色字串。

類型：字串
預設：使用格線與背景顏色混合
vAxis.minorGridlines.count

「orGridlines.count」選項主要已淘汰，除非將計數設為 0 以停用次要格線。次要格線的數量取決於主要格線之間的間隔 (請參閱 vAxis.gridlines.interval) 與最低所需空間 (請參閱 vAxis.minorGridlines.minSpacing)。

類型：數字
預設值：1
vAxis.minorGridlines.units

與計算的次要格線搭配使用時，覆寫日期/日期時間/時間資料類型各個面向的預設格式。允許格式化年、月、日、小時、分鐘、秒鐘和毫秒。

一般格式為：

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

詳情請參閱日期和時間。

類型：物件
預設值：null
vAxis.logScale

如果設為 true，系統會將垂直軸設為對數尺度。注意：所有值都必須為正數。

類型：布林值
預設值：false
vAxis.scaleType

vAxis 屬性，讓垂直軸成為對數尺度。可以是下列任一值：

  • null - 不執行對數縮放。
  • 「log」：對數縮放。系統不會繪製負值和零的值。這個選項與設定 vAxis: { logscale: true } 相同。
  • 「MirrorLog」：繪製負值和零的對數進行對數縮放。負數的繪製值是絕對值記錄檔的負數。接近 0 的值會以線性比例繪製。
類型：字串
預設值：null
vAxis.textPosition

垂直軸文字相對於圖表區域的位置。支援的值：「out」、「in」、「none」。

類型：字串
預設值：「out」
vAxis.textStyle

指定縱軸文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

將自動產生的 Y 軸刻點替換為指定陣列。陣列的每個元素應為有效的刻點值 (例如數字、日期、時間或時間) 或物件。如果是物件，則應提供用於刻點值的 v 屬性，以及選用的 f 屬性，其中含有要顯示為標籤的常值字串。

除非您指定要覆寫的 viewWindow.min 或 viewWindow.max，否則 viewWindow 會自動展開以包含最小和最大滴答。

例：

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
類型：元素陣列
預設：自動
vAxis.title

vAxis 屬性，指定縱軸的標題。

類型：字串
預設：無標題
vAxis.titleTextStyle

指定縱軸標題文字樣式的物件。物件的格式如下：

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color 可以是任何 HTML 顏色字串，例如 'red' 或 '#00cc00'。另請參閱 fontName 和 fontSize。

類型：物件
預設： {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

將垂直軸的最大值移至指定值；在大部分的圖表中，這個值會向上移動。如果設為值小於資料的最大 y 值，系統會忽略這項設定。 vAxis.viewWindow.max 會覆寫這項屬性。

類型：數字
預設：自動
vAxis.minValue

將垂直軸的最小值移至指定值；在多數圖表中，這個值會向下移動。如果設定的值大於資料最小 y 值，則系統會忽略這項設定。 vAxis.viewWindow.min 會覆寫這項屬性。

類型：數字
預設值：null
vAxis.viewWindowMode

指定如何縮放縱軸，以轉譯圖表區域中的值。支援的字串值如下：

  • 「漂亮」- 縮放垂直值，讓最大和最小值在圖表區域底部和頂端顯示一點。ViewWindow 會展開為最接近的數字主要格線，或找出最接近日期和時間的次要格線。
  • 「maximized」- 縮放垂直值，讓最大值和最小值觸及圖表區域的頂端和底部。這項操作會忽略 vaxis.viewWindow.min 和 vaxis.viewWindow.max。
  • 「explicit」：已淘汰指定圖表區域頂部和底部縮放值的選項。(已淘汰，因為 vaxis.viewWindow.min 和 vaxis.viewWindow.max 是多餘的)。系統會裁剪超出這些值的資料值。您必須指定 vAxis.viewWindow 物件，說明要顯示的最大值和最小值。
類型：字串
預設值：等同於「漂亮」，但使用時優先度為 vaxis.viewWindow.min 和 vaxis.viewWindow.max。
vAxis.viewWindow

指定垂直軸的裁剪範圍。

類型：物件
預設值：null
vAxis.viewWindow.max

要顯示的最大垂直資料值。

當 vAxis.viewWindowMode 為「漂亮」或「最大化」時，系統會忽略此值。

類型：數字
預設：自動
vAxis.viewWindow.min

要顯示的垂直資料最小值。

當 vAxis.viewWindowMode 為「漂亮」或「最大化」時，系統會忽略此值。

類型：數字
預設：自動
寬度

圖表的寬度，以像素為單位。

類型：數字
預設：所含元素的寬度

方法

方法
draw(data, options)

繪製圖表。只有在觸發 ready 事件後，圖表才能接受其他方法呼叫。Extended description。

傳回類型：無
getAction(actionID)

傳回含有要求的 actionID 的工具提示動作物件。

傳回類型：物件
getBoundingBox(id)

傳回包含圖表元素 id 左側、頂端、寬度和高度的物件。尚未記錄 id 的格式 (這些是事件處理常式的傳回值)，但以下提供一些範例：

var cli = chart.getChartLayoutInterface();

圖表區域的高度
cli.getBoundingBox('chartarea').height
長條圖第一連串的第三條長條寬度
cli.getBoundingBox('bar#0#2').width
圓餅圖第五個楔形的定界框
cli.getBoundingBox('slice#4')
垂直 (例如柱狀圖) 圖表資料的定界框：
cli.getBoundingBox('vAxis#0#gridline')
水平 (例如長條圖) 的圖表資料定界框：
cli.getBoundingBox('hAxis#0#gridline')

值是相對於圖表容器的值。請在繪製圖表「之後」呼叫此動作。

傳回類型：物件
getChartAreaBoundingBox()

傳回包含圖表內容左側、頂端、寬度和高度的物件 (即不含標籤和圖例)：

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

值是相對於圖表容器的值。請在繪製圖表「之後」呼叫此動作。

傳回類型：物件
getChartLayoutInterface()

傳回包含圖表在螢幕上位置相關資訊的物件，以及其元素。

以下方法可在傳回的物件上呼叫：

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

請在繪製圖表「之後」呼叫此動作。

傳回類型：物件
getHAxisValue(xPosition, optional_axis_index)

傳回 xPosition 的水平資料值，該值是與圖表容器左側邊緣的像素偏移值。可以是負數。

範例：chart.getChartLayoutInterface().getHAxisValue(400)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
getImageURI()

傳回已序列化為圖片 URI 的圖表。

請在繪製圖表「之後」呼叫此動作。

請參閱列印 PNG 圖表。

傳回類型：字串
getSelection()

傳回所選圖表實體的陣列。 可選取的實體是點和圖例項目。 一個點對應於資料表中的儲存格，以及資料欄的圖例項目 (列索引為空值)。 在這張圖表中，無論何時都只能選取一個實體。 Extended description 。

傳回類型：選取元素的陣列
getVAxisValue(yPosition, optional_axis_index)

傳回位於 yPosition 的垂直資料值，該值為與圖表容器頂部邊緣往下的像素偏移。可以是負數。

範例：chart.getChartLayoutInterface().getVAxisValue(300)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
getXLocation(dataValue, optional_axis_index)

傳回相對於圖表容器左側邊緣的 dataValue 像素 X 座標。

範例：chart.getChartLayoutInterface().getXLocation(400)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
getYLocation(dataValue, optional_axis_index)

傳回相對於圖表容器頂部邊緣的 dataValue 像素 y 座標。

範例：chart.getChartLayoutInterface().getYLocation(300)。

請在繪製圖表「之後」呼叫此動作。

傳回類型：數字
removeAction(actionID)

從圖表中移除要求 actionID 的工具提示動作。

傳回類型： none
setAction(action)

設定在使用者點選動作文字時執行的工具提示動作。

setAction 方法會將物件做為動作參數。這個物件應指定 3 個屬性：id (所設定動作的 ID)、text (應顯示在動作工具提示中的文字) 和 action (使用者按一下動作文字時應執行的函式)。

請在呼叫圖表的 draw() 方法之前，設定所有及所有工具提示動作。延伸說明。

傳回類型： none
setSelection()

選取指定的圖表實體。取消先前選取的任何項目。 可選取的實體是點和圖例項目。 一個點對應於資料表中的儲存格，以及資料欄的圖例項目 (列索引為空值)。 在這張圖表中，一次只能選取一個實體。 Extended description 。

傳回類型：無
clearChart()

清除圖表並釋出所有分配的資源。

傳回類型：無

事件

如要進一步瞭解如何使用這些事件，請參閱基本互動、處理事件和觸發事件。

名稱
animationfinish

轉場動畫播放完畢時觸發。

屬性：無
click

使用者點選圖表內時觸發。可用於識別使用者點選標題、資料元素、圖例項目、軸、格線或標籤的時機。

屬性： targetID
error

嘗試算繪圖表時發生錯誤時觸發。

屬性：ID、訊息
legendpagination

使用者按一下圖例分頁箭頭時觸發。傳回目前從零開始計算的圖例索引和總頁數。

資源：currentPageIndex、totalPages
onmouseover

在使用者將滑鼠遊標懸停在視覺實體上時觸發。回傳對應資料表元素的列和欄索引。

屬性：列、欄
onmouseout

在使用者滑鼠遊標移離視覺實體時觸發。傳回對應資料表元素的列和欄索引。

屬性：列、欄
ready

圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。draw

屬性：無
select

在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 getSelection()。

屬性：無

資料政策

所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。