視覺化圖表:散佈圖

簡介

散佈圖會在圖表上繪製點。當使用者將遊標懸停在各個點時,工具提示會顯示更多資訊。

視瀏覽器功能而定,Google 散佈圖會使用 SVGVML 在瀏覽器中顯示。

範例

<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>

建立質感圖圖

2014 年,Google 公布了相關規範,以在各項 Google 平台的屬性和應用程式 (例如 Android 應用程式) 中,為大眾提供一致的外觀和風格。這就是所謂的質感設計。我們會為所有核心圖表提供「質感設計」版本;如有需要,歡迎使用這些圖表。

建立 Material 散佈圖的方式與建立「傳統」散佈圖類似。您載入的 Google 視覺化 API (雖然使用 'scatter' 套件而非 'corechart' 套件) 定義了資料表,然後建立物件 (但是 google.charts.Scatter 類別,而不是 google.visualization.ScatterChart 類別)。

注意:舊版的 Internet Explorer 不支援質感設計圖表。(IE8 及更舊版本不支援 Material Chart 所需的 SVG。)

與傳統散佈圖相比,材質散佈圖經過許多改善,包括可調整的不透明度,以便呈現重疊點的清晰度、改善調色盤、更清晰的標籤格式、更緊密的預設間距、更寬的格線和標題 (加上字幕)。

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

材質圖表目前仍為 Beta 版。外觀和互動性大多為最終版,但傳統版圖表尚未提供許多可用選項。您可以在這個問題中找到尚未支援的選項清單。

此外,宣告選項的方式尚未定案,因此如果使用任何傳統選項,就必須用以下這一行取代「傳統」選項:

chart.draw(data, options);

...用以下方式:

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

雙年度圖表

有時您會想在散佈圖中顯示兩個系列,其中有兩個不同的 Y 軸:一個序列的左軸,另一個是另一個軸的軸。

請注意,這兩個 Y 軸分別標示不同的標籤 (「最終測驗成績」與「學程時數」)。如要自訂這項行為,請使用 vAxis.gridlines 選項。

在下方程式碼中,axesseries 選項會指定圖表的雙 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();
    };

熱門 X 圖表

注意:Top X 軸僅適用於材質圖表 (即包含 scatter 套件的軸)。

如要將 X 軸標籤和標題放在圖表頂端 (而非底部),請在質感圖表中使用 axes.x 選項進行此操作:

      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 空值 75
20 空值 18
33 空值 22
55 16 空值
14 61 空值
48 3 空值

 

設定選項

名稱
匯總目標
如何將多個資料匯總至工具提示:
  • 'category':根據 x 值將所選資料分組。
  • 'series':按系列分組所選資料。
  • 'auto':如果所有選取項目具有相同的 X 值 (依其他順序排序),則會依系列將所選資料分組。
  • 'none':每個選項只顯示一個工具提示。
aggregationTarget 通常會和 selectionModetooltip.trigger 搭配使用,例如:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    
類型:字串
預設值:「auto」
動畫.duration

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

類型:數字
預設:0
動畫

套用至動畫的加/減速函式。可用選項如下所示:

  • 「線性」:固定速度。
  • in
  • 'out' - 緩出 - 快速啟動,慢速。
  • 'inAndOut' - 先進再出 - 開始慢速,加快速度,然後再減慢速度。
類型:字串
預設值:「Linear」
動畫.startup

用於決定圖表是否在初始繪圖時呈現動畫效果。如果設為 true,圖表會在基準開始執行,並以動畫呈現其最終狀態。

類型:布林值
Default
annotation.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
      }
    }
  }
};
    

這個選項目前適用於區域、長條圖、柱狀圖、組合圖、折線圖和散佈圖。註解圖表不支援這項操作。

