Gauge highcharts不会使用离子2调整大小

Question

我已经做到这一点，但我无法使其响应（调整大小），因为它在相同的宽度和高度上固定甚至窗口调整大小。

我尝试过一些引导模块，但我仍面临着在屏幕尺寸中设置此高图的问题

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;
    }
`]
})

检查屏幕截图