angulaire2-highcharts x axe se déplace vers le haut sur drill-down

Question

J'utilise angular2-highcharts v0.5.5, qui installe des graphiques haute v5.0.14. Lorsque je fais un drilldown sur un graphique à colonnes, les colonnes ne s'alignent parfois plus avec l'axe x. J'ai vu this qui semble indiquer une mise à jour corrigée d'une ancienne version. Y at-il une version que je devrais utiliser au lieu de 5.0.14? Merci!

EDIT: Cela semble se produire sur des tailles d'écran/de fenêtre plus petites. Je n'ai pas pu répliquer lorsque la fenêtre du navigateur est pleine taille.

Answer 1

J'ai créé des graphiques éclatés à l'aide de diagrammes angulaires2 en incluant le drilldown de module.

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 Démo