Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

使用圖表設定檔編輯器自訂圖表

您可以使用圖表設定編輯器，自訂使用 HighCharts API 的 Looker 視覺化格式選項，包括大多數的笛卡兒圖表，例如柱狀圖、長條圖和折線圖等。

啟用 Gemini in Looker 功能後，您可以使用圖表助理，根據文字提示詞生成 JSON 格式選項，加快自訂 Looker 圖表的速度。

必要條件

如要存取圖表設定編輯器，您必須具備can_override_vis_config權限。

自訂視覺化內容

如要使用「圖表設定編輯器」自訂視覺化效果，請按照下列步驟操作：

在探索中查看圖表，或在 Look 圖表或資訊主頁中編輯圖表。
開啟資料視覺化中的「編輯」選單。
按一下「Plot」分頁中的「Edit Chart Config」按鈕。Looker 會顯示「Edit Chart Config」對話方塊。
- 「圖表設定 (來源)」窗格包含視覺化效果的原始 JSON，無法編輯。
- 「圖表設定 (覆寫)」窗格包含應覆寫來源 JSON 的 JSON。初次開啟「編輯圖表設定」對話方塊時，Looker 會在窗格中填入一些預設 JSON。您可以從這個 JSON 開始，也可以刪除這個 JSON，然後輸入任何有效的 HighCharts JSON。
選取「圖表設定 (覆寫)」部分，然後輸入一些有效的 HighCharts JSON。新值會覆寫「圖表設定 (來源)」部分中的任何值。
- 如需有效的 HighCharts JSON 範例，請參閱「範例」一節。
- Looker 接受任何有效的 JSON 值，但不接受函式、日期或未定義的值。
按一下「<> (格式化程式碼)」，讓 Looker 正確格式化 JSON。
按一下「預覽」即可測試變更。
按一下「套用」，即可套用變更。系統會使用自訂 JSON 值顯示視覺化效果。

自訂完視覺化內容後，即可儲存。如果您是在「探索」中查看視覺化內容，請儲存「探索」。如果您編輯的是 Look 或資訊主頁，請按一下「儲存」。

如果您嘗試預覽含有無效 JSON 的程式碼，Looker 會顯示 Invalid JSON detected 錯誤訊息。您可以使用「圖表設定 (覆寫)」窗格底部的「自動修正程式碼」選項，清理無效的 JSON。

如要編輯預設的視覺化選項，請先移除在圖表設定編輯器中進行的變更，然後再替換。具體而言，請按照下列步驟操作：

按一下「Plot」分頁中的「Edit Chart Config」按鈕。Looker 會顯示「Edit Chart Config」對話方塊。
複製「圖表設定 (覆寫)」窗格中的文字。
按一下「清除圖表覆寫」按鈕，即可刪除所有變更。
按一下「套用」。
使用預設的圖表選項編輯圖表。
按一下「Plot」分頁中的「Edit Chart Config」按鈕。Looker 會顯示「Edit Chart Config」對話方塊。
在「圖表設定 (覆寫)」窗格中輸入一些有效的 HighCharts JSON。您可以使用在步驟 2 中複製的文字做為範本，但請務必使用「預覽」按鈕測試變更，確保沒有衝突。
按一下「套用」。

使用 `series formatters` 設定條件式格式

圖表設定編輯器接受大多數有效的 HighCharts JSON，也接受 series formatters 屬性 (僅存在於 Looker 中)。每個序列可以有多個格式化工具，用來合併不同的樣式規則。

series formatters 屬性可接受兩個屬性：select 和 style。

在 select 屬性中輸入邏輯運算式，指明要格式化的資料值。
在 style 屬性中輸入一些 JSON，指出資料值的格式。

舉例來說，如果資料值大於或等於 380，下列 JSON 會將每個資料值塗成橘色：

{
  series: [{
    formatters: [{
      select: 'value >= 380',
      style: {
        color: 'orange'
      }
    }]
  }]
}

以下各節將詳細說明 select 和 style 屬性的可能值。

