SAP Viz饼图：添加Tooltip多属性后如何移除图例冗余维度？

这个场景我碰到过不少次——为了让Tooltip显示多属性就把所有字段都设成维度，结果Viz库默认把维度组合当成了图例标签，确实很头疼。要实现图例只显示Store名称，Tooltip展示完整属性，有两种更合理的处理方式，不用把所有字段都塞进维度里：

方法一：规范维度与度量，自定义Tooltip内容 #

这是最推荐的方案，因为维度的核心作用是区分饼图扇区（也就是你的Store），Country和Consumption属于附加信息，完全没必要作为维度。

步骤1：调整数据集配置 #

只把Store设为维度，Consumption作为度量（毕竟它是数值型数据），同时确保数据源里包含Country字段：

const oDataset = new sap.viz.ui5.data.FlattenedDataset({
  dimensions: [
    {
      name: "Store",
      value: "{Store}"
    }
  ],
  measures: [
    {
      name: "Consumption",
      value: "{Consumption}"
    }
  ],
  data: {
    path: "/yourDataPath"
  }
});

步骤2：自定义Tooltip内容 #

通过Viz的tooltip.formatTooltip回调函数，手动从当前数据点中提取Country和Consumption，构建你想要的Tooltip内容：

const oPieChart = new sap.viz.ui5.Pie({
  width: "800px",
  height: "600px",
  dataset: oDataset,
  tooltip: {
    visible: true,
    formatTooltip: (oEvent) => {
      const dataPoint = oEvent.data[0];
      // 自定义Tooltip的HTML结构，你可以按需调整样式
      return `
        <div style="padding: 8px;">
          <div><strong>Store:</strong> ${dataPoint.Store}</div>
          <div><strong>Country:</strong> ${dataPoint.Country}</div>
          <div><strong>Consumption:</strong> ${dataPoint.Consumption}</div>
        </div>
      `;
    }
  },
  legend: {
    visible: true,
    // 确保图例只显示Store名称
    label: {
      formatString: "{Store}"
    }
  }
});

这么配置后，饼图扇区依然按Store划分，图例只显示Store名称，Tooltip则会展示完整的三个属性，完美分离两者的职责。

方法二：保留多维度，自定义图例标签格式 #

如果你因为特殊需求必须保留多维度，也可以通过legend.labelFormatter来截取图例显示的内容，只保留Store部分：

const oPieChart = new sap.viz.ui5.Pie({
  // ... 其他原有配置
  legend: {
    visible: true,
    labelFormatter: (value) => {
      // 假设当前图例值是"AAA/India/10"，拆分后取第一个元素
      return value.split("/")[0];
    }
  }
});

不过这种方法属于“治标不治本”，因为维度本质还是多字段组合，可能会影响图表的其他行为（比如数据聚合逻辑），所以更推荐第一种方案。

内容的提问来源于stack exchange，提问作者Bhoomika Jain