Question

是否可以为类别点击提供不同的数据，并为系列点击提供不同的数据。例如： http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/drillupbutton/

$(function () {

    Highcharts.setOptions({
        lang: {
            drillUpText: '<< Terug naar {series.name}'
        }
    });

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Drilldown label styling'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true
                }
            }
        },

        series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Dieren',
                y: 5,
                drilldown: 'animals'
            }, {
                name: 'Fruit',
                y: 2,
                drilldown: 'fruits'
            }, {
                name: 'Auto\'s',
                y: 4
            }]
        }],
        drilldown: {

            series: [{
                id: 'animals',
                data: [
                    ['Katten', 4],
                    ['Honden', 2],
                    ['Koeien', 1],
                    ['Schapen', 2],
                    ['Varkens', 1]
                ],
                name: 'vk',
                drilldown : 'vinay'
            }, {
                id: 'fruits',
                data: [
                    ['Appels', 4],
                    ['Sinaasappels', 2]
                ]
            },
            {
                    id: 'vinay',
                data: [
                    ['vinay', 4],
                    ['sharma', 2]
                ]
            }

            ]
        }
    });
});

在那里，我试图在点击Dieren列和Dieren链接上进行深入研究。

Answer 1

您可以使用异步下钻来创建图表。您可以在Highcharts网站上找到它的演示。 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/async/

使用if语句

时，可以在单击类别或点时加载不同系列作为向下钻取

 if (e.category === undef) {
                  var chart = this,
                    drilldowns = {
                      'Animals': {
                        name: 'Animals',
                        data: [
                          ['Cows', 2],
                          ['Sheep', 3]
                        ]
                      },
                      'Fruits': {
                        name: 'Fruits',
                        data: [
                          ['Apples', 5],
                          ['Oranges', 7],
                          ['Bananas', 2]
                        ]
                      },
                      'Cars': {
                        name: 'Cars',
                        data: [
                          ['Toyota', 1],
                          ['Volkswagen', 2],
                          ['Opel', 5]
                        ]
                      }
                    },
                    series = drilldowns[e.point.name];
                } else {
                  var chart = this,
                    drilldowns = {
                      'Animals': {
                        name: 'Animals',
                        data: [
                          ['Elephants', 5],
                          ['Dogs', 1]
                        ]
                      },
                      'Fruits': {
                        name: 'Fruits',
                        data: [
                          ['Lemons', 1],
                          ['Berries', 4],
                          ['Grapes', 7]
                        ]
                      },
                      'Cars': {
                        name: 'Cars',
                        data: [
                          ['Alfa', 4],
                          ['BMW', 7],
                          ['Citroen', 1]
                        ]
                      }
                    },
                    series = drilldowns[e.point.name];
                }

当您点击其中一个类别时，e.category是您的类别的索引。当您点击点时，e.category将是未定义的。这是我的代码背后的主要想法。

例如： http://jsfiddle.net/u3sa772j/3/

无法创建Highchart，我可以显示不同的 - 点击类别和系列的不同数据

1 个答案: