Круговая диаграмма Highcharts с анимацией среза и детализацией при совместном нажатии вызывает исключение в диаграмме и разрывает круговую диаграмму

У меня есть круговая диаграмма здесь. По событию щелчка он разворачивается, а при наведении курсора выполняет анимацию среза. Анимация фрагмента скопирована из ответа здесь от Павла Фуса.

События, которые у меня есть на круговой диаграмме, следующие:

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

Он ломает диаграмму при нажатии на нее для детализации.

Я не уверен, что я делаю неправильно, но я думаю, что событие при наведении курсора испортилось при детализации.

Было бы здорово, если бы обе эти функции работали вместе.


click pie-chart highcharts mouseover drilldown
person G G    schedule 12.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема с реальной бегущей анимацией. Я советую не использовать настройку перевода в круговую диаграмму, пока не будут выполнены все анимации для среза, см.: http://jsfiddle.net/5H675/5/

function setTranslation(p, slice) {
    p.sliced = slice;
    if (!$(p.graphic).is(':animated')) {
        if (p.sliced) {
            p.graphic.animate(p.slicedTranslation);
        } else {
            p.graphic.animate({
                translateX: 0,
                translateY: 0
            });
        }
    }
}
person Paweł Fus    schedule 12.07.2013
comment
Здравствуйте, Павел, похоже, это работает, но есть проблема, заключающаяся в том, что при наведении курсора на несколько фрагментов появляется более двух фрагментов, которые нарезаны. Однако я бы хотел, чтобы в любой момент был вырезан только один фрагмент, просто попробуйте образец и наведите указатель мыши над зеленым ломтиком, а затем красным. - person G G; 19.07.2013
comment
Да, так это работает с самого начала. Вы можете отключить анимацию и вместо этого использовать функцию attr(), см.: jsfiddle.net/5H675/7 - person Paweł Fus; 19.07.2013