如何将按钮InnerText数组与Google Chart数据点关联？

我来帮你搞定这个按钮和Google Chart数据点关联的问题！核心思路是把按钮转成数组后，给每个按钮绑定点击事件，通过按钮的InnerText匹配图表里的Day值，然后触发图表的选中交互；同时也可以反过来，让图表数据点的点击同步按钮状态，实现双向联动。

步骤1：准备按钮的HTML结构 #

首先给所有按钮加一个统一的类名（比如ppm-button），方便批量获取：

<button class="ppm-button">5</button>
<button class="ppm-button">10</button>
<button class="ppm-button">15</button>
<button class="ppm-button">20</button>
<button class="ppm-button">25</button>
<!-- 剩下的5个按钮按同样格式添加即可 -->

步骤2：修改Google Chart代码，添加按钮关联逻辑 #

在你的qi_drawChart函数里，等图表绘制完成后，添加按钮的事件绑定和交互逻辑：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(qi_drawChart);

// Draw the Quality Internal Chart
function qi_drawChart() {
  var qi_data = google.visualization.arrayToDataTable([
    ['Day', 'PPM'],
    ['5', 30000],
    ['10', 20000],
    ['15', 20000],
    ['20', 19000],
    ['25', 20000],
  ]);

  var qi_options = {
    title:'Internal PPM',
    width:221,
    height:265,
    pointSize: 3,
    lineWidth: 1,
    hAxis: {title: '', minValue: 0, maxValue: 31, textStyle:{fontSize:8}},
    vAxis: {title: '', minValue: 0, maxValue: 50000, textStyle:{fontSize:8}, format: 'short'},
    backgroundColor: '#E4E4E4',
    legend: {position: 'none'}
  };

  var qi_chart = new google.visualization.ComboChart(document.getElementById('qi_chart'));
  qi_chart.draw(qi_data, qi_options);

  // ---------------------- 新增按钮关联逻辑 ----------------------
  // 获取所有按钮并转为数组
  const buttons = Array.from(document.querySelectorAll('.ppm-button'));

  // 给每个按钮绑定点击事件
  buttons.forEach(button => {
    button.addEventListener('click', () => {
      // 获取按钮上的Day值（去除空格避免匹配问题）
      const targetDay = button.innerText.trim();
      let targetRowIndex = -1;

      // 遍历图表数据，找到对应Day的行索引（从1开始，因为第0行是表头）
      for (let i = 1; i < qi_data.getNumberOfRows(); i++) {
        if (qi_data.getValue(i, 0) === targetDay) {
          targetRowIndex = i;
          break;
        }
      }

      if (targetRowIndex !== -1) {
        // 选中图表中对应的数据点（Google Chart会自动高亮该点）
        qi_chart.setSelection([{row: targetRowIndex, column: 1}]);
        
        // 高亮当前点击的按钮（需要配合CSS样式）
        buttons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
      }
    });
  });

  // 可选：实现双向联动——点击图表数据点时，同步选中对应按钮
  google.visualization.events.addListener(qi_chart, 'select', () => {
    const selection = qi_chart.getSelection();
    if (selection.length > 0) {
      const selectedRow = selection[0].row;
      const selectedDay = qi_data.getValue(selectedRow, 0);
      // 找到对应Day的按钮并触发点击
      const targetButton = buttons.find(btn => btn.innerText.trim() === selectedDay);
      if (targetButton) {
        targetButton.click();
      }
    }
  });
  // ---------------------- 新增逻辑结束 ----------------------
}

步骤3：添加按钮选中状态的样式 #

为了让用户更直观地看到哪个按钮被选中，给.active类加一些样式：

.ppm-button {
  /* 基础按钮样式，可根据需求调整 */
  padding: 4px 8px;
  margin: 0 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.ppm-button.active {
  /* 选中状态样式 */
  background-color: #2196F3;
  color: white;
  border-color: #1976D2;
}

关键知识点说明 #

• setSelection是Google Chart提供的官方方法，用来选中指定的数据点，图表会自动应用高亮样式。
• 匹配数据时要注意类型一致：你的图表里Day是字符串类型（比如'5'），所以按钮的InnerText也要转成字符串匹配，记得用trim()去除可能的空格。
• 双向联动可以提升用户体验，让按钮和图表的状态保持同步。

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