使用图表配置编辑器自定义可视化图表

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

您可以使用图表配置编辑器来自定义使用 HighCharts API 的 Looker 可视化图表的格式设置选项。这包括大多数笛卡尔图表，例如柱形图、条形图和折线图等。

如果您已启用 Looker 中的 Gemini 功能，则可以使用可视化助理根据文本提示生成 JSON 格式设置选项，从而加快 Looker 可视化图表的自定义速度。

前提条件

如需访问图表配置编辑器，您必须拥有 can_override_vis_config 权限。

自定义可视化

如需使用图表配置编辑器自定义可视化图表，请按以下步骤操作：

1. 在“探索”中查看可视化图表，或在“数据洞见”或信息中心中修改可视化图表。
2. 在可视化图表中打开修改菜单。

3. 点击绘制标签页中的修改图表配置按钮。Looker 会显示修改图表配置对话框。

   • 图表配置（来源）窗格包含可视化图表的原始 JSON，无法修改。

   • 图表配置（替换）窗格包含应替换源 JSON 的 JSON。首次打开修改图表配置对话框时，Looker 会在该窗格中填充一些默认 JSON。您可以先使用此 JSON，也可以删除此 JSON 并输入任何有效的 HighCharts JSON。

4. 选择 Chart Config (Override) 部分，然后输入一些有效的 HighCharts JSON。新值将替换 Chart Config (Source) 部分中的所有值。

   • 如需查看有效 HighCharts JSON 的示例，请参阅示例部分。
   • Looker 接受任何有效的 JSON 值。Looker 不接受函数、日期或未定义的值。

5. 点击 <>（设置代码格式），让 Looker 为您的 JSON 设置正确的格式。

6. 点击预览以测试更改。

7. 点击应用以应用更改。系统将使用自定义 JSON 值显示可视化结果。

自定义可视化图表后，您可以将其保存。如果您是在“探索”中查看的该可视化图表，请保存探索。如果您修改了外观或信息中心，请点击保存。

如果您尝试预览包含无效 JSON 的代码，Looker 会显示 Invalid JSON detected 错误消息。您可以使用图表配置（替换项）窗格底部的自动修正代码 edit_fix_auto 选项清理无效的 JSON。

如果您想修改默认的可视化图表选项，请先移除您在图表配置编辑器中所做的所有更改，然后稍后再进行替换。具体而言，请按以下步骤操作：

1. 点击绘制标签页中的修改图表配置按钮。Looker 会显示修改图表配置对话框。
2. 复制 Chart Config (Override) 窗格中的文本。
3. 点击清除图表替换项按钮，即可删除所有更改。
4. 点击应用。
5. 使用默认的可视化图表选项修改可视化图表。
6. 点击绘制标签页中的修改图表配置按钮。Looker 会显示修改图表配置对话框。
7. 在 Chart Config (Override) 窗格中输入一些有效的 HighCharts JSON。您可以使用在第 2 步中复制的文本作为模板，但请务必使用预览按钮测试所做更改，确保没有任何冲突。
8. 点击应用。

使用 series formatters 设置条件格式

图表配置编辑器接受大多数有效的 HighCharts JSON。它还接受 series formatters 属性，该属性仅在 Looker 中存在。每个系列可以有多个格式设置程序，以组合不同的样式规则。

series formatters 属性接受两个属性：select 和 style。

• 在 select 属性中输入逻辑表达式，以指明要设置格式的具体数据值。
• 在 style 属性中输入一些 JSON，以指明数据值的格式。

例如，以下 JSON 会将每个数据值的颜色设为橙色，如果该值大于或等于 380：

