如何自訂圖表
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
您不妨使用 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
});
以下是程式碼所建立的圖表。
更多資訊
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2024-07-10 (世界標準時間)。
[null,null,["上次更新時間:2024-07-10 (世界標準時間)。"],[],[],null,["# How to Customize Charts\n\nYou can use Google Chart Tools with their default setting - all customization is optional and the basic setup is launch-ready. However, charts can be easily customizable in case your webpage adopts a style which is at odds with provided defaults. Every chart exposes a number of options that customize its look and feel. These options are expressed as name:value pairs in the options object passed into a chart's [draw()](/chart/interactive/docs/reference#visdraw) method.\n\nCharts usually support custom options appropriate to that visualization.\nFor example, the [table chart](/chart/interactive/docs/gallery/table) supports\na `sortColumn` option to specify the default sorting column, and the [pie\nchart](/chart/interactive/docs/gallery/piechart#Configuration_Options) visualization supports a `colors` option that lets you specify\nslice colors. Each chart's documentation should describe the options\nthat it supports.\n\nYou will pass your options in as an optional second parameter\nto the chart's [draw()](/chart/interactive/docs/reference#visdraw) method\ndescribed previously. You specify options by creating an object with properties\nspecific to each chart.\n\nThe following example demonstrates creating an options object that specifies all\nof these properties: \n\n```\nvar options = {\n width: 400,\n height: 240,\n title: 'Toppings I Like On My Pizza',\n colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']\n};\n\nchart.draw(data, options);\n```\n\nHere's the chart that this code creates.\n\n|---|\n| |\n\nYou can also specify options literally within the `draw()` method: \n\n```\nchart.draw(data, {\n width: 400,\n height: 240,\n title: 'Toppings I Like On My Pizza',\n colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],\n is3D: true\n});\n```\n\nHere's the chart that this code creates.\n\n|---|\n| |\n\n**More Information**\n\n- [Customized branding example](/chart/interactive/docs/examples#customized_branding)\n- [Customized table example](/chart/interactive/docs/examples#custom_table_example)"]]