CoreUI CChartBar柱状图点击获取月份并跳转页面实现方法咨询

CoreUI的CChartBar基于Chart.js封装，组件的onClick事件默认返回三个参数，你当前只传入了事件对象，因此无法获取点击柱体的关联数据，按以下步骤修改即可实现需求：

1. 调整组件的onClick回调参数 #

修改CChartBar的onClick属性，接收完整的回调参数，原有其他配置保持不变即可：

<CChartBar
  datasets={[/* 原有数据集配置不变 */]}
  labels={dateLabels}
  // 新增后两个参数：点击的元素数组、图表实例
  onClick={(event, elements, chartInstance) => drillDown(elements, chartInstance)}
  options={/* 原有配置不变 */}
/>

2. 实现下钻跳转逻辑 #

在组件内编写drillDown方法，获取月份后跳转页面即可，以下是基于react-router的实现示例，也可根据你的路由方案替换为window.location.href赋值：

import { useNavigate } from 'react-router-dom'

const YourChartComponent = () => {
  const navigate = useNavigate()
  // 原有变量定义：expectedExpirations、actualExpirations、dateLabels等保持不变

  const drillDown = (elements, chartInstance) => {
    // 未点击到柱体时直接退出
    if (!elements?.length) return
    // 获取点击柱体对应的x轴索引
    const dataIndex = elements[0].index
    // 从x轴标签中取出对应月份
    const targetMonth = chartInstance.data.labels[dataIndex]
    
    // 跳转至表格页，将月份作为查询参数传递
    navigate(`/lease-expiration-table?month=${encodeURIComponent(targetMonth)}`)
  }

  // 原有返回渲染逻辑保持不变
}

补充说明 #

你使用的是堆叠柱状图，点击同一横轴位置不同图层的柱体，返回的dataIndex是一致的，不需要额外处理即可正常拿到对应月份。如果需要同时传递当前柱体对应的数值，也可以通过chartInstance.data.datasets[elements[0].datasetIndex].data[dataIndex]获取对应数据集的数值。

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