原生小程序使用ucharts自定义tooltip显示内容

Question

一个三根子的柱状堆叠图，我想实现tooltip显示一个日期和一个三根柱子的平均值就好了 不需要三个柱子的值

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

在原生小程序中使用 uCharts 实现自定义 tooltip 显示内容（如：日期 + 三根柱子的平均值），而不是默认显示每个柱子的具体数值，可以通过以下步骤实现。

---

✅ 解决方案

1. 引入 uCharts 库

确保你已经正确引入了 uCharts 的相关文件。如果你是通过 npm 安装或直接下载的，需要将 u-charts.js、u-charts.css 等文件引入到你的项目中。

---

2. 配置图表配置项（重点）

在 uCharts 的配置项中，我们可以通过 tooltip 属性来自定义 tooltip 的显示内容。关键在于使用 formatter 函数来控制显示逻辑。

// 示例配置项
const option = {
  categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  series: [
    {
      name: 'A',
      data: [10, 20, 30, 40, 50, 60, 70],
      type: 'column',
      stack: 'group1'
    },
    {
      name: 'B',
      data: [20, 30, 40, 50, 60, 70, 80],
      type: 'column',
      stack: 'group1'
    },
    {
      name: 'C',
      data: [30, 40, 50, 60, 70, 80, 90],
      type: 'column',
      stack: 'group1'
    }
  ],
  tooltip: {
    show: true,
    formatter: (res) => {
      // res 是一个数组，包含当前选中的数据点信息
      const data = res[0];
      const avg = (data.data[0] + data.data[1] + data.data[2]) / 3;
      return `日期：${data.name}\n平均值：${avg.toFixed(2)}`;
    }
  }
};

重点说明：

• formatter 是一个函数，用于自定义 tooltip 内容。
• res[0].name 表示当前点击的分类名称（即“日期”）。
• res[0].data 是该分类下所有柱子的数据值（假设三根柱子依次为 A、B、C）。
• 计算平均值后返回格式化字符串。

---

3. 在页面中渲染图表

在 WXML 文件中添加一个 canvas 元素，并在 JS 中初始化 uCharts 图表。

<view class="chart-container">
  <canvas canvas-id="myChart" style="width: 100%; height: 400px;"></canvas>
</view>

Page({
  onReady() {
    const chart = new uCharts({
      $this: this,
      canvasId: 'myChart',
      categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      series: [
        { name: 'A', data: [10, 20, 30, 40, 50, 60, 70], type: 'column', stack: 'group1' },
        { name: 'B', data: [20, 30, 40, 50, 60, 70, 80], type: 'column', stack: 'group1' },
        { name: 'C', data: [30, 40, 50, 60, 70, 80, 90], type: 'column', stack: 'group1' }
      ],
      tooltip: {
        show: true,
        formatter: (res) => {
          const data = res[0];
          const avg = (data.data[0] + data.data[1] + data.data[2]) / 3;
          return `日期：${data.name}\n平均值：${avg.toFixed(2)}`;
        }
      }
    });
  }
});

---

4. 样式调整（可选）

根据需求可以对 tooltip 的样式进行进一步定制，比如字体颜色、背景色等。

/* 可以在 page 的 style 中添加 */
.u-charts-tooltip {
  background-color: #fff;
  color: #333;
  font-size: 14px;
}

---

✅ 总结

以下是实现自定义 tooltip 的 关键步骤：

1. 引入 uCharts 库
2. 配置图表的 tooltip.formatter 方法
3. 计算三根柱子的平均值并返回格式化内容
4. 在 WXML 中渲染 canvas 并初始化图表

重点部分已加粗：

• tooltip.formatter 是自定义 tooltip 的核心
• 使用 res[0].data 获取三根柱子的数据
• 计算平均值并返回字符串格式的内容

---

如需进一步优化，还可以考虑：

• 多个堆叠组的处理
• 不同图表类型（如折线图、饼图）的 tooltip 自定义

如有其他问题，欢迎继续提问！