Question

我创建了图表和表格的组合。让我永远能够悬停在一列上并触发相应的工具提示。除了图表中的点（曾经通过悬停在表格列上触发的点）保持悬停状态时，一切正常。

在图片中，我清楚了解我需要完成的工作。我需要的是，每当我将鼠标悬停在另一列时，所有前一点都设置为＆＃34; normal＆＃34;而不是＆＃34;悬停＆＃34; （我怀疑这是真正的称呼方式）

所以在图片中：

蓝色箭头指向正确的状态（当列悬停时）
红色箭头指向错误的状态（一旦你在一个柱子上盘旋但又徘徊在另一个柱子上）
绿色箭头指向除焦点之外的所有点都应

它应该如何：

PS：如果你将鼠标悬停在任何一个单元格或所有单元格上，它们都会得到＆＃34;悬停＆＃34;状态，但是如果你将鼠标悬停在图表的1点上，其余的点就会得到正常的＆＃34;状态，这是我需要完成的事情。

可以找到代码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

更新了小提琴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循环更清晰，但这是主要的想法。

P.S。这是你做的一个非常好的功能！

Highcharts - 删除＆＃34;悬停＆＃34;从图表点开始的状态（在外部设置）

1 个答案: