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

視覺上醒目顯示符合特定條件的值,可讓使用者快速掌握資料趨勢。這種模式通常稱為條件式格式設定

舉例來說,這頁面上的「以顏色標示最大值、最小值和百分位值」範例圖表,可協助使用者快速找出銷售量最低和最高的月份:

在 Looker 中,您可以使用文字和表格圖表視覺化設定中的內建選項,將條件格式套用至文字和表格圖表。針對笛卡爾圖表,您可以使用圖表設定編輯器,依條件設定資料值的格式。

在圖表設定編輯器中,您可以使用 series formatters 屬性,將條件式設定格式套用至符合特定條件的值。以下是可套用的部分條件式格式規則:

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

    舉例來說,如要將條件式格式套用至大於 100 的數值,請使用 select: 'value > 100'

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

    舉例來說,如要將條件式格式套用至最大值,請使用 select: 'max'

  • 該值位於指定百分位數排名內。

    舉例來說,如要將條件式格式套用至前 10% 的值,請使用 select: 'percent_rank >= 0.9'

  • X 軸值與指定值相符。

    舉例來說,如要將條件式格式套用至 x 軸值為「Columbia」的資料列,請使用 select: name = Columbia

本食譜提供以下教學課程:

以顏色標示最大值、最小值和百分位值

您可以使用 selectstyle 屬性,指定笛卡爾圖表中最大和最小資料值的顏色,以及任何低於指定百分比的值。

食材

事前準備

如要建立含有條件式格式的笛卡爾圖表,請完成下列步驟:

範例:資料欄檢視圖

業務團隊希望能夠快速找出一年內的每月銷售趨勢。他們使用圖表顯示按月份分組的總費用

你可以使用條件式格式,標示符合特定目標的值,讓使用者更容易理解資料。

在本例中,銷售團隊想強調下列值:

  • 資料欄的「總費用」值越低,顏色就會越深。
  • 總費用值最高的資料欄會以綠色顯示。
  • 位於下三十百分位以下的任何欄位 (總費用) 會以橘色顯示。
  • 所有其他欄都會顯示為灰色。

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

  1. 在探索中查看笛卡爾圖表,或在觀點或資訊主頁中編輯笛卡爾圖表。
  2. 在圖表中開啟「編輯」選單。
  3. 按一下「Plot」分頁中的「Edit Chart Config」按鈕。Looker 會顯示「Edit Chart Config」對話方塊。
  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.fillColorstyle.marker.lineColor 屬性指定顏色,而非 style.color 屬性。

lineColor 屬性會設定散布圖中每個點的輪廓顏色。fillColor 屬性會設定散布圖中每個點的內部顏色。

您可以按照下列步驟修改上述範例:

  1. 在探索中查看散布圖視覺化資料,或在 Look 或資訊主頁中編輯散布圖視覺化資料。
  2. 在圖表中開啟「編輯」選單。
  3. 按一下「Plot」分頁中的「Edit Chart Config」按鈕。Looker 會顯示「Edit Chart Config」對話方塊。
  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 屬性中使用 ANDOR,在條件式格式設定規則中結合邏輯運算式。

食材

事前準備

如要建立含有條件式格式的笛卡爾圖表,請完成下列步驟:

範例

銷售團隊希望能快速找出符合特定條件的月份。他們使用圖表顯示按月份分組的總費用

你可以使用條件式格式,標示符合特定目標的值,讓使用者更容易理解資料。

在本例中,銷售團隊想強調下列值:

  • 總費用值介於 $43,000 美元至 $45,000 美元 (含) 之間的任何資料欄都會顯示為紫色。
  • 所有其他欄都會顯示為灰色。

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

  1. 在探索中查看笛卡爾圖表,或在觀點或資訊主頁中編輯笛卡爾圖表。
  2. 在圖表中開啟「編輯」選單。
  3. 按一下「Plot」分頁中的「Edit Chart Config」按鈕。Looker 會顯示「Edit Chart Config」對話方塊。
  4. 選取「圖表設定 (覆寫)」部分,然後輸入以下 JSON:

    {
      series: [{
        color: 'gray',
        formatters: [{
            select: 'value >= 43000 AND value <= 45000',
            style: {
              color: 'purple',
            }
          },
        ]
      }]
    }
    
  5. 如要套用變更,請按一下「套用」

如今,銷售團隊可以快速查看 3 月、4 月和 9 月的收益介於 $43,000 美元和 $45,000 美元之間,並採取進一步行動,瞭解這幾個月的情況。

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