{
  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。如需查看更完整的线条样式选项列表，请参阅 series.line.data.marker 的 Highcharts 选项。

如需查看图表配置编辑器中实现的颜色格式设置，请参阅为最大值、最小值和百分位数值着色示例。

字段元数据

借助字段元数据下拉菜单，您可以复制可视化图表中任何字段的系列名称。您可以使用 series formatters 属性来比较不同系列的值，从而使用此系列名称。如需查看示例，请参阅颜色系列与其他系列值的比较部分。

示例

以下部分提供了图表配置编辑器的一些常见用例示例。如需查看可修改的属性的完整列表，请参阅 HighCharts API 文档。

• 更改背景颜色和轴文本颜色
• 自定义提示文字颜色
• 添加图表注释和标题
• 添加垂直参考频段
• 为最大值、最小值和百分位数值着色

更改背景颜色和轴文本颜色

如需更改可视化图表的背景颜色，请使用 chart.backgroundColor 属性。

同样，如需更改可视化图表中轴的文本颜色，请使用以下属性：

• xAxis.labels.style.color
• xAxis.title.style.color
• yAxis.labels.style.color
• yAxis.title.style.color

以下 HighCharts JSON 会将可视化图表的背景颜色更改为紫色，并将轴标题和标签的文本更改为白色。

{
  chart: {
    backgroundColor: "purple"
  },

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

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

自定义提示颜色

如需自定义提示的颜色，请使用以下属性：

• tooltip.backgroundColor
• tooltip.style.color

以下 HighCharts JSON 会将提示的背景颜色更改为青绿色，并将提示文本的颜色更改为黑色。

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

自定义提示内容和样式

如需自定义提示内容，请使用以下属性：

• tooltip.format
• tooltip.shared

以下 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 属性。

如需获取点的坐标，请点击修改图表配置对话框顶部的检查点元数据。然后，将光标悬停在要添加注释的数据点上。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'
  }]
}

为最大值、最小值和百分位数值着色

如需有关对直角坐标系可视化图表中的最大值、最小值和百分位数值着色的深入示例，请参阅 Looker 可视化图表食谱：直角坐标系图表中的条件格式自定义页面。

颜色系列与其他系列值的对比

从 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 格式引用中位数促销价字段。如需直接复制此字段值，请点击修改图表配置对话框中的字段元数据下拉菜单，然后选择字段名称。

将系列值与平均值或中位数值进行比较

formatters.select 参数在 Looker 25.0 及更高版本中支持 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 时，您可以按照以下步骤将代码保存为模板：

1. 在“图表配置编辑器”对话框中，点击另存为模板。
2. 为模板命名，使其具有唯一性。
3. 输入说明，告知其他用户您的模板的用途。
4. 根据需要修改和预览代码。
5. 点击保存以验证您的代码。
6. 修正所有验证错误。
7. 再次点击保存以保存模板。

创建模板时，请注意以下注意事项：

• 嵌入用户无法创建、修改或应用模板。
• 您的实例中所有有权访问图表配置编辑器的非嵌入用户都将能够看到您的模板。
• 并非所有模板都适用于所有可视化类型。不妨在 Description 字段中指定应将您的模板与哪种可视化图表类型搭配使用。

应用模板

您可以将模板应用于当前的可视化图表。应用模板时，请注意以下事项：

• 应用模板会覆盖您在图表配置编辑器中编写的所有代码。
• 并非所有模板都适用于所有可视化类型。例如，如果模板的作者为条形图编写了代码，那么该代码对折线图可能有不同的效果。

如需应用模板，请按以下步骤操作：

1. 在“Chart Config Editor”（图表配置编辑器）对话框中，点击已保存的模板。
2. 点击所需模板，然后点击应用模板。
3. 点击继续。

Looker 会应用模板，您可以继续在图表配置编辑器中进行修改。

删除模板

如需删除模板，请按以下步骤操作：

1. 在“Chart Config Editor”（图表配置编辑器）对话框中，点击已保存的模板。
2. 点击要删除的模板旁边的三点状菜单。
3. 点击删除。

完成更改后，点击“已保存的模板”对话框中的 X 按钮，返回“图表配置编辑器”对话框。

修改模板

如需修改模板，请按以下步骤操作：

1. 在“Chart Config Editor”（图表配置编辑器）对话框中，点击已保存的模板。
2. 点击要修改的模板旁边的三点状菜单。
3. 点击修改。
4. 完成更改后，点击保存。

创建新的可视化图表类型

您可以使用图表配置编辑器创建不包含在 Looker 的默认可视化图表类型中的可视化图表类型。以下文章提供了一些可通过图表配置编辑器设计的可视化图表示例：

• 使用图表配置编辑器创建圆点图
• 使用图表配置编辑器创建实心仪表板图表
• 使用图表配置编辑器创建流图
• 使用图表配置编辑器创建树状图
• 使用图表配置编辑器创建 Sankey 图表
• 使用图表配置编辑器创建依赖项轮图
• 使用图表配置编辑器创建维恩图
• 使用图表配置编辑器创建放射状图表
• 使用图表配置编辑器创建商品图表