類型:物件
預設值:空值
annotation.datum
對於支援註解的圖表,annotations.datum 物件可覆寫 Google 圖表針對各個資料元素提供的註解 (例如長條圖中每個長條顯示的值)。您可以使用 annotations.datum.stem.color 控制顏色,使用 annotations.datum.stem.length 加上幹線長度,並使用 annotations.datum.style 設定樣式。
類型:物件
預設:顏色為「黑色」,長度為 12;樣式為「點」。
annotation.domain
對於支援註解的圖表,annotations.domain 物件可讓您針對 Google 為網域提供的註解覆寫圖表 (圖表的主要主軸,如一般折線圖中的 X 軸)。您可以使用 annotations.domain.stem.color 控制顏色,使用 annotations.domain.stem.length 加上幹線長度,並使用 annotations.domain.style 設定樣式。
類型:物件
預設:顏色為「黑色」,長度為 5;樣式為「點」。
annotation.highContrast
如果圖表支援註解,您可以使用 annotations.highContrast 布林值覆寫 Google 圖表的註解顏色。annotations.highContrast 預設為 true,因此圖表會選擇具有適當對比度的註解顏色:深色背景上的淺色顏色,以及淺色上的深色顏色。如果將 annotations.highContrast 設為 false,而且未指定自己的註解顏色,Google 圖表將會使用註解的預設系列顏色:
類型:布林值
預設:
comments.stem
對於支援註解的圖表,annotations.stem 物件可讓您覆寫 Google 圖表對幹線樣式的選擇。您可以使用 annotations.stem.color 控制顏色,使用 annotations.stem.length 控制把手長度。請注意,幹段長度選項對樣式為 'line' 的註解沒有任何影響:如果是 'line' Datum 註解,則幹數長度一律與文字相同,而對 'line' 網域註解而言,這個虛設常式會持續擴展至整張圖表。
類型:物件
預設:顏色為「黑色」,網域註解的長度為 5,Datum 註解則是 12。
comments.style
如果圖表支援註解annotations.style 選項可讓您覆寫 Google 圖表的註解類型。可以是 'line''point'
類型:字串
預設值:「point」
annotation.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
    }
  }
};
    

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

類型:物件
預設值:空值
軸標題位置

與圖表區域比較的軸標題。支援的值:

  • in - 在圖表區域中繪製軸標題。
  • out - 在圖表區域外繪製軸線標題。
  • 無 - 省略軸標題。
類型:字串
預設值:「out」
backgroundColor

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

類型:字串或物件
預設:「white」
背景色彩

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

類型:字串
預設值:「#666」
背景色彩.筆寬度

框線寬度 (單位為像素)。

類型:數字
預設:0
background..fill

圖表會以 HTML 色彩字串填入顏色。

類型:字串
預設:「white」
圖表標題

如為 Material 圖表,這個選項會指定標題。

類型:字串
預設值:空值
圖表.subtitles

如為「材質」,這個選項會指定字幕。只有 Material 圖表支援字幕。

類型:字串
預設值:空值
圖表區域

擁有成員可設定圖表區域位置和大小的物件 (繪製圖表本身的位置,不含軸和圖例)。系統支援數字格式:範例:chartArea:{left:20,top:0,width:'50%',height:'75%'}

