ゲージハイチャートはイオンでサイズが変更されていません2

Question

これまでに作成しましたが、偶数ウィンドウのサイズ変更時に同じ幅と高さに固定されているため、応答性（サイズ変更）できません。

私はいくつかのブートストラップモジュールを試してみましたが、それでも私は問題に直面していますが、画面のサイズでこのhighchart

challengedash.tsアウト

上記を入れ

import { Component } from '@angular/core'; 
    import { NavController, NavParams } from 'ionic-angular'; 
    import * as Highcharts from 'highcharts'; 
    import * as HighchartsMore from 'highcharts/highcharts-more'; 
    HighchartsMore(Highcharts); 

    @Component({ 
     selector: 'page-challengedash', 
     templateUrl: 'challengedash.html' 
    }) 

export class ChallengedashPage { 

    tabBarElement: any; 
    checkindata: Array<{title: string, subtitle: string, details: string, icon: string, showDetails: boolean}> = []; 

    constructor(public navCtrl: NavController) { 


    /*high chart 2 options*/ 
    this.chart2 = { 
     chart:{ 
     type:'gauge', 
     }, 
     title: { 
     text: 'PV Generation' 
     }, 
     tooltip: { 
     enabled: false 
     }, 

     pane: { 
     center: ['50%', '55%'], 
     size: '100%', 
     startAngle: -150, 
     endAngle: 150, 
     background: { 
      backgroundColor: 'transparent', 
      innerRadius: '100%', 
      outerRadius: '100%', 
      shape: 'arc', 
      borderWidth: 0, 
     }, 


     }, 
     plotOptions: { 
     gauge: { 
      pivot: { 
      radius: 60, 
      borderWidth: 0, 
      borderColor: null, 
      backgroundColor: { 
       linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, 
       stops: [ 
       [0, 'white'], 
       [1, 'white'] 
       ] 
      } 
      } 
     } 
     }, 
     yAxis: [{ 

     min: 0, 
     max: 250, 
     minorTickInterval: 2, 
     minorTickLength: 50, 
     minorTickWidth: 1, 
     offset:-10, 
     minorTickPosition: 'inside', 
     minorTickColor: '#666', 

     tickPixelInterval:100, 
     tickWidth: 2, 
     tickPosition: 'inside', 
     tickLength:-10, 
     tickColor: '#fff', 
     lineWidth :0, 

     labels: { 
      step: 1, 
      distance: 20, 
      rotation: 'auto', 
     }, 

     plotBands: [{ 
      from: 0, 
      to: 120, 
      color: '#55BF3B' // green 
     }, { 
      from: 120, 
      to: 160, 
      color: '#DDDF0D' // yellow 
     }, { 
      from: 160, 
      to: 200, 
      color: '#DF5353' // red 
     }], 

     plotOptions: { 
      solidgauge: { 
      dataLabels: { 
       y: 5, 
       borderWidth: 0, 
       useHTML: true 
      } 
      } 
     }, 

     }], 

     series: [{ 
     name: 'Speed', 
     data: [10], 
     tooltip: { 
      valueSuffix: ' km/h' 
     }, 

     }] 
    }; 
    /**/ 
    } 

    chart2: Object; 


} 

を設定するのではなく、私は画面サイズに合わせてグラフを取得したい

私のHTMLコード

<chart class="my-gauge-chart" [options]="chart2" > </chart> 

Answer 1

うん、私は画面を確認し、この

@Component({ 
    selector: 'page-challengedash', 
    templateUrl: 'challengedash.html', 
    styles: [` 
    chart { 
     display: block; 
     width: auto; 
    } 
`] 
}) 

を使用して、それを解決してきたが、あなたがNPMによって管理される代わりに、元Highcharts JSライブラリのイオンでこのライブラリを使用することをお勧めします