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

您可以使用图表配置编辑器来自定义使用 HighCharts API 的 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 错误消息。您可以使用图表配置（替换项）窗格底部的自动修正代码 选项清理无效的 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 > 0 定位所有正值，也可以使用 value = 100 仅匹配值为 100 的系列。您还可以将 value 与其他系列值进行比较，如需查看示例，请参阅颜色系列与其他系列值的比较部分。
• 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 选项。

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

示例

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

添加垂直参考频段

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

创建新的可视化图表类型

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

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