0

ここに円グラフがあります。クリック イベントでドリル ダウンし、マウスオーバーでスライス アニメーションを実行します。スライス アニメーションは、Pawel Fusの回答hereからコピーされます

円グラフのポイントにあるイベントは次のとおりです。

mouseOut: function () {
    setTranslation(this, false);
},
mouseOver: function() {
    setTranslation(this, true);
},
click: function() {
    var drilldown = this.drilldown;
    if (drilldown) { // drill down
        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
    } else { // restore
        setChart(name, categories, data);
    }
}

それらで使用される関数は次のとおりです。

function setChart(name, categories, data, color) {
    chart.xAxis[0].setCategories(categories);
    chart.series[0].remove();
    chart.addSeries({
        name: name,
        data: data,
        pointPadding: -0.3,
        borderWidth: 0,
        pointWidth: 15,
        shadow: false,
        color: color || 'white'
    });
}

function setTranslation(p, slice){
    p.sliced = slice;
    if(p.sliced){
        p.graphic.animate(p.slicedTranslation);
    } else {
        p.graphic.animate({
            translateX: 0,
            translateY: 0
        });
    }
}

私が抱えている問題は、次の例外がスローされることです。

Uncaught TypeError: Property 'select' of object #<Object> is not a function highcharts.src.js:12364

ドリルダウンのためにチャートをクリックすると、チャートが壊れます。

何が間違っているのかわかりませんが、ドリルダウンでマウスオーバーイベントが台無しになっていると思います。

これらの機能を両方とも連携させることができれば素晴らしいことです。

4

1 に答える 1