Highcharts响应式实体标准最佳实践？

Question

我如何才能最好地获得坚固的仪表，其中：

• 它对标题和主要值字体/尺寸的响应
• 标题可以包含多行，
• 也可以不在下面的屏幕截图中看到填充

屏幕截图（桌面与移动设备）：

备注：

• 这是基于官方高级图示例here。

这是我的选项代码（来自gaugeComponent.ts）：

var options: any = {
    chart: {
      type: 'solidgauge'
    },
    title: null,
    pane: {
      center: ['50%', '55%'],
      // size: '140%',
      startAngle: -140,
      endAngle: 140,
      background: {
          backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
      }
    },

    tooltip: {
      enabled: false
    },

    // the value axis
    yAxis: {
      min: 0,
      max: 100,     
      stops: stops,
      lineWidth: 0,
      minorTickInterval: null,
      tickAmount: 2,
      className: 'highcharts-gauge-heading',
      title: {
        text: this.gauge.title,
        y: -80,
      },
      labels: {
          x: -5,
          y: 30
      }
    },      

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

    credits: {
      enabled: false
    },

    series: [{
      name: this.gauge.title,
      data: [this.gauge.value],
      dataLabels: {
        format: '<div style="text-align:left"><span style="font-size:30px;color:' +
            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span>'
      }
    }],

    responsive: {
      rules: [{
        condition: {
          maxWidth: 300
        },
        chartOptions: {
          yAxis: {           
            className: 'highcharts-gauge-heading-small' 
          }
        }
      }]
    }        
}