angular2-highcharts x轴上钻取

Question

向上移动我使用angular2-highcharts v0.5.5，它安装highcharts v5.0.14。当我在柱形图上进行深入分析时，列有时不再与x轴对齐。我看到this这似乎表明更新修复了旧版本。有没有我应该使用的版本而不是5.0.14？谢谢！

编辑：这似乎是在较小的屏幕/窗口大小的情况发生。浏览器窗口为全尺寸时，我无法复制。

Answer 1

我已经包括模块钻取使用angular2-highcharts创建钻取图表。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { NgModule, Component } from '@angular/core'; 
import { BrowserModule }   from '@angular/platform-browser'; 
import { ChartModule }   from 'angular2-highcharts'; 

@Component({ 
    selector: 'my-app', 
    styles: [` 
     chart { 
     display: block; 
     } 
    `], 
    template: `<chart [options]="options"></chart>` 
}) 
class AppComponent { 
    constructor() { 
     this.options = { 
      chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Browser market shares. January, 2015 to May, 2015' 
    }, 
    subtitle: { 
     text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.' 
    }, 
    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: [{ 
      name: 'Microsoft Internet Explorer', 
      y: 56.33, 
      drilldown: 'Microsoft Internet Explorer' 
     }, { 
      name: 'Chrome', 
      y: 24.03, 
      drilldown: null 
     }, { 
      name: 'Firefox', 
      y: 10.38, 
      drilldown: null 
     }, { 
      name: 'Safari', 
      y: 4.77, 
      drilldown: null 
     }, { 
      name: 'Opera', 
      y: 0.91, 
      drilldown: null 
     }, { 
      name: 'Proprietary or Undetectable', 
      y: 0.2, 
      drilldown: null 
     }] 
    }], 
    drilldown: { 
     series: [{ 
      name: 'Microsoft Internet Explorer', 
      id: 'Microsoft Internet Explorer', 
      data: [ 
       [ 
        'v11.0', 
        24.13 
       ], 
       [ 
        'v8.0', 
        17.2 
       ], 
       [ 
        'v9.0', 
        8.11 
       ], 
       [ 
        'v10.0', 
        5.33 
       ], 
       [ 
        'v6.0', 
        1.06 
       ], 
       [ 
        'v7.0', 
        0.5 
       ] 
      ] 
     }] 
    } 
     }; 
    } 
    options: Object; 
} 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    ChartModule.forRoot(
     require('highcharts'), 
     require('highcharts/modules/exporting'), 
     require('highcharts/modules/drilldown'), 
    ) 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
class AppModule { } 


platformBrowserDynamic().bootstrapModule(AppModule); 

Plunker演示