如何点击Chart JS柱状图获取标签与数值并跳转传参？

嘿，我来帮你搞定这个点击柱状图传递数据到其他页面的需求！结合你给出的Chart.js代码，我们可以通过它内置的onClick回调函数来实现，下面是完整的修改方案和细节说明：

首先是修改后的Chart.js初始化代码，补全了onClick的逻辑：

var barCtx = document.getElementById("CHRTID");
var myBarChart = new Chart(barCtx, {
  type: 'bar',
  data: {
    labels: ['JAN', 'FEB', 'MAR'], // 注意给标签加上引号，避免未定义变量错误
    datasets: [{
      label: 'Order Entry by Date',
      data: [10,25,95],
      backgroundColor: ['rgba(255, 99, 132, 0.2)'],
      borderColor: ['rgba(255, 99, 132, 0.2)'],
      borderWidth: .25
    }]
  },
  options: {
    onClick: function(event, activeElements) {
      // 先判断是否有被点击的柱子元素
      if (activeElements.length > 0) {
        // 获取被点击的第一个元素（柱状图点击单根柱子只会返回一个元素）
        const activeItem = activeElements[0];
        
        // 从图表数据中提取对应的标签和数值
        const targetLabel = this.data.labels[activeItem.index];
        const targetValue = this.data.datasets[activeItem.datasetIndex].data[activeItem.index];
        
        // 跳转到目标页面，通过URL查询参数传递数据
        // 把下面的`./target-page.html`替换成你实际的目标页面路径
        window.location.href = `./target-page.html?label=${encodeURIComponent(targetLabel)}&value=${targetValue}`;
      }
    }
  }
});

• 获取点击的柱子数据：Chart.js的onClick回调会返回两个参数，activeElements是被点击的图表元素数组。我们通过activeItem.index拿到该柱子在labels数组中的位置，再通过datasetIndex定位到对应的数据集，从而取出标签和数值。
• 安全传递参数：用encodeURIComponent处理标签字符串，避免特殊字符（比如空格、特殊符号）导致URL解析错误。
• 目标页面接收数据：在你跳转的目标页面，可以用URLSearchParams来获取传递的参数，示例代码如下：

// 目标页面的JavaScript代码
const urlParams = new URLSearchParams(window.location.search);
const selectedLabel = urlParams.get('label');
const selectedValue = urlParams.get('value');

// 这里可以根据需求使用这些数据，比如显示在页面上
console.log(`选中的月份：${selectedLabel}，订单数：${selectedValue}`);

• 原代码中labels: [ JAN,FEB,MAR ]没有给标签加引号，会被JavaScript当作未定义变量，所以一定要改成字符串数组形式['JAN', 'FEB', 'MAR']。
• 如果你的页面是SPA（单页应用），可以不用window.location.href跳转，而是用对应框架的路由跳转方式传递参数（比如Vue的$router.push、React的useNavigate）。

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