ChartJS如何使用嵌套对象数据解析渲染图表并自定义Tooltip？

问题原因 #

饼图属于非笛卡尔坐标系图表，不存在X轴、Y轴的概念，你使用的yAxisKey仅适用于柱状图、折线图这类基于笛卡尔坐标系的图表，所以配置不生效。

解决方案 #

饼图的parsing配置只需直接指定用于计算扇区占比的字段路径即可，完整实现方式如下：

1. 直接将API返回的完整对象数组传入dataset的data字段
2. 在parsing中配置key属性，指定用于渲染饼图的数值字段路径
3. Tooltip回调中通过context.raw即可访问该扇区对应的完整原始对象，自由调用其他字段自定义展示内容

完整可运行示例代码 #

// 模拟API返回的完整对象数组
const apiData = [
  {
    month: '一月',
    current_price: { eur: 320, cny: 2400 },
    desc: '新年首月销量',
    count: 120
  },
  {
    month: '二月',
    current_price: { eur: 480, cny: 3600 },
    desc: '促销活动月销量',
    count: 190
  }
]

const data = {
  labels: apiData.map(item => item.month),
  datasets: [{
    label: '销售额',
    backgroundColor: ["#0074D9", "#FF4136"],
    // 直接传入完整对象数组，不提前提取字段
    data: apiData,
    // 核心配置：指定用于计算饼图扇区大小的字段路径
    parsing: {
      key: 'current_price.eur'
    }
  }]
}

const config = {
  type: 'pie',
  data: data,
  options: {
    responsive: true,
    plugins: {
      tooltip: {
        enabled: true,
        usePointStyle: true,
        callbacks: { 
          title: function(tooltipItem) {
            return tooltipItem[0].label;
          },
          label: (context) => { 
            // context.raw就是当前扇区对应的完整原始API对象
            const rawData = context.raw
            return [
              `欧元销售额：${rawData.current_price.eur} €`,
              `人民币销售额：${rawData.current_price.cny} ¥`,
              `销量：${rawData.count} 件`,
              `备注：${rawData.desc}`
            ]
          }
        },
      },
    },
  },
};

const myChart = new Chart(
  document.getElementById('myChart'),
  config
);

<html>
  <meta charset="UTF-8">
  <div>
    <canvas id="myChart"></canvas>
  </div>
  <!-- 需提前引入Chart.js v4及以上版本依赖 -->
</html>

内容的提问来源于stack exchange，提问作者AI Humanizer