使用 Chart Config Editor 自定义可视化图表

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

前提条件

如需访问 Chart Config Editor，您必须拥有 can_override_vis_config 权限。

自定义可视化图表

如需使用 Chart Config Editor 自定义可视化图表，请按以下步骤操作：

  1. 在“探索”中查看可视化图表，或者在 Look 或信息中心内修改可视化图表。
  2. 打开可视化图表中的修改菜单。

  3. 点击 Plot 标签页中的 Edit Chart Config 按钮。Looker 会显示 Edit Chart Config 对话框。

    • Chart Config (Source) 窗格包含可视化图表的原始 JSON，无法修改。

    • Chart Config (Override) 窗格包含应替换源 JSON 的 JSON。首次打开修改图表配置对话框时，Looker 会在该窗格中填充一些默认 JSON。您可以从此 JSON 开始，也可以删除此 JSON，然后输入任何有效的 HighCharts JSON。

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

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

  5. 点击 <>(Format code)，以允许 Looker 正确设置 JSON 格式。

  6. 点击预览以测试您所做的更改。

  7. 点击应用，应用您所做的更改。系统将使用自定义 JSON 值来显示可视化图表。

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

如果您尝试预览包含无效 JSON 的代码，Looker 会显示 Invalid JSON detected 错误消息。您可以使用 Chart Config (Override) 窗格底部的自动修复代码 选项来清理无效的 JSON。

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

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

使用 series formatters 进行条件格式设置

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

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 设置系列边框宽度。如需查看更完整的样式选项列表，请参阅 Highcharts 选项 series.column.data。

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

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

示例

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

添加垂直参考频段

如需添加垂直参考频段，请使用 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'
      }
    }]
  },
}

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

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

创建新的可视化类型

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