Angular 5中为ng2-charts饼图各区块绑定独立点击事件

嗨，我来帮你搞定这个需求！其实你不用给每个区块单独绑定事件，只要在现有的chartClicked方法里，通过事件返回的参数判断点击的是哪个区块，再执行对应的操作就可以了。

核心思路 #

ng2-charts的chartClicked事件返回的e对象里，active数组会包含被点击区块的详细信息（比如索引、标签、数据等），我们可以利用这些信息区分不同区块，进而执行不同逻辑。

具体实现步骤 #

首先，你的安装命令是没问题的：

npm install ng2-charts --save

接下来修改你的chartClicked方法，加入区块判断逻辑：

public chartClicked(e: any): void {
  // 先判断是否点击到了饼图区块（避免点击空白区域报错）
  if (e.active.length > 0) {
    const clickedBlock = e.active[0];
    const chartInstance = clickedBlock._chart;
    const blockIndex = clickedBlock._index; // 区块在数据集中的索引（0、1、2对应你的3个区块）
    const blockLabel = chartInstance.data.labels[blockIndex]; // 区块的标签名称
    const blockValue = chartInstance.data.datasets[0].data[blockIndex]; // 区块对应的数据值

    // 方式1：通过索引判断区块，执行不同操作
    switch(blockIndex) {
      case 0:
        console.log(`点击了第一个区块：${blockLabel}`);
        // 这里编写第一个区块的专属操作逻辑
        break;
      case 1:
        console.log(`点击了第二个区块：${blockLabel}`);
        // 这里编写第二个区块的专属操作逻辑
        break;
      case 2:
        console.log(`点击了第三个区块：${blockLabel}`);
        // 这里编写第三个区块的专属操作逻辑
        break;
    }

    // 方式2：通过标签名称判断（更直观，适合标签固定的场景）
    // if (blockLabel === '区块A') {
    //   // 区块A的操作逻辑
    // } else if (blockLabel === '区块B') {
    //   // 区块B的操作逻辑
    // } else if (blockLabel === '区块C') {
    //   // 区块C的操作逻辑
    // }
  }
}

关键细节说明 #

• e.active[0]._index：拿到被点击区块在数据集中的索引，对应你饼图的3个区块就是0、1、2。
• chartInstance.data.labels[blockIndex]：如果你的饼图配置了labels数组，用标签名称判断会更易读，后期修改数据也不用调整索引判断。
• 一定要先判断e.active.length > 0，防止点击饼图空白区域时出现空指针报错。

这样就能轻松实现给3个不同区块绑定不同的点击操作啦！

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