`select` 屬性

您可以在 select 運算式中使用下列值：

value：這個變數會傳回序列的值。您可以在比較中使用這個值，如下列範例所示：
- 運算式 select: value > 100 會比對值大於 100 的資料列。
- 運算式 select: value > VIEW_NAME.FIELD_NAME 會比對資料列的值是否大於該資料列的其他欄位。如需範例，請參閱「與其他序列值相比的顏色序列」一節。
- 運算式 select: value > mean 會比對值大於該序列平均值的資料列。如需範例，請參閱「比較序列值與平均值或中位數值」一節。
- 運算式 select: value > median 會比對值大於該序列中位數的資料列。如需範例，請參閱「比較序列值與平均值或中位數值」一節。
max：使用 select: max 指定值最大的序列值。
min：使用 select: min 指定具有最小值的序列值。
percent_rank：這個變數會以指定百分位數為目標，找出序列值。舉例來說，您可以使用 select: percent_rank >= 0.9，以第 90 個百分位數為目標找出序列值。
name：這個變數會傳回數列的維度值。舉例來說，如果圖表顯示已售出、已取消和已退回的訂單，您可以使用 select: name = Sold 指定維度值為「已售出」的資料序列。
AND/OR 使用 AND 和 OR 結合多個邏輯運算式。

如要查看在圖表設定編輯器中實作的這些運算式，請參閱「為最大值、最小值和百分位數值加上顏色」範例。

`style` 屬性

style 屬性可用於套用 HighCharts 支援的樣式。舉例來說，您可以使用 style.color 為序列值上色、使用 style.borderColor 為序列邊框上色，以及使用 style.borderWidth 設定序列邊框寬度。如需樣式選項的完整清單，請參閱 series.column.data 的 Highcharts 選項。

如果是折線圖，請使用 style.marker.fillColor 和 style.marker.lineColor，而非 style.color。如需更完整的線條樣式選項清單，請參閱 Highcharts 選項 (適用於 series.line.data.marker)。

如要查看在圖表設定編輯器中實作的顏色格式，請參閱「為最大值、最小值和百分位數值設定顏色」範例。

欄位中繼資料

您可以使用「欄位中繼資料」下拉式選單，複製視覺化圖表中任何欄位的序列名稱。您可以使用 series formatters 屬性，透過這個序列名稱比較不同序列的值。如需範例，請參閱「與其他序列值相比的顏色序列」一節。

範例

以下各節提供圖表設定編輯器的常見用途範例。如需可編輯屬性的完整清單，請參閱 HighCharts API 說明文件。

變更背景顏色和軸文字顏色
自訂工具提示顏色
新增圖表註解和說明
新增垂直參考區間
為最大值、最小值和百分位數值加上顏色

變更背景顏色和軸文字顏色

如要變更視覺化效果的背景顏色，請使用 chart.backgroundColor 屬性。

同樣地，如要變更視覺化圖表中座標軸的文字顏色，請使用下列屬性：

下列 HighCharts JSON 會將視覺化效果的背景顏色變更為紫色，並將座標軸標題和標籤的文字變更為白色。

{
  chart: {
    backgroundColor: "purple"
  },

  xAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  },

  yAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  }
}

如要自訂工具提示的顏色，請使用下列屬性：

下列 HighCharts JSON 會將工具提示的背景顏色變更為青色，並將工具提示文字的顏色變更為黑色。

{
  tooltip: {
    backgroundColor: "cyan",
    style: {
      color: "black"
    }
  }
}

如要自訂工具提示的內容，請使用下列屬性：

下列 HighCharts JSON 會變更工具提示格式，讓 X 軸值以較大字型顯示在工具提示頂端，後面接著該點的所有序列值清單。

本範例使用下列 HighCharts 函式和變數：

