我用Highcharts构建了一个速度表外观图表,结合了仪表图和饼图类型.在图表内,我有不同大小的文本,已针对250×250 px大小进行了优化.

我要完成的工作是在调​​整图表大小时保持字体大小/图形容器的比率.无论容器的大小如何,基本上都具有相同的外观.

现在,我在包含图表的div上具有基于像素的字体大小(通常是我项目的基本字体大小),在图表本身上具有1em(.highcharts-data-labels).里面是我的自定义文本,标有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：随着容器大小的增加,字体大小不会随图形缩放

解决方法:

您可以更新量规系列的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;
                }
              }
            }); 
          }
        }
      }
    },

我使用了基于宽度的值,这些值对我来说很好,但是可以使用您自己的计算.