如何在HIghcharts的面积图中实现异步钻取?

时间:2018-08-07 10:12:18

标签: charts highcharts area drilldown

我添加了以下代码,以使用highcharts.js在面积图中实现异步钻取。但是向下钻取功能不起作用。该事件未触发。我还导出了带有图表的highchartsfactory。有人可以建议出什么问题吗?下面是我的代码:

 export class HomePage {


      chartOptions : any;

      constructor(public navCtrl: NavController) {

          this.chartOptions = {
            chart: {
              type: 'area',
//Asynchronous drilldown
              events: {
                drilldown: function (e) {
                  console.log(e);
                    if (!e.seriesOptions) {

                        var chart = this,
                            drilldowns = {
                                'USA': {
                                    name: 'USA',
                                    data: [1, 2, 3, 4, 1, 6, 7, 8],
                                },

                            },
                            series = drilldowns[e.point.name];

                        // Show the loading label
                        chart.showLoading('Simulating Ajax ...');

                        setTimeout(function () {
                            chart.hideLoading();
                            chart.addSeriesAsDrilldown(e.point, series);
                        }, 1000);
                    }

                }
            }
            },
          title: {
              text: 'Operations'
          },
          xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000 + 'k';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true,
                        }
                    }
                }
            }
        },
        series: [{
            name: 'USA',
            // colorByPoint: true,
            trackByArea: true,
            data: [{
                name: 'USA',
                y: null,
                drilldown: true
              }, {
                name: 'USA',
                y: null,
                drilldown: true
              }, {
                name: 'USA',
                y: null,
                drilldown: true
              },
              { name: 'USA',  
                y: null,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: null,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 6,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 11,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 32,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 110,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 235,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 369,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 640,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 1005,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 1436,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 2063,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 3057,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 4618,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 6444,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 9822,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 15468,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 20434,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 24126,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 27387,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 29459,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 27387,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 29459,
                  drilldown: true
                },{ 
                  name: 'USA',
                  y: 32040,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 31233,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 29224,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 27342,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 26662,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 26956,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 27912,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 28999,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 28965,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 27826,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 25579,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 25722,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 24826,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 24605,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 24304,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 23464,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 23708,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 24099,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 24357,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 24237,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 24401,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 24344,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 23586,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 22380,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 21004,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 17287,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 14747,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 13076,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 12555,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 12144,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 11009,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 10950,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 10871,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 10824,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 10577,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 10527,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 10475,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 10421,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 10358,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 10295,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 10104,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 9914,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 9620,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 9326,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 5113,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 5113,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 4954,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 4804,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 4761,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 4717,
                  drilldown: true
                },{
                  name: 'USA',
                  y: 4368,
                  drilldown: true
                }, {
                  name: 'USA',
                  y: 4018,
                  drilldown: true
                }]
        }, {
            name: 'USSR/Russia',
            data: [null, null, null, null, null, null, null, null, null, null,
                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060,
                1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538,
                11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935,
                30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000,
                37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787,
                12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500
            ]
        }],
        drilldown: {
            series: []
        }
    }
      }
    }

1 个答案:

答案 0 :(得分:0)

我根据您的代码制作了示例,并且一切正常。我怀疑您尚未导入boto3模块,这就是为什么您的事件未触发的原因。您需要这样导入它:

organizations = boto3.client('organizations')
response = organizations.list_accounts_for_parent(
    ParentId='FOO'
)

然后,它应该可以工作。

实时示例:https://jsfiddle.net/gv3bkuem/