{key} 變數會傳回所選點的 x 軸值。(在本範例中為月份和年份)。
{#each points}{/each} 函式會針對圖表中的每個序列重複執行封閉程式碼。
{series.name} 是傳回序列名稱的變數。
{y:.2f} 變數會傳回所選點的 y 軸值，並四捨五入至小數點後兩位。
- {y} 變數會傳回所選點的 Y 軸值。
- {variable:.2f} 會將 variable 四捨五入至小數點後兩位。如需更多值格式設定範例，請參閱 Highcharts 範本說明文件。

{
  tooltip: {
    format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:.2f}<br/>{/each}',
    shared: true
  },
}

新增圖表註解和說明

如要新增註解，請使用 annotations 屬性。如要為圖表新增說明文字，請使用 caption 屬性。

如要取得點的座標，請按一下「Edit Chart Config」(編輯圖表設定) 對話方塊頂端的「Inspect Point Metadata」(檢查點中繼資料)。接著，將指標懸停在要註解的資料點上。Looker 會顯示點 ID，您可以在 annotations.labels.point 屬性中使用該 ID。

下列 HighCharts JSON 會在圖表中新增兩項註解，說明特定時間後庫存項目減少的原因，並在圖表底部新增說明，詳細解釋註解內容。

{
  caption: {
    text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
  },
  annotations: [{
    labels: [{
        point: "inventory_items.count-60-79",
        text: "Clearance sale"
      },
      {
        point: "inventory_items.count-80+",
        text: "Thrown away"
      },
    ]
  }]
}

新增動態註解

您也可以使用 annotationsSource 和 annotationsTarget 參數，將欄位中的資料做為註解。

如要取得欄位名稱，可以使用「欄位中繼資料」下拉式選單。請注意，annotationsTarget 欄位必須是指標。

下列 HighCharts JSON 會使用 orders.annotations 欄位的值，做為 orders.count 欄位的註解：

{
  annotations: [{
    labels: [{
      annotationsSource: 'orders.annotations',
      annotationsTarget: 'orders.count'
    }]
  }]
}

新增垂直參考區間

如要新增垂直參考區間，請使用 xAxis.plotBands 屬性。

下列 HighCharts JSON 會在 2022 年 11 月 24 日至 2022 年 11 月 29 日之間新增垂直參照帶，標示特價期間。此外，也會在圖表底部新增說明，解釋參照帶的意義。

請注意，xAxis.plotBands 的 to 和 from 屬性必須對應圖表中的資料值。在這個範例中，由於資料是以時間為準，屬性會接受 Unix 時間戳記值 (2022 年 11 月 29 日為 1669680000000，2022 年 11 月 24 日為 1669248000000)。to 和 from HighCharts 屬性不支援以字串為基礎的日期格式，例如 MM/DD/YYYY 和 DD-MM-YY。

{
  caption: {
    text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
  },
  xAxis: {
    plotBands: [{
      to: 1669680000000,
      from: 1669248000000,
      label: {
        text: 'BFCM Sale Period'
      }
    }]
  },
}

新增虛線和點虛線

如要將實線變更為虛線或點線，請使用 series.dashStyle 屬性。

下列 HighCharts JSON 會將 Customers 系列的 dashStyle 屬性變更為虛線，並將 Sales 系列的 dashStyle 屬性變更為點線。

{
  series: [{
    name: 'Customers',
    dashStyle: 'Dash'
  }, {
    name: 'Sales',
    dashStyle: 'Dot'
  }]
}

為最大值、最小值和百分位數值上色

如需深入瞭解如何為笛卡爾視覺化圖表的最大值、最小值和百分位數值上色，請參閱「Getting the most out of Looker visualizations cookbook: Conditional formatting customization in Cartesian charts」頁面。

與其他序列值相比的顏色序列

從 Looker 25.0 開始，您可以使用 formatters.select 參數，將目前的資料值與其他數列的值進行比較。

舉例來說，假設您要顯示多個城市的平均售價和中位數售價。下列 HighCharts JSON 會將平均售價的顏色變更為綠色 (如果大於或等於中位數售價)，否則會變更為紫紅色：

