Question

单击一个图表时，是否可以在共享相同数据的多个图表上进行Highcharts明细操作？作为一个例子，我包含了一个使用演示代码（浏览器百分比）的JSFiddle。 http://jsfiddle.net/Pq6gb/

var gridster;

$(function(){
gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [150, 150],
    widget_margins: [5, 5],
    helper: 'clone',
    resize: {
        enabled: true,
        stop: function(e, ui, $widget) {
            for (var i = 0; i < Highcharts.charts.length; i++) {
                Highcharts.charts[i].reflow();
            }
        }
    }
}).data('gridster');
});

$(function () {

Highcharts.data({
    csv: document.getElementById('tsv').innerHTML,
    itemDelimiter: '\t',
    parsed: function (columns) {

        var brands = {},
            brandsData = [],
            versions = {},
            drilldownSeries = [];

        // Parse percentage strings
        columns[1] = $.map(columns[1], function (value) {
            if (value.indexOf('%') === value.length - 1) {
                value = parseFloat(value);
            }
            return value;
        });

        $.each(columns[0], function (i, name) {
            var brand,
                version;

            if (i > 0) {

                // Remove special edition notes
                name = name.split(' -')[0];

                // Split into brand and version
                version = name.match(/([0-9]+[\.0-9x]*)/);
                if (version) {
                    version = version[0];
                }
                brand = name.replace(version, '');

                // Create the main data
                if (!brands[brand]) {
                    brands[brand] = columns[1][i];
                } else {
                    brands[brand] += columns[1][i];
                }

                // Create the version data
                if (version !== null) {
                    if (!versions[brand]) {
                        versions[brand] = [];
                    }
                    versions[brand].push(['v' + version, columns[1][i]]);
                }
            }

        });

        $.each(brands, function (name, y) {
            brandsData.push({ 
                name: name, 
                y: y,
                drilldown: versions[name] ? name : null
            });
        });
        $.each(versions, function (key, value) {
            drilldownSeries.push({
                name: key,
                id: key,
                data: value
            });
        });

        // Create the chart
        $('#container').highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Browser market shares. November, 2013.'
            },
            subtitle: {
                text: 'Click the slices to view versions. Source: netmarketshare.com.'
            },
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}: {point.y:.1f}%'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
            }, 

            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: brandsData
            }],
            drilldown: {
                series: drilldownSeries
            }
        })

    }
});
});

$(function () {

Highcharts.data({
    csv: document.getElementById('tsv').innerHTML,
    itemDelimiter: '\t',
    parsed: function (columns) {

        var brands = {},
            brandsData = [],
            versions = {},
            drilldownSeries = [];

        // Parse percentage strings
        columns[1] = $.map(columns[1], function (value) {
            if (value.indexOf('%') === value.length - 1) {
                value = parseFloat(value);
            }
            return value;
        });

        $.each(columns[0], function (i, name) {
            var brand,
                version;

            if (i > 0) {

                // Remove special edition notes
                name = name.split(' -')[0];

                // Split into brand and version
                version = name.match(/([0-9]+[\.0-9x]*)/);
                if (version) {
                    version = version[0];
                }
                brand = name.replace(version, '');

                // Create the main data
                if (!brands[brand]) {
                    brands[brand] = columns[1][i];
                } else {
                    brands[brand] += columns[1][i];
                }

                // Create the version data
                if (version !== null) {
                    if (!versions[brand]) {
                        versions[brand] = [];
                    }
                    versions[brand].push(['v' + version, columns[1][i]]);
                }
            }

        });

        $.each(brands, function (name, y) {
            brandsData.push({ 
                name: name, 
                y: y,
                drilldown: versions[name] ? name : null
            });
        });
        $.each(versions, function (key, value) {
            drilldownSeries.push({
                name: key,
                id: key,
                data: value
            });
        });

        // Create the chart
        $('#container2').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Browser market shares. November, 2013'
            },
            subtitle: {
                text: 'Click the columns to view versions. Source: netmarketshare.com.'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.1f}%'
                    }
                }
            },

            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
            }, 

            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: brandsData
            }],
            drilldown: {
                series: drilldownSeries
            }
        })

    }
});
});

有一个饼图和条形图显示相同的数据，可以单独进行深入分析。我想点击饼图/条形图中的任何浏览器，并将这两个图表过滤到该浏览器的版本。

我该怎么做呢？感谢。

Answer 1

是的，这是可能的。这是您需要实现的：

在drilldown event上你可以在第二张图表上找到相应的点并简单地调用1point.doDrilldown（）1
在一个图表的drillup even上，拨打第二个chart.drillUp()

注意：您需要知道无限循环（例如，drillUp()在一个图表中将调用钻取事件，这将drillUp()再次首先绘制图表...） - 只需添加一些标记来调用drillUp / doDrilldown每个用户点击一次。

使用相同的数据向下钻取多个Highcharts

1 个答案: