javascript - Highcharts - 从图表点删除 "hover"状态(外部设置)

Question

我创建了图表和表格的组合。我花了很长时间才能够将鼠标悬停在一列上并触发相应的工具提示。一切工作正常，除了图表中的点(曾经通过悬停在表格列上触发的点)保持悬停状态。

在图像中，很清楚我需要完成什么。我需要这样，每次我将鼠标悬停在另一列上时，之前的所有点都设置为“正常”而不是“悬停”(我怀疑这是调用它的真正方法)

所以在图像中:

• 蓝色箭头指向右侧状态(当该列悬停时)
• 红色箭头指向错误的状态(当您将鼠标悬停在某一列上，然后将鼠标悬停在另一列上时)
• 绿色箭头指向除焦点之外的所有点都应处于的状态

应该如何:

PS:如果您将鼠标悬停在任何一个或所有单元格上，它们都会获得“悬停”状态，但如果您将鼠标悬停在图表的 1 个点上，则其余点将获得“正常”状态，这就是我需要完成的任务。

代码可以找到here或在这里:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>

<div id="section_status_chart"></div>
<div id="section_status_table1">
  <table id="section_status_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Status</th>
        <th>Apr 12</th>
        <th>Apr 13</th>
        <th>Apr 14</th>
        <th>Apr 15</th>
        <th>Apr 16</th>
        <th>Apr 17</th>
        <th>Apr 18</th>
        <th>Apr 19</th>
        <th>Apr 20</th>
        <th>Apr 21</th>
        <th>Apr 22</th>
        <th>Apr 23</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Approved</td>
        <td class="font-green-meadow">2,658</td>
        <td class="font-green-meadow">1,554</td>
        <td class="font-green-meadow">1,653</td>
        <td class="font-green-meadow">1,997</td>
        <td class="font-red-intense">-966</td>
        <td class="font-green-meadow">1,087</td>
        <td class="font-green-meadow">1,434</td>
        <td class="font-green-meadow">1,112</td>
        <td class="font-green-meadow">1,546</td>
        <td class="font-red-intense">-750</td>
        <td class="font-green-meadow">998</td>
        <td class="font-green-meadow">157</td>
      </tr>
      <tr>
        <td>Conditionally approved</td>
        <td class="font-green-meadow">1,543</td>
        <td class="font-red-intense">-1,634</td>
        <td class="font-green-meadow">1,976</td>
        <td class="font-green-meadow">2,643</td>
        <td class="font-green-meadow">1,007</td>
        <td class="font-green-meadow">1,114</td>
        <td class="font-green-meadow">1,435</td>
        <td class="font-red-intense">-841</td>
        <td class="font-green-meadow">1,182</td>
        <td class="font-green-meadow">1,221</td>
        <td class="font-green-meadow">2,009</td>
        <td class="font-red-intense">-201</td>
      </tr>
      <tr>
        <td>Referred</td>
        <td class="font-red-intense">-652</td>
        <td class="font-green-meadow">1,654</td>
        <td class="font-green-meadow">1,262</td>
        <td class="font-green-meadow">1,621</td>
        <td class="font-red-intense">-116</td>
        <td class="font-green-meadow">1,143</td>
        <td class="font-green-meadow">1,004</td>
        <td class="font-green-meadow">1,965</td>
        <td class="font-green-meadow">2,531</td>
        <td class="font-red-intense">-1,645</td>
        <td class="font-green-meadow">1,442</td>
        <td class="font-red-intense">-1,967</td>
      </tr>
      <tr>
        <td>Rejected</td>
        <td class="font-green-meadow">1,144</td>
        <td class="font-green-meadow">1,523</td>
        <td class="font-green-meadow">1,616</td>
        <td class="font-red-intense">-553</td>
        <td class="font-green-meadow">1,039</td>
        <td class="font-green-meadow">1,343</td>
        <td class="font-green-meadow">1,300</td>
        <td class="font-green-meadow">1,533</td>
        <td class="font-red-intense">-882</td>
        <td class="font-green-meadow">1,161</td>
        <td class="font-green-meadow">2,030</td>
        <td class="font-red-intense">-1,932</td>
      </tr>
      <tr class="table-footer">
        <td>Total</td>
        <td class="font-red-intense">-652</td>
        <td class="font-green-meadow">1,654</td>
        <td class="font-green-meadow">1,262</td>
        <td class="font-green-meadow">1,621</td>
        <td class="font-red-intense">-116</td>
        <td class="font-green-meadow">1,143</td>
        <td class="font-green-meadow">1,004</td>
        <td class="font-green-meadow">1,965</td>
        <td class="font-green-meadow">2,531</td>
        <td class="font-red-intense">-1,645</td>
        <td class="font-green-meadow">1,442</td>
        <td class="font-red-intense">-1,967</td>
      </tr>
    </tfoot>
  </table>
</div>

Answer 1

更新了 fiddle here ，但这是解决该问题的主要代码:

...
if (pointIndex > -1) {
  for(var i = 0; i < section_status_chart.series[0].data.length; i++) {
    section_status_chart.series[0].data[i].setState('');
  }
  section_status_chart.series[0].data[pointIndex].setState('hover');
  section_status_chart.tooltip.
    refresh(section_status_chart.series[0].data[pointIndex]);
}
...

在设置与列关联的点的状态之前，将所有点的状态设置回 ''。可能有比我编写的 for 循环更清晰的解决方案，但这就是主要思想。

附注这是您制作的一个非常好的功能!