類型:物件
預設值:空值
圖表區域
圖表區域背景顏色。使用字串時,可以是十六進位字串 (例如「#fdc」) 或英文顏色名稱。使用物件時,您可以提供下列屬性:
  • stroke:以十六進位字串或英文顏色名稱提供的顏色。
  • strokeWidth:如有提供,在指定的寬度區域為圖表寬度周圍加上邊框 (使用 stroke 的顏色)。
類型:字串或物件
預設:「white」
圖表區域

從左框線繪製圖表的程度。

類型:數字或字串
預設:自動
排行榜區域

從上方邊框繪製圖表的程度。

類型:數字或字串
預設:自動
圖表區域

圖表區域寬度。

類型:數字或字串
預設:自動
圖表區域

圖表區域高度。

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

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

類型:字串陣列
預設:預設顏色
Crosshair

包含圖表 crosshair 屬性的物件。

類型:物件
預設值:空值
crosshair.color

十字線顏色,以顏色名稱 (例如「藍色」) 或 RGB 值 (例如「#adf」)。

類型:字串
類型:預設值
crosshair.聚焦

聚焦於十字瞄準線屬性的物件。
範例: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

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

十字架透明度,0.0 表示完全透明,1.0 完全不透明。

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

十字瞄準線方向可以是「直髮」(垂直直髮),「水平」代表水平髮型,「並」代表傳統十字髮型。

類型:字串
預設:「兩者」
crosshair.selected

內含所選十字瞄準線屬性的物件。
範例: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

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

顯示跨海域的時機:在 'focus''selection''both' 上。

類型:字串
預設:「兩者」
曲線類型

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

  • 'none' - 直線沒有曲線。
  • 'function' - 線條的角度會平滑處理。
類型:字串
預設:「無」
資料不透明度

資料點的透明度,1.0 表示完全不透明,0.0 則是完全透明。在散佈圖、直方圖、長條圖和柱狀圖中,您可以看到可見資料:散佈圖中的點和其他的矩形。在選取資料的情況下建立包含點的圖表 (例如折線圖和面積圖),指的是滑鼠遊標懸停時所顯示的圓圈。組合圖顯示兩種行為,這個選項對其他圖表沒有影響。(如要變更趨勢線的不透明度,請參閱「趨勢線透明度」一節)。

類型:數字
預設值:1.0
啟用互動功能

圖表是否擲回了以使用者為主的事件或回應使用者互動。設為 False 時,圖表不會擲回「選取」或其他以互動為基礎的事件 (但會「擲出就緒」或「錯誤」的事件),而且不會顯示使用者的文字,或是隨著使用者輸入的內容而改變。

類型:布林值
預設:
explorer

explorer 選項可讓使用者平移及縮放 Google 圖表。 explorer: {} 提供預設的多層檢視行為,可讓使用者透過拖曳的方式水平與垂直平移,並以捲動方式縮放。

這項功能仍在實驗階段,將於日後推出的版本中變更。

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

類型:物件
預設值:空值
Explorer.actions

Google Charts Explorer 支援以下三種動作:

  • dragToPan:拖曳以水平且垂直平移圖表。如果只要沿著水平軸平移,請使用 explorer: { axis: 'horizontal' }。同樣地,垂直軸也為類似。
  • dragToZoom:瀏覽器的預設行為是在使用者捲動畫面時放大和縮小。如果使用 explorer: { actions: ['dragToZoom', 'rightClickToReset'] },請拖曳矩形範圍來放大該區域。我們建議在使用 dragToZoom 時都使用 rightClickToReset。請參閱 explorer.maxZoomInexplorer.maxZoomOutexplorer.zoomDelta 的縮放自訂功能。
  • rightClickToReset:在圖表上按一下滑鼠右鍵,即可將圖表恢復為原本的平移和縮放等級。
類型:字串陣列
預設值:['dragToPan', 'rightClickToReset']
Explorer:軸

根據預設,使用 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
字型大小

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

類型:數字
預設:自動
字型名稱

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

類型:字串
預設:「Arial」
ForceIFrame

在內嵌頁框中繪製圖表。(請注意,在 IE8 中,系統會忽略此選項;所有 IE8 圖表都會以 i-frames 繪製)。

類型:布林值
預設值:false
HAXis

擁有成員可設定各種水平軸元素的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示:

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

水平軸的基準線。

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

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

類型:數字
預設:'black'
HXX.Direction

沿著水平軸值的增長方向。如要指定值的順序,請指定 -1

類型:1 或 -1
預設:1
hAxis.format

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

  • {format: 'none'}:顯示沒有格式設定的數字 (例如800 萬)
  • {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}
類型:物件
預設值:空值
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*/]},
  }
}
    

詳情請參閱日期和時間

類型:物件
預設值:空值
hAxis.minorGridlines

擁有類似 hAxis.gridlines 選項,成員可在水平軸上設定次要格線的物件。

類型:物件
預設值:空值
hAxis.minorGridlines.color

圖表區域內水平次要格線的色彩。請指定有效的 HTML 色彩字串。

類型:字串
預設:格線和背景顏色的混合
hAxis.minorGridlines.count

minorGridlines.count 選項大多會遭到淘汰,除了將計數設定為 0 來停用次要格線外。次要格線現在數量完全取決於主要格線 (請參閱 hAxis.gridlines.interval) 和最低必要空間 (請參閱 hAxis.minorGridlines.minSpacing) 之間的間隔時間。

類型:數字
預設:1
hAxis.minorGridlines.units

與日期計算的 minGridlines 圖表搭配使用時,將日期/日期/時間資料類型的各種層面覆寫預設格式。允許輸入年、月、日、小時、分鐘、秒和毫秒的格式。

一般格式為:

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*/]},
  }
}
    

詳情請參閱日期和時間

類型:物件
預設值:空值
hAxis.logScale

hAxis 屬性可讓水平軸是對數刻度 (所有值都必須為正數)。是。

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

hAxis 屬性可讓水平軸是對數刻度。可以是下列任一值:

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

水平軸文字相對於圖表區域的位置。支援的值:「out」、「in」、「in」。

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

指定水平軸文字樣式的物件。物件採用以下格式:

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

color 可以是任何 HTML 色彩字串,例如:'red''#00cc00'。另請參閱 fontNamefontSize 的說明。

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

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

除非您指定要覆寫的 viewWindow.minviewWindow.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 屬性,用於指定水平軸的標題。

