Highcharts柱状图点击列切换Div背景色与文本功能问询

嘿，这个交互需求很清晰，我给你整理了一套完整的实现方案，直接就能复用：

1. HTML结构 #

先把基础的页面结构搭好，包含Highcharts的容器和需要切换内容的Div：

<!-- 图表容器 -->
<div id="container" style="height: 400px; margin: 20px 0;"></div>

<!-- 要切换的内容Div -->
<div class="content-div" id="div1">初始内容1</div>
<div class="content-div" id="div2">初始内容2</div>
<div class="content-div" id="div3">初始内容3</div>

<!-- 引入依赖脚本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

2. CSS基础样式 #

给Div加个简单样式，方便看切换效果，也可以根据你的需求调整：

.content-div {
  padding: 15px;
  margin: 10px 0;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #333;
  transition: all 0.3s ease; /* 加个过渡动画，切换更丝滑 */
}

3. JavaScript核心逻辑 #

这部分是关键，咱们通过Highcharts的point.events.click事件来处理柱子点击，同时给每个柱子的数据源绑定对应Div的信息，还支持再次点击切换回初始状态：

$(function() {
  // 先缓存每个Div的初始状态（背景色+文本），方便后续切换回去
  const initialDivStates = {};
  $('.content-div').each(function() {
    initialDivStates[this.id] = {
      bgColor: this.style.backgroundColor || '#f0f0f0',
      textContent: this.textContent
    };
  });

  // 初始化Highcharts柱状图
  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: '点击柱子切换下方Div内容'
    },
    xAxis: {
      categories: ['第一列', '第二列', '第三列']
    },
    yAxis: {
      title: {
        text: '数值'
      }
    },
    plotOptions: {
      column: {
        cursor: 'pointer', /* 鼠标移上去显示手型，提示可点击 */
        point: {
          events: {
            click: function() {
              // 获取当前柱子绑定的Div信息
              const targetDivId = this.options.divId;
              const targetDiv = document.getElementById(targetDivId);
              
              // 判断当前Div是初始状态还是切换后的状态，实现点击切换
              if (targetDiv.textContent === initialDivStates[targetDivId].textContent) {
                // 切换到目标状态
                targetDiv.style.backgroundColor = this.options.bgColor;
                targetDiv.textContent = this.options.text;
              } else {
                // 切回初始状态
                targetDiv.style.backgroundColor = initialDivStates[targetDivId].bgColor;
                targetDiv.textContent = initialDivStates[targetDivId].textContent;
              }
            }
          }
        }
      }
    },
    series: [{
      name: '示例数据',
      // 给每个数据点绑定对应Div的ID、目标背景色和文本
      data: [
        { y: 15, divId: 'div1', bgColor: '#ff6b6b', text: '你点击了第一根柱子！' },
        { y: 25, divId: 'div2', bgColor: '#4ecdc4', text: '第二根柱子被选中啦！' },
        { y: 35, divId: 'div3', bgColor: '#45b7d1', text: '第三根柱子的内容更新了！' }
      ]
    }]
  });
});

关键细节说明： #

• 我们给每个柱子的data对象添加了自定义属性divId、bgColor、text，用来关联对应的Div和要切换的内容，这样逻辑更清晰，扩展性也强；
• 提前缓存了Div的初始状态，实现了点击切换状态（初始→目标→初始）的效果；
• 给柱子加了cursor: pointer的样式，提升用户体验，提示这个元素可点击。

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