如何使用Chart.js创建可点击柱状图并通过jQuery展示对应数据？

下面是改造后的完整代码，实现点击柱子弹出详情div并展示对应数据的功能：

HTML 结构 #

<div class="chart-container">
  <canvas id="barChart"></canvas>
</div>
<!-- 用于展示详情的隐藏div -->
<div id="dataDetail" class="detail-box">
  <h4>数据详情</h4>
  <p>类别: <span id="category"></span></p>
  <p>数值: <span id="value"></span></p>
</div>

CSS 样式 #

.chart-container {
  width: 80%;
  margin: 20px auto;
}

.detail-box {
  position: absolute;
  display: none;
  background: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 100;
}

JavaScript 代码（Chart.js + jQuery） #

// 准备柱状图数据
const chartData = {
  labels: ['产品A', '产品B', '产品C', '产品D', '产品E'],
  datasets: [{
    label: '月度销量',
    data: [120, 190, 300, 50, 250],
    backgroundColor: [
      'rgba(255, 99, 132, 0.6)',
      'rgba(54, 162, 235, 0.6)',
      'rgba(255, 206, 86, 0.6)',
      'rgba(75, 192, 192, 0.6)',
      'rgba(153, 102, 255, 0.6)'
    ],
    borderColor: [
      'rgba(255, 99, 132, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)'
    ],
    borderWidth: 1
  }]
};

// 初始化柱状图
const ctx = document.getElementById('barChart').getContext('2d');
const barChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

// 绑定点击事件
$('#barChart').click(function(e) {
  const activeElements = barChart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, true);
  
  if (activeElements.length > 0) {
    const index = activeElements[0].index;
    const selectedLabel = chartData.labels[index];
    const selectedValue = chartData.datasets[0].data[index];
    
    // 填充详情数据
    $('#category').text(selectedLabel);
    $('#value').text(selectedValue);
    
    // 定位并显示详情div
    const rect = this.getBoundingClientRect();
    $('#dataDetail')
      .css({
        top: `${e.clientY - rect.top + window.scrollY + 10}px`,
        left: `${e.clientX - rect.left + window.scrollX + 10}px`
      })
      .show();
  }
});

// 点击页面其他区域隐藏详情div
$(document).click(function(e) {
  if (!$(e.target).closest('#dataDetail, #barChart').length) {
    $('#dataDetail').hide();
  }
});

关键改造点说明 #

• 图表类型切换：将原Scatter图表的type: 'scatter'改为type: 'bar'，适配柱状图渲染逻辑。
• 点击事件处理：利用Chart.js的getElementsAtEventForMode方法获取点击的柱子元素，解析出对应的数据索引，进而拿到标签和数值。
• 详情展示逻辑：通过jQuery控制隐藏div的显示/隐藏，动态填充数据并根据点击位置定位，提升交互体验。
• 外部点击隐藏：添加文档点击事件，点击图表和详情框以外的区域自动隐藏详情，优化交互完整性。

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