類型:字串
預設值:空值
hAxis.titleText 樣式

指定水平軸標題文字樣式的物件。物件具有以下格式:

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

color 可以是任何 HTML 色彩字串,例如:'red''#00cc00'。另請參閱 fontNamefontSize 的說明。

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

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

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

將水平軸的最小值移到指定值;在大多數圖表中是左側。如果設定的值大於資料的最低 X 值,系統會忽略這個值。 hAxis.viewWindow.min 會覆寫這個屬性。

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

指定如何縮放水平軸以在圖表區域中顯示值。系統支援下列字串值:

  • 'ble' - 縮放水平值,讓資料最小值和最小值 在圖表區域的左右算繪。 將 ViewWindow 擴展到最接近的數值主要格線,或者日期和時間最近的次要格線。
  • 'maximized' - 調整水平值,讓資料值的最大和最小值都能在圖表區域的左右處輕觸。這會導致 haxis.viewWindow.minhaxis.viewWindow.max 遭到忽略。
  • 「explicit」- 用於指定圖表區域左右分數值的已淘汰選項。(因為與 haxis.viewWindow.minhaxis.viewWindow.max 重複,所以已淘汰)。您必須指定 hAxis.viewWindow 物件,用於說明要顯示的最大值和最小值。
類型:字串
預設值:等同於「美屬」;不過如果使用的話,系統會優先採用 haxis.viewWindow.minhaxis.viewWindow.max
hAxis.viewWindow

指定水平軸的裁剪範圍。

類型:物件
預設值:空值
hAxis.viewWindow.max

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

hAxis.viewWindowMode」為「良好」或「最大化」時忽略。

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

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

hAxis.viewWindowMode」為「良好」或「最大化」時忽略。

類型:數字
預設:自動
height

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

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

包含成員,用於設定圖例各個層面的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
類型:物件
預設值:空值
圖例.alignment

圖例的對齊方式。可能是下列其中一項:

  • [開始]:對齊圖例的起始區域。
  • 'center' - 置中為圖例的所在區域。
  • 'end' - 與為圖例對應的區域結尾對齊。

起始、置中和結束點與圖例的樣式 (垂直或水平) 有關。舉例來說,在「右」圖例中,「start」和「end」分別位於頂端和底部;如果是「top」圖例,「start」和「end」將分別位於該地區的左側和右側。

預設值取決於圖例的位置。如果是「bottom」圖例,預設值為「center」,其他圖例預設為「start」。

類型:字串
預設:自動
圖例.maxLines

圖例所含行數上限。請將這個值設為大於一的數字,在圖例中新增線條。注意事項:用於判斷實際行數的確切邏輯仍處於通量。

這個選項目前僅適用於圖例的「top」為「top」。

類型:數字
預設:1
圖例.pageIndex

圖例的初始頁面索引初始初始值。

類型:數字
預設:0
圖例.position

圖例的位置。可能是下列其中一項:

  • 'bottom' - 圖表下方。
  • 「left」:如果左軸沒有相關序列,會在圖表左側因此,如果您希望左側顯示圖例,請使用選項 targetAxisIndex: 1
  • 'in' - 在圖表中,按左上角
  • 「無」:不顯示圖例。
  • 「右」:在圖表右側。與 vAxes 選項不相容。
  • 「top」:圖表上方。
類型:字串
預設值:「right」
圖例.textStyle

指定圖例文字樣式的物件。物件採用以下格式:

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

color 可以是任何 HTML 色彩字串,例如:'red''#00cc00'。另請參閱 fontNamefontSize 的說明。

類型:物件
預設: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
線條寬度

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

類型:數字
預設:0
方向

圖表的方向。設為 'vertical' 時,會旋轉圖表軸軸,讓 (例如) 柱狀圖成為長條圖,且面積圖向右向右增長 (而非向上移動):

類型:字串
預設:「水平」
PointShape

個別資料元素的形狀:「圓形」、「三角形」、「正方形」、「菱形」、「星星」或「多邊形」。請參閱分數說明文件中的範例。

類型:字串
預設:「circle」
PointSize

資料點的寬度,以像素為單位。使用 0 可隱藏所有點。您可以使用 series 屬性覆寫個別系列的值。如果您使用趨勢線,這個選項也會影響構成該點的 pointSize,進而改變趨勢線的明顯寬度。如要避免這種情況發生,您可以使用 trendlines.n.pointsize 選項覆寫。

