请注意，您正在查看 Looker 文档。如需查看 Looker Studio 文档，请访问 https://support.google.com/looker-studio。

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

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

前提条件

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

自定义可视化图表

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

在“探索”中查看可视化图表，或在 Look 或信息中心内修改可视化图表。
打开可视化图表中的修改菜单。
点击 Plot 标签页中的 Edit Chart Config 按钮。Looker 会显示修改图表配置对话框。
- Chart Config (Source) 窗格包含可视化图表的原始 JSON，且无法修改。
- Chart Config (Override) 窗格包含应替换源 JSON 的 JSON。当您首次打开修改图表配置对话框时，Looker 会使用一些默认的 JSON 填充窗格。你可以从这个 JSON 开始，也可以删除此 JSON，然后输入任何有效的 HighCharts JSON。
选择 Chart Config (Override) 部分，然后输入一些有效的 HighCharts JSON。新值将替换图表配置（来源）部分中的任何值。
- 如需查看有效的 HighCharts JSON 示例，请参阅本文的示例部分。
- Looker 接受任何有效的 JSON 值。Looker 不接受函数、日期或未定义的值。
点击 <>（格式代码）以允许 Looker 正确设置 JSON 的格式。
点击预览以测试您所做的更改。
点击应用，应用您所做的更改。系统将使用自定义 JSON 值显示可视化图表。

自定义可视化图表后，您可以保存该可视化图表。如果您在探索中查看了可视化图表，请保存探索。如果您修改了 Look 或信息中心，请点击保存。

如需修改默认的可视化选项，请先移除您在 Chart Config Editor 中所做的任何更改，然后再替换它们。具体而言，请按以下步骤操作：

点击 Plot 标签页中的 Edit Chart Config 按钮。Looker 会显示修改图表配置对话框。
复制 Chart Config (Override) 窗格中的文本。
点击 Clear Chart Overrides 按钮，以删除所有更改。
点击应用。
使用默认可视化图表选项修改可视化图表。
点击 Plot 标签页中的 Edit Chart Config 按钮。Looker 会显示修改图表配置对话框。
在 Chart Config (Override) 窗格中输入一些有效的 HighCharts JSON。您可以将第 2 步中复制的文字用作模板，但请务必使用预览按钮测试您的更改，以确保不存在冲突。
点击应用。

使用 `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 > 0 定位所有正值，或使用 value = 100 仅匹配值为 100 的系列。
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 的高图表选项。

对于线条可视化，请使用 style.marker.fillColor 和 style.marker.lineColor，而不是 style.color。如需查看更完整的线条样式选项列表，请参阅 series.line.data.marker 的高图表选项。

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

示例

以下部分提供了图表配置编辑器一些常见用例的示例。如需查看您可以修改的属性的完整列表，请参阅 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 属性。

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

添加垂直参考频段

如需添加垂直参考频段，请使用 xAxis.plotBands 属性。

以下 HighCharts JSON 添加了 2022 年 11 月 24 日至 2022 年 11 月 29 日之间的垂直参考频段，用于表示促销期。还在图表底部添加了图片说明，以说明该条带的重要性。

请注意，xAxis.plotBands 的 to 和 from 属性必须与图表中的数据值相对应。在本例中，由于数据是基于时间的，因此属性接受 Unix 时间戳值（1669680000000 表示 2022 年 11 月 29 日，1669248000000 表示 2022 年 11 月 24 日）。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'
      }
    }]
  },
}

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

请参阅充分利用 Looker 可视化图表实战宝典：笛卡尔图表中的条件格式自定义页面，通过深入的示例了解如何为笛卡尔可视化的最大值、最小值和百分位值着色。

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

前提条件

自定义可视化图表

使用 series formatters 设置条件格式

select 属性

style 属性

示例