highcharts - 向下钻取气泡图中的运动 Highcharts

Question

我已经为气泡图创建了向下钻取。此钻取的数据如下:

drilldown: {
        series: [{
            id: 'animals',
            data: [
                ['Cats', 5],
                ['Dogs', 2],
                ['Cows', 1],
                ['Sheep', 2],
                ['Pigs', 1]
            ]
        }, {
            id: 'fruits',
            data: [
                ['Apples', 4],
                ['Oranges', 2]
            ]
        }, {
            id: 'cars',
            data: [
                ['Toyota', 4],
                ['Opel', 2],
                ['Volkswagen', 2]
            ]
        }]
    }

我可以按顺序使用数据进行钻取，例如:id:动物数据将是这样，当我水平滚动猫的数据点时将一一呈现。

data: [
                ['Cats', [5,1,2,3,4]],
                ['Dogs', [2,1,5,6,7]]
            ]

JSFiddle

Answer 1

Motion插件目前不支持drilldown系列，但还是有可能实现的。

您的 JSFiddle 走在正确的道路上，但它需要一种解决方法，以便让 Motion 在图表向下钻取时注意到系列变化。

JSFiddle 的工作解决方案:http://jsfiddle.net/larsac07/Lon306y5/ .

必须为 Motion 准备深入系列，并且 Motion 必须了解系列中的更改:

// Array that keeps track of prepared drilldown series.
var preparedDrilldowns = [];

// This function is called for each series, including drilldown
// series, and prepares it by setting an initial value for each
// point if the series is not already prepared.
function prepareDrilldowns(e) {
    var chart = e.target,
        motion = chart.motion,
        value;
    if (motion) {
        Highcharts.each(chart.series, function (series) {
            if (preparedDrilldowns.indexOf(series.name) < 0) {
                Highcharts.each(series.points, function (point) {
                    value = point.sequence[motion.round(motion.playRange.value)];
                    point.update(value, false, false);
                });
                preparedDrilldowns.push(series.name);
                series.chart.redraw();
            }
        });
    }
}

// This function updates Motion with the current series (when 
// drilldown is triggered, the current chart series are swapped).
function updateChart(e) {
    var motion = e.target.motion;
    if (motion) {
        motion.dataSeries = e.target.series;
    }
}

通过图表事件调用函数:

chart: {
    events: {
        // Called for each redraw
        redraw: function (e) {
            // Call updateChart() for each redraw
            updateChart(e);

            // This is only called once per series and
            // drilldown series.
            prepareDrilldowns(e);
        }
    }
}