類型:數字
預設:7
可見

設定是否要顯示點。如要隱藏所有點,請將值設為 false。 您可以使用 series 屬性覆寫個別系列的值。如果您使用的是趨勢線,則除非您使用 trendlines.n.pointsVisible 選項覆寫該選項,否則 pointsVisible 選項會影響所有趨勢線上的顯示設定。

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

類型:布林值
預設:
選項模式

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

類型:字串
預設值:「Single」
series

物件陣列,每個物件都描述圖表中對應的序列格式。如要對序列使用預設值,請指定空白物件 {}。如果未指定係列或值,系統會使用全域值。每個物件都支援下列屬性:

  • color:這個系列所用的顏色。請指定有效的 HTML 色彩字串。
  • labelInLegend - 圖表圖例中顯示的系列說明。
  • lineWidth - 覆寫這個系列的全域 lineWidth 值。
  • pointShape - 覆寫這個系列的全域 pointShape 值。
  • pointSize - 覆寫這個系列的全域 pointSize 值。
  • pointsVisible - 覆寫這個系列的全域 pointsVisible 值。
  • visibleInLegend - 布林值,表示 true 表示系列應具有圖例項目,而 false 表示不應。預設值為是。

您可以指定物件陣列,每個物件都按指定順序套用至系列;您也可以指定一個物件,其中每個子項都有一個數字索引鍵,指示其套用哪個序列。舉例來說,以下兩個宣告相同,且將第一個系列宣告為圖例且不提供圖例,而第四層宣告為紅色且不含圖例:

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

主題是一組預先定義的選項值,可共同運作以達到特定的圖表行為或視覺效果。目前只有一個主題:

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

圖表上方顯示的文字。

類型:字串
預設:無標題
標題位置

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

  • in - 在圖表區域中繪製標題。
  • out - 在圖表區域外繪製標題。
  • 無 - 省略標題。
類型:字串
預設值:「out」
標題文字樣式

指定標題文字樣式的物件。物件採用以下格式:

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

color 可以是任何 HTML 色彩字串,例如:'red''#00cc00'。另請參閱 fontNamefontSize 的說明。

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

擁有成員可設定各種工具提示元素的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示:

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

如果設為 true,系統會允許工具提示的繪製範圍在圖表邊界外。

注意:這僅適用於 HTML 工具提示。如果您透過 SVG 工具提示啟用此功能,系統會忽略圖表邊界以外的溢位。詳情請參閱自訂工具提示內容

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

設為 True 時,請使用 HTML 轉譯 (而非 SVG 轉譯) 工具提示。詳情請參閱自訂工具提示內容

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

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

如果為 true,在工具提示中的系列資訊旁邊顯示彩色正方形。

類型:布林值
預設值:false
tooltip.text 樣式

指定工具提示文字樣式的物件。物件採用以下格式:

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

color 可以是任何 HTML 色彩字串,例如:'red''#00cc00'。另請參閱 fontNamefontSize 的說明。

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

顯示工具提示的使用者互動:

  • 「focus」:當滑鼠遊標懸停在元素上時,就會顯示工具提示。
  • [無]:不顯示工具提示。
  • 'selection' - 在使用者選取元素時顯示工具提示。
類型:字串
預設值:「focus」
趨勢線

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

系統是根據每個序列來指定趨勢線,因此您在大多數情況下都會選擇如下所示:

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

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

類型:字串
預設:預設系列顏色
Trendslines.n.degree

針對 type: 'polynomial'趨勢線,多項式的度數 (二次方的 2 代表立方體,3 代表立方體等)。(在即將推出的 Google 圖表版本中,預設角度可能會從 3 變更為 2)。

類型:數字
預設:3
趨勢線.n.labelInLegend

如有設定,趨勢線就會在圖例中顯示為這個字串。

類型:字串
預設值:空值
趨勢線.n.lineWidth

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

類型:數字
預設:2
趨勢線.n.opacity

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

類型:數字
預設值:1.0
趨勢線.n.pointSize

趨勢線會填入圖表中的許多點,藉此形成趨勢;這種罕見的選項可讓您自訂圓點的大小。通常我們會優先採用趨勢線的 lineWidth 選項。不過,如果您使用全域的 pointSize 選項,且想要針對趨勢線使用不同的大小,請使用這個選項。

類型:數字
預設:1
趨勢線.n.points 可見

趨勢線會由圖表中的許多圓點組成,藉此構成。趨勢線的 pointsVisible 選項可決定是否要顯示特定趨勢線的點。

