如何在 Highcharts 仪表中完成响应式文本？

Question

我用 Highcharts 构建了一个速度表外观图表，结合了仪表图和饼图类型。在图表内，我有不同大小的文本，针对 250x250 像素大小进行了优化。

我想要完成的是在调整图表大小时保持 font-size/graph-container 比率。无论容器大小基本相同

我现在在包含图表的 div 上有一个基于像素的字体大小（通常是我项目的基本字体大小），在图表本身 (.highcharts-data-labels) 上有 1em。里面是我的自定义文本，标有 css 类 (.gauge-value, .gauge-text, .gauge-unit)，我试图给出合理的 em 值。

完成此任务的最佳方法是什么？

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

只要您的图形与屏幕尺寸成比例，您就可以使用 vw

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

Answer 2

您可以为仪表系列更新 dataLabel 并使用内联 CSS 根据当前图表宽度设置每个文本行的字体大小。

演示：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;
                }
              }
            }); 
          }
        }
      }
    },

我使用了基于宽度的值，这些值对我来说看起来不错，但可以使用您自己的计算。

如何在 Highcharts 仪表中完成响应式文本？

How to accomplish responsive texts in Highcharts gauges?

javascript

css

highcharts

responsive