{
  chart: {},
  series: [{
    name: 'Average Sale Price',
    formatters: [{
        select: 'value >= order_items.median_sale_price',
        style: {
          color: 'green',
          dataLabels: {
            color: 'green'
          }
        }
      },
      {
        select: 'value < order_items.median_sale_price',
        style: {
          color: 'maroon',
          dataLabels: {
            color: 'maroon'
          }
        }
      }
    ]
  }, {
    name: 'Median Sale Price'
  }]
}

請注意，select: 'value >= order_items.median_sale_price' 行會以 VIEW_NAME.FIELD_NAME 格式參照「中位數銷售價格」欄位。如要直接複製這個欄位值，請按一下「編輯圖表設定」對話方塊中的「欄位中繼資料」下拉式選單，然後選取欄位名稱。

比較序列值與平均值或中位數值

在 Looker 25.0 以上版本中，formatters.select 參數支援 mean 關鍵字；在 Looker 25.2 以上版本中，則支援 median 關鍵字。這些關鍵字可讓您比較目前的資料值與數列的算術平均數或中位數。

舉例來說，假設某個圖表顯示去年每個月的訂單利潤。如果訂單利潤低於平均訂單利潤，下列 HighCharts JSON 會將每個長條的顏色變更為灰色 (以十六進位碼 #aaa 表示)：

{
  chart: {},
  series: [{
    name: 'Order Profit',
    formatters: [{
      select: 'value < mean',
      style: {
        color: '#aaa'
      }
    }]
  }]
}

如要比較序列值與中位數，而非平均值，請將 select: 'value < mean' 行變更為 select: 'value < median'。

使用範本儲存及共用設定

您可以將設定儲存為範本，以便在其他資料視覺化中重複使用，或是分享給其他使用者做為起點。

儲存範本

在「圖表設定」編輯器中編輯 HighCharts JSON 時，您可以按照下列步驟將程式碼儲存為範本：

在「圖表設定編輯器」對話方塊中，按一下「另存為範本」。
為範本指定專屬名稱。
輸入說明，讓其他使用者瞭解範本的用途。
視需要編輯及預覽程式碼。
按一下「儲存」來驗證程式碼。
修正所有驗證錯誤。
再次按一下「儲存」，儲存範本。

建立範本時，請注意下列事項：

嵌入式使用者無法建立、編輯或套用範本。
只要是例項中具有圖表設定編輯器存取權的非嵌入使用者，都能看到範本。
並非所有範本都適用於所有視覺化類型。建議在「說明」欄位中指定範本應搭配使用的視覺化類型。

套用範本

您可以將範本套用至目前的視覺呈現，套用範本時，請注意下列事項：

套用範本會覆寫您在圖表設定編輯器中撰寫的任何程式碼。
並非所有範本都適用於所有視覺化類型。舉例來說，如果範本作者為長條圖編寫程式碼，該程式碼對折線圖的影響可能不同。

如要套用範本，請按照下列步驟操作：

在「圖表設定編輯器」對話方塊中，按一下「已儲存的範本」。
按一下範本，然後點選「套用範本」。
按一下「繼續」。

Looker 會套用範本，您可以在圖表設定編輯器中繼續編輯。

刪除範本

如要刪除範本，請按照下列步驟操作：

在「圖表設定編輯器」對話方塊中，按一下「已儲存的範本」。
找出要刪除的範本，然後按一下旁邊的三點選單。
點選「刪除」。

完成變更後，按一下「已儲存的範本」對話方塊中的「X」X按鈕，返回「圖表設定編輯器」對話方塊。

編輯範本

如要編輯範本，請按照下列步驟操作：

在「圖表設定編輯器」對話方塊中，按一下「已儲存的範本」。
按一下要編輯的範本旁邊的三點選單。
按一下 [編輯]。
完成變更後，按一下「儲存」。

建立新的圖表類型

您可以使用圖表設定編輯器，建立 Looker 預設視覺化類型未提供的視覺化類型。下列文章提供一些範例，說明如何使用圖表設定編輯器設計視覺化效果：