類型:布林值
預設:
趨勢線.n.showR2

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

類型:布林值
預設值:false
趨勢線.n.type

說明趨勢線'linear' (預設值)、'exponential''polynomial'

類型:字串
預設:線性
趨勢線.n.visibleInLegend

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

類型:布林值
預設值:false
VAXis

擁有成員可設定各種垂直軸元素的物件。若要指定此物件的屬性,您可以使用物件常值標記法,如下所示:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
類型:物件
預設值:空值
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'}:顯示沒有格式設定的數字 (例如800 萬)
  • {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}
類型:物件
預設值:空值
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*/]}
  }
}
    

詳情請參閱日期和時間

類型:物件
預設值:空值
vAxis.minorGridlines

擁有類似 vAxis.gridlines 選項,且設有垂直軸設定次要格線的物件。

類型:物件
預設值:空值
vAxis.minorGridlines.color

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

類型:字串
預設:格線和背景顏色的混合
vAxis.minorGridlines.count

smallGridlines.count 選項大多已淘汰,除了將計數設定為 0 來停用次要格線。次要格線的數目取決於主要格線 (請參閱 vAxis.gridlines.interval) 和最低空間需求 (請參閱 vAxis.minorGridlines.minSpacing) 之間的間隔時間。

類型:數字
預設:1
vAxis.minorGridlines.units

與日期計算的 minGridlines 圖表搭配使用時,將日期/日期/時間資料類型的各種層面覆寫預設格式。允許輸入年、月、日、小時、分鐘、秒和毫秒的格式。

一般格式為:

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*/]},
  }
}
    

詳情請參閱日期和時間

類型:物件
預設值:空值
vAxis.logScale

如為 true,則垂直軸為對數比例。注意:所有的值都必須是正數。

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

vAxis 屬性可讓垂直軸設為對數比例。可以是下列任一值:

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

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

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

指定垂直軸文字樣式的物件。物件採用以下格式:

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

color 可以是任何 HTML 色彩字串,例如:'red''#00cc00'。另請參閱 fontNamefontSize 的說明。

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

將自動產生的 Y 軸刻點替換為指定的陣列。陣列的每個元素都必須是有效的刻點值 (例如數字、日期、日期或時間單位) 或物件。如果是物件,則應具有刻點值的 v 屬性,以及包含要顯示為標籤的文字字串的選用 f 屬性。

除非您指定要覆寫的 viewWindow.minviewWindow.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.titleText 樣式

指定垂直軸標題文字樣式的物件。物件採用以下格式:

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

color 可以是任何 HTML 色彩字串,例如:'red''#00cc00'。另請參閱 fontNamefontSize 的說明。

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

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

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

將垂直軸的最小值移到指定值;在大多數圖表中,這會是向下的。如果設定的值大於資料的最低 y 值,系統會忽略這個值。 vAxis.viewWindow.min 會覆寫這個屬性。

類型:數字
預設值:空值
vAxis.viewWindowMode

指定如何縮放垂直軸以在圖表區域中顯示值。系統支援下列字串值:

  • 「ble」:縮放垂直值,讓資料最小值和最小值在圖表區域的底部和頂端算繪。將 ViewWindow 擴展到最接近的數值主要格線,或者日期和時間最近的次要格線。
  • 'maximized' - 縮放垂直值,讓資料值的最大值和最小值都達到圖表區域的頂端和底部。這會導致 vaxis.viewWindow.minvaxis.viewWindow.max 遭到忽略。
  • 「explicit」- 用於指定圖表區域頂端和底部比例值的已淘汰選項。(因為與 vaxis.viewWindow.minvaxis.viewWindow.max 具有備援功能,所以已遭淘汰)。超過部分的資料值將被裁剪。您必須指定 vAxis.viewWindow 物件,用於說明要顯示的最大值和最小值。
類型:字串
預設值:等同於「美屬」;不過如果使用的話,系統會優先採用 vaxis.viewWindow.minvaxis.viewWindow.max
vAxis.viewWindow

指定垂直軸的裁剪範圍。

類型:物件
預設值:空值
vAxis.viewWindow.max

要顯示的垂直資料值上限。

vAxis.viewWindowMode」為「良好」或「最大化」時忽略。

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

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

vAxis.viewWindowMode」為「良好」或「最大化」時忽略。

類型:數字
預設:自動
width

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

類型:數字
預設:內含元素的寬度

方法

方法
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()

屬性:無

資料政策

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