Question

我有一个高图饼图和饼图右侧的表格，以表格形式显示数据。

我想将表格与饼图相关联，这样当我将鼠标悬停在表格中的一行上时，就好像我将鼠标悬停在饼图段上。

我相信这样做我需要在饼图段/路径中添加一个类，然后我可以在将鼠标悬停在表行上时使用JS调用它。

实现这一目标的最佳方法是什么？

（我知道可能有一个基本的图例附加到饼图，但因为我需要将表放在右边的引导列和其他一些数据中，传说是不够的:)）。

以下是当前的图表设置：

<!-- in Page JS --> 
  <script>

    $(function () { 
      $('#results_donut').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: false
        },
        credits: {
          enabled: false
        },
        plotOptions: {
          pie: {
            dataLabels: {
              enabled: false
            },
            shadow: false,
          },
          series: {
            states: {
              hover: {
                enabled: false
              }
            },
            point: {
              events: {
                mouseOver: function () {
                  this.options.oldColor = this.color;
                  this.graphic.attr("fill", "#F8464A");
                },
                mouseOut: function () {
                  this.graphic.attr("fill", this.options.oldColor);
                }
              }
            },
          }
        },
        tooltip: {
          enabled: false,
          formatter: function() {
            return this.point.name + ': ' + this.y +' %';
          },
          style: {
            fontFamily: 'Open Sans',
            fontWeight: '300',
            letterSpacing: '0.03em',
            fontSize: '14px'
          },
        },
        series: [{
            name: 'Failure Reasons',
            innerSize: '50%',
            data: [["Brakes",74.6],["Seatbelts", 19.4]],
        }],
      });
    });

  </script>

这是视图代码：

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div id="results_donut"></div>
  </div>
  <div class="col-xs-12 col-sm-6 result-figures">
    <div class="row failure-reasons">
      <div class="col-xs-12">
        <h4>Failure Reasons</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <table class="table table-condensed table-hover">
          <tbody>
            <tr>
              <td class="col-xs-6 text-uppercase failure-name">Brakes</td>
              <td class="col-xs-2">74.6%</td>
              <td class="col-xs-4 text-center">
                <a class="transition" href="#">View Details</a>
              </td>
            </tr>
            <tr>
              <td class="col-xs-6 text-uppercase failure-name">Seatbelts</td>
              <td class="col-xs-2">19.4%</td>
              <td class="col-xs-4 text-center">
                <a class="transition" href="#">View Details</a>
              </td>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>

将类添加到highcharts饼图部分

0 个答案: