如何自訂圖表

您不妨使用 Google 圖表工具的預設設定;所有自訂設定皆為選擇性,且基本設定已可啟用。不過,萬一您採用的樣式與預設採用的樣式不同,您也可以輕鬆自訂圖表。每張圖表都會顯示多個選項來自訂外觀和風格。在傳遞至圖表 draw() 方法的選項選項中,這些選項會以名稱:值組合的形式呈現。

一般來說,圖表可支援與視覺呈現相關的自訂選項。例如,表格圖表支援使用 sortColumn 選項指定預設排序欄,圓餅圖視覺化圖表則支援可讓您指定配色的 colors 選項。每個圖表的說明文件均說明其支援的選項。

您會將選項當做選用的第二個參數傳遞至圖表的 draw() 方法。要建立選項,您需要建立各圖專屬的屬性物件。

以下範例說明如何建立指定所有這些屬性的選項物件:

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

chart.draw(data, options);

以下是程式碼所建立的圖表。

您還可以在 draw() 方法中明確指定選項:

chart.draw(data, {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
  is3D: true
});

以下是程式碼所建立的圖表。

更多資訊