圖表:泡泡圖

總覽

使用 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(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

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

以數字表示的顏色

您可以使用 colorAxis 選項,依值比例為泡泡上色,如下例所示。

<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([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

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

自訂標籤

您可以使用 bubble.textStyle 選項控制對話框的字體、字型和顏色:

選項
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        fontSize: 12,
        fontName: 'Times-Roman',
        color: 'green',
        bold: true,
        italic: true
      }
    }
  };
完整網頁
<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([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            fontSize: 12,
            fontName: 'Times-Roman',
            color: 'green',
            bold: true,
            italic: true
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

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

上圖中的標籤難以閱讀,其中一個原因在於標籤周圍的空白字元。這種做法稱為「aura」。如果您希望在沒有圖表的情況下查看圖表,可以將 bubble.textStyle.auraColor 設為 'none'

選項
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        auraColor: 'none'
      }
    }
  };
完整網頁
<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([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            auraColor: 'none',
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));

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

載入中

google.charts.load 套件名稱為 "corechart"

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

視覺呈現的類別名稱為 google.visualization.BubbleChart

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

資料格式

列:表格中的每一列都代表一個泡泡。

資料欄:

  第 0 欄 第 1 欄 第 2 欄 第 3 欄 (選填) 第 4 欄 (選填)
用途: 泡泡的 ID (名稱) X 座標 Y 座標 視資料欄類型而定,可以是序列 ID,或是代表漸層比例上顏色的值:
  • string
    用於識別同系列中泡泡的字串。請使用相同的值來識別屬於同一系列的所有泡泡;系統會為同一序列中的泡泡指派相同顏色。您可以使用 series 選項設定係列叢書。
  • 數字
    使用 colorAxis 選項,對應到漸層比例上實際顏色的值。
大小;這個欄中的值會使用 sizeAxis 選項對應至實際的像素值。
資料類型: 字串 號碼 號碼 字串或數字 號碼

設定選項

名稱
animation.duration

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

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

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

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

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

類型:布林值
預設 false
axisTitlesPosition

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

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

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

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

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

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

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

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

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

類型:字串
預設:「white」
泡泡

包含成員的物件,可設定泡泡的視覺屬性。

類型:物件
預設值:null
bubble.opacity

泡泡的不透明度,0 表示完全透明,1 表示完全不透明。

類型:介於 0.0 和 1.0 之間的數字
預設值:0.8
bubble.stroke

泡泡筆觸的顏色。

類型:字串
預設: '#ccc'
bubble.textStyle

指定對話框文字樣式的物件。物件的格式如下:

{color: <string>, fontName: <string>, fontSize: <number>}

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

類型:物件
預設: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
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']

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

這個物件可指定顏色資料欄值與顏色或漸層比例之間的對應關係。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
類型:物件
預設值:null
colorAxis.minValue

如果有出現,可指定圖表顏色資料的最小值。這個值及較低的顏色資料值會算繪為 colorAxis.colors 範圍中的第一個顏色。

類型:數字
預設值:圖表資料中顏色欄的最小值
colorAxis.maxValue

如果有出現,就可以指定圖表顏色資料的最大值。這個值及較高的顏色資料值會轉譯為 colorAxis.colors 範圍中的最後一個顏色。

類型:數字
預設:圖表資料中顏色欄的最大值
colorAxis.values

如果有,即可控管值與顏色的關聯方式。每個值都會與 colorAxis.colors 陣列中的對應顏色相關聯。這些值適用於圖表顏色資料。系統會依據此處指定值的漸層完成上色。不指定這個選項的值等同於指定 [minValue, maxValue]。

類型:數字陣列
預設值:null
colorAxis.colors

要在圖表中指派給值的顏色。字串陣列,其中每個元素都是 HTML 顏色字串,例如:colorAxis: {colors:['red','#004411']}。您必須至少有兩個值:漸層會包含所有的值以及計算出的中介值,第一個顏色是最小值,最後一個顏色則代表最高。

類型:色彩字串陣列
預設值:null
colorAxis.legend

這個物件可指定漸層色彩圖例樣式。

類型:物件
預設值:null
colorAxis.legend.position

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

  • 「top」:圖表上方。
  • 「bottom」- 圖表下方。
  • 「in」- 圖表頂端,
  • 「無」- 不顯示圖例。
類型:物件
預設: 'top'
colorAxis.legend.textStyle

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

數字標籤的格式字串。這是 ICU 模式集 的子集。舉例來說,{numberFormat:'.##'} 會針對值 10.666、10.6 和 10,顯示「10.66」、「10.6」和「10.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.maxZoomInexplorer.maxZoomOutexplorer.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'。另請參閱 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 屬性,指定橫軸的標題。

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

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

{ 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

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

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

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

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

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

物件物件,鍵是系列名稱 (「顏色」欄中的值),以及每個物件說明圖表中對應序列的格式。如未指定序列或值,則會使用全域值。每個物件都支援下列屬性:

  • color - 此系列使用的顏色。指定有效的 HTML 顏色字串。
  • visibleInLegend - 布林值,其中 true 代表序列應有圖例項目,而 false 則表示不應。預設值為 true。
範例:
series: {'Europe': {color: 'green'}}
類型:包含巢狀物件的物件
預設:{}
sizeAxis

具備成員的物件,可設定值與對話框大小建立關聯的方式。如要指定這個物件的屬性,您可以使用物件常值標記法,如下所示:

 {minValue: 0,  maxSize: 20}
類型:物件
預設值:null
sizeAxis.maxSize

最大說明框的半徑上限,以像素為單位。

類型:數字
預設值:30 個
sizeAxis.maxValue

要對應至 sizeAxis.maxSize 的大小值 (顯示於圖表資料中)。 系統會將較大的值裁剪為這個值。

類型:數字
預設:圖表資料中「大小」欄的最大值
sizeAxis.minSize

對話框的最小半徑範圍 (以像素為單位)。

類型:數字
預設:5
sizeAxis.minValue

要對應至 sizeAxis.minSize 的大小值 (顯示於圖表資料中)。 系統會將較小的值裁剪為這個值。

類型:數字
預設值:圖表資料中「大小」欄的最小值
sortBubblesBySize

如為 true,系統會依大小排序對話框,讓較小的泡泡顯示在較大的泡泡上方。 如果設為 False,對話框會根據資料在資料表中的順序排序。

類型:布林值
預設值:true
主題

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

  • 「最大化」- 將圖表區域最大化,並在圖表區內繪製圖例和所有標籤。設定下列選項:
    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'。另請參閱 fontNamefontSize

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

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

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

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

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

類型:布林值
預設值:false
tooltip.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>}
tooltip.trigger

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

  • 「焦點」- 當使用者將遊標懸停在元素上時,就會顯示工具提示。
  • 「無」- 不會顯示工具提示。
  • 「selection」- 使用者選取元素時,系統會顯示工具提示。
類型:字串
預設:「focus」
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'。另請參閱 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.titleTextStyle

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

{ 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 會覆寫這項屬性。

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

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

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

屬性:

資料政策

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