1

データを含む一連のHTMLテーブルセルがあります。その例は次のとおりです。

<tr id="rrow1">
  <td>
    <a href="/electricity" class="category">Electricity</a>
  </td>
  <td>
    901.471
  </td>
</tr>

<tr id="rrow2">...
<tr id="rrow3">...
etc

この場合、それぞれ<tr>（またはより広いコミュニティではa div/ span/ tr/ ）には、whileループ（PHPの場合）にtd基づいてシーケンシャルIDが割り当てられます。$rrow++;

また、 highchartsライブラリを使用する円グラフもあります。ここでは、特定の/ / /要素のマウスオーバーsliced: trueに基づいてスライス（）を強調表示します。この場合は上記のとおりですが、必要に応じて複数の/反復要素と（）onmouseoutを使用します。 。divspantrtd#rrow1sliced: false

簡単な例として、次のさまざまな派生物にアクセスしようとしましたが、失敗しました。

$('#rrow1').mouseover(function() {
    chart.series[0].graph.attr('sliced', true);
});

$('#rrow1').mouseout(function() {
    chart.series[0].graph.attr('sliced', false);
});

私が見つけた最も近いものはこれですが、せいぜいろくでなしで、成功しませんでした：

plotOptions: {
  series: {
        mouseOver: function() {
          if( $('#rrow1').mouseover )
            series.x = sliced: true;
        },
        mouseOut: function() {
          if( $('#rrow1').mouseout )
            series.x = sliced: false;
        }
      }
    }

これらは正しいアプローチにはほど遠いものであり、検索したにもかかわらず、方向性を示したり、方向性を示したりするための有効で役立つ例を見つけることができません。

jsfiddleで問題の円グラフをここで表示できます。

4

1 に答える 1

3

マウスオーバーでアニメーション

パイのピースをスライスする関数があり、各ポイント イベントで呼び出すことができます。

plotOptions: {
    series; {
        point: {
            events: {
                mouseOver: function() {
                    this.slice();
                },
                mouseOut: function() {
                    this.slice();
                }
            }
        }
    }
}

チャートを更新しました。

外部要素からアニメーション化する

まず、アニメートするスライスを特定する必要があります。idfor eachを使用してそれを行うことができ、それぞれの html 要素に同じ IDsliceを格納できます。 次に、スライスを取得して関数を呼び出すために使用できます。
chart.get(id);slice

このように：
私のシリーズ

series: [{
    type: 'pie',
    name: 'Share',
    data: [{
        name: 'Electricity',
        id: 'eletricity-slice'
    }, {
        name: 'Heating Oil',
        id: 'oil-slice'
    }, {
        name: 'Gas',
        id: 'gas-slice'
    }, {
        name: 'Other',
        id: 'other-slice'
    }]
}]

私のHTML

<table border="1">
    <tr data-slice="eletricity-slice"><td>Electricity</td></tr>
    <tr data-slice="oil-slice"><td>Heating Oil</td></tr>
    <tr data-slice="gas-slice"><td>Gas</td></tr>
    <tr data-slice="other-slice"><td>Other</td></tr>
</table>

このようにして、どの要素がどのポイントをスライスするかがわかります。次に、イベントをバインドするだけです。

$('table').on('mouseover mouseout', 'tr', function() {
    var sliceId = $(this).data('slice'); // get data attr which contais the id
    animateSlice(chart.get(sliceId));    // pass slice point as parameter
});

必要なスライスをアニメーション化する関数を作成するanimateSliceので、次のようにチャート イベントからも呼び出すことができます。

mouseOver: function() {
    animateSlice(this);
},
mouseOut: function() {
    animateSlice(this);
}

そしてここにanimateSlice関数があります：

function animateSlice(point) {
    point.slice();
}

それで、これが結果です。

于 2012-12-14T03:18:50.383 に答える