Highchartsゲージで反応性の高いテキストを達成するにはどうすればよいですか？

Question

ゲージと円グラフの種類を組み合わせたHighchartsでスピードメーターの見栄えのあるグラフを作成しました。チャートの中には、さまざまなサイズのテキストがあり、250x250ピクセルのサイズに最適化されています。

私が達成したいのは、グラフのサイズを変更するたびにフォントサイズ/グラフコンテナの比率を維持することです。基本的には、コンテナのサイズに関係なく同じ外観を持ちます。

私は現在、チャートを含むdiv（通常は私のプロジェクトの基本フォントサイズ）にグラフベースのフォントサイズ（.highcharts-data-labels）を1em持っています。その中には、私の妥当なem値を与えることを試みたCSSクラス（.gauge-value、.gauge-text、.gauge-unit）でマークされたカスタムテキストがあります。

これを達成する最良の方法は何ですか？

JSFiddle with demo

JS

$(function() { 
    var settings = { 
    gaugeMinValue: 0, 
    gaugeMaxValue: 8000, 
    gaugeStartValue: 3000, 
    gaugeStartAngle: -160, 
    gaugeEndAngle: 160, 
    gaugeUpdateInterval: 500 // ms 
    }; 

    $('#gauge1').highcharts({ 
    tooltip: { 
     enabled: false 
    }, 
    chart: { 
     type: 'gauge', 
     backgroundColor: 'rgba(255, 255, 255, 0)', 
     plotBackgroundColor: null, 
     plotBackgroundImage: null, 
     plotBorderWidth: 0, 
     plotShadow: false, 
     spacing: [5, 30, 5, 30], 
     style: { 
     fontSize: '1em' 
     } 
    }, 

    title: false, 

    pane: { 
     startAngle: settings.gaugeStartAngle, 
     endAngle: settings.gaugeEndAngle 
    }, 

    plotOptions: { 
     gauge: { 
     dial: { 
      radius: 0 
     }, 
     pivot: { 
      radius: 0 
     }, 
     dataLabels: { 
      borderWidth: 0, 
      padding: 0, 
      verticalAlign: 'middle', 
      style: false, 
      formatter: function() { 
      var output = '<div class="gauge-data">'; 
      output += '<span class="gauge-value">' + this.y + '</span>'; 
      output += '<span class="gauge-text">Engine LOAD</span>'; 
      output += '<span class="gauge-unit">KW</span>'; 
      output += '</div>'; 

      return output; 
      }, 
      useHTML: true 
     } 
     }, 
     pie: { 
     dataLabels: { 
      enabled: true, 
      distance: -10, 
      style: false 
     }, 
     startAngle: settings.gaugeStartAngle, 
     endAngle: settings.gaugeEndAngle, 
     center: ['50%', '50%'], 
     states: { 
      hover: { 
      enabled: false 
      } 
     } 
     } 
    }, 

    // the value axis 
    yAxis: { 
     offset: 0, 
     min: settings.gaugeMinValue, 
     max: settings.gaugeMaxValue, 

     title: false, 

     minorTickWidth: 0, 

     tickPixelInterval: 30, 
     tickWidth: 2, 
     tickPosition: 'outside', 
     tickLength: 14, 
     tickColor: '#ccc', 
     lineColor: '#ccc', 
     labels: { 
     distance: 28, 
     rotation: "0", 
     step: 2, 
     }, 

     plotBands: [{ 
     thickness: 10, 
     outerRadius: "112%", 
     from: 0, 
     to: 2500, 
     color: '#FB8585' // red 
     }, { 
     thickness: 10, 
     outerRadius: "112%", 
     from: 2500, 
     to: 5500, 
     color: '#F9E7AE' // yellow, 
     }, { 
     thickness: 10, 
     outerRadius: "112%", 
     from: 5500, 
     to: 8000, 
     color: '#83DAD9' // green 
     }] 
    }, 

    series: [{ 
     type: 'gauge', 
     data: [settings.gaugeStartValue], 
    }, { 
     type: 'pie', 
     innerSize: '87%', 
     data: [{ 
     y: settings.gaugeStartValue, 
     name: "", 
     color: "#0bbeba" 
     }, { 
     y: settings.gaugeMaxValue - settings.gaugeStartValue, 
     name: '', 
     color: "#666666" 
     }] 
    }], 

    navigation: { 
     buttonOptions: { 
     enabled: false 
     } 
    }, 

    credits: false 
    }); 
}); 

CSS

.container { 
    width: 50%; 
    margin: 0 auto; 
    font-size: 16px; 
} 

.gauge { 
    width: 100%; 
    max-width: 350px; 
    max-height: 350px; 
    min-width: 250px; 
    min-height: 250px; 
    padding: 0; 
    border: 1px solid #666; 
    background: #F8F8F8; 
} 

.gauge-data { 
    text-align: center; 
    color: #666; 
    display: block; 
} 

.gauge-data > * { 
    display: block; 
} 

.gauge-value { 
    font-size: 3em; 
} 

.gauge-text { 
    font-size: 1.0em; 
    font-weigt: normal; 
    margin-top: 10px; 
} 

.gauge-unit { 
    margin-top: 5px; 
    font-size: .9em; 
} 

画像1：これは、最適な図である

画像2：フォントサイズは、コンテナのサイズが大きく

としてグラフと一緒にスケーリングされていない

Answer 1

ゲージシリーズの場合はdataLabelを更新し、インラインCSSを使用してフォントサイズをea単位で設定できます現在のグラフの幅に基づいたテキスト行です。

デモ：コードのhttps://jsfiddle.net/sxkz9q32/

関連部分：

var options = { 
    tooltip: { 
     enabled: false 
    }, 
    chart: { 
     type: 'gauge', 
     backgroundColor: 'rgba(255, 255, 255, 0)', 
     plotBackgroundColor: null, 
     plotBackgroundImage: null, 
     plotBorderWidth: 0, 
     plotShadow: false, 
     spacing: [5, 30, 5, 30], 
     style: { 
     fontSize: '1em' 
     }, 
     events: { 
     redraw: function() { 
      var chart = this; 
      if (chart.lastWidth !== chart.plotWidth) { 
      chart.lastWidth = chart.plotWidth; 
      chart.series[0].update({ //apply changes to center the text 
       dataLabels: { 
       formatter: function() { 
        var output = '<div class="gauge-data">'; 
        output += '<span class="gauge-value" style="font-size: ' + chart.plotWidth/66 + 'em;">' + this.y + '</span>'; 
        output += '<span class="gauge-text" style="font-size: ' + chart.plotWidth/190 + 'em;">Engine LOAD</span>'; 
        output += '<span class="gauge-unit" style="font-size: ' + chart.plotWidth/211 + 'em;">KW</span>'; 
        output += '</div>'; 

        return output; 
       } 
       } 
      }); 
      } 
     } 
     } 
    }, 

私は私のために細かい探していた幅に基づいて値を使用しているが、独自の計算を使用することができます。

Answer 2

あなたは画面サイズ

であなたのグラフィックスケールとしてVW限り使用することができます

.gauge-value { 
    font-size: 8vw; 
}