充分運用 Looker 視覺化內容食譜：在笛卡爾圖表中自訂條件式格式

醒目顯示符合特定條件的值，方便使用者快速找出資料趨勢。這個模式通常稱為「條件式格式設定」。

舉例來說，本頁「為最大值、最小值和百分位數值加上顏色」範例中的這項視覺化效果，可協助使用者快速找出銷售量最低和最高的月份：

在 Looker 中，您可以使用文字和表格圖表視覺化設定中的內建選項，將條件式格式套用至文字和表格圖表。如果是笛卡兒圖表，您可以使用圖表設定編輯器，有條件地設定資料值的格式。

在圖表設定編輯器中，您可以使用 series formatters 屬性，對符合特定條件的值套用條件式格式。您可以套用下列條件式格式設定規則：

  • 該值大於、小於或等於指定值。

    舉例來說，如要對大於 100 的數值套用條件式格式設定，請使用 select: 'value > 100'。

  • 這個值是序列中的最小值或最大值。

    舉例來說，如要對最大值套用條件式格式設定，請使用 select: 'max'。

  • 值位於指定百分位數等級內。

    舉例來說，如要對前 10% 的值套用條件式格式設定，請使用 select: 'percent_rank >= 0.9'。

  • X 軸值符合指定值。

    舉例來說，如要對 x 軸值為「Columbia」的序列套用條件式格式設定，請使用 select: name = Columbia。

本食譜提供下列教學課程：

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

您可以使用 select 和 style 屬性，指定笛卡兒圖表中最大和最小資料值的顏色，以及任何低於指定百分位數的值。

食材

必要條件

如要建立具有條件式格式設定的笛卡爾圖表，必須符合下列條件：

範例：資料欄視覺化

銷售團隊希望能夠快速找出一年內的每月銷售趨勢。並以視覺化方式顯示按「月份」分組的「總費用」。

您可以使用條件式格式設定，醒目顯示符合特定目標的值，讓使用者更容易瞭解資料。

在本例中，銷售團隊想強調下列價值：

  • 「總費用」值最低的資料欄會以紅色顯示。
  • 「總費用」值最高的資料欄會以綠色顯示。
  • 如果「總費用」位於最後 30% 的百分位數，該欄就會顯示為橘色。
  • 其他所有欄都會顯示為灰色。

如要將這項條件式格式套用至笛卡爾圖表，請按照下列步驟操作：

  1. 在「探索」中查看笛卡爾式圖表，或在「Look」或資訊主頁中編輯笛卡爾式圖表。
  2. 開啟資料視覺化中的「編輯」選單。
  3. 按一下「Plot」(繪圖) 分頁中的「Edit Chart Config」(編輯圖表設定) 按鈕。Looker 會顯示「編輯圖表設定」對話方塊。

  4. 選取「圖表設定 (覆寫)」部分，然後輸入下列 JSON：

    {
  series: [{
    color: 'gray',
    formatters: [{
        select: 'max',
        style: {
          color: 'green',
        }
      },
      {
        select: 'percent_rank <= 0.3',
        style: {
          color: 'orange'
        }
      },
      {
        select: 'min',
        style: {
          color: 'red'
        }
      },
    ]
  }]
}

  5. 如要套用變更，請按一下「套用」。

現在銷售團隊可以快速查看哪些月份的業績不佳，並調查這些月份，找出原因。

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

範例：散布圖表

如要對散佈圖視覺化效果套用條件式格式設定，可以為 style.marker.fillColor 和 style.marker.lineColor 屬性指定顏色，而非 style.color 屬性。

lineColor 屬性會設定散佈圖中每個點的外框顏色。fillColor 屬性會設定散佈圖中每個點的內部顏色。

您可以按照下列步驟修改先前的範例：

  1. 在「探索」中查看散佈圖，或在「Look」或資訊主頁中編輯散佈圖。
  2. 開啟資料視覺化中的「編輯」選單。
  3. 按一下「Plot」(繪圖) 分頁中的「Edit Chart Config」(編輯圖表設定) 按鈕。Looker 會顯示「編輯圖表設定」對話方塊。

  4. 選取「圖表設定 (覆寫)」部分，然後輸入下列 JSON：

    {
  series: [{
    color: 'gray',
    formatters: [{
        select: 'max',
        style: {
          marker: {
            fillColor: 'green',
            lineColor: 'green'
          }
        }
      },
      {
        select: 'percent_rank <= 0.3',
        style: {
          marker: {
            fillColor: 'orange',
            lineColor: 'orange'
          }
        }
      },
      {
        select: 'min',
        style: {
          marker: {
            fillColor: 'red',
            lineColor: 'red'
          }
        }
      }
    ]
  }]
}

  5. 按一下「套用」套用變更。

在產生的視覺化效果中，系統會根據格式規則，為最小值、最大值和最低 30% 的值加上顏色。

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

合併條件式格式設定條件

您可以在 select 屬性中使用 AND 和 OR，在條件式格式設定規則中合併邏輯運算式。

食材

必要條件

如要建立具有條件式格式設定的笛卡爾圖表，必須符合下列條件：

範例

銷售團隊想快速找出符合特定條件的月份。並以視覺化方式顯示按「月份」分組的「總費用」。

您可以使用條件式格式設定，醒目顯示符合特定目標的值，讓使用者更容易瞭解資料。

在本例中，銷售團隊想強調下列價值：

  • 凡是「總費用」值介於 $43,000 到 $45,000 (含) 之間的資料欄，都會顯示為紫色。
  • 其他所有欄都會顯示為灰色。

如要將這項條件式格式套用至笛卡爾圖表，請按照下列步驟操作：

  1. 在「探索」中查看笛卡爾式圖表，或在「Look」或資訊主頁中編輯笛卡爾式圖表。
  2. 開啟資料視覺化中的「編輯」選單。
  3. 按一下「Plot」(繪圖) 分頁中的「Edit Chart Config」(編輯圖表設定) 按鈕。Looker 會顯示「編輯圖表設定」對話方塊。

  4. 選取「圖表設定 (覆寫)」部分，然後輸入下列 JSON：

    {
  series: [{
    color: 'gray',
    formatters: [{
        select: 'value >= 43000 AND value <= 45000',
        style: {
          color: 'purple',
        }
      },
    ]
  }]
}

  5. 如要套用變更，請按一下「套用」。

現在，銷售團隊可以快速查看 3 月、4 月和 9 月的收益介於 $43,000 美元到 $45,000 美元之間，並採取進一步行動，找出這些月份發生了什麼事。

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