Firefox 中的 Google 折线图 hAxis 格式有问题答案

【问题标题】：Google Line Chart hAxis formatting problematic in FirefoxFirefox 中的 Google 折线图 hAxis 格式有问题
【发布时间】：2017-10-31 11:17:42
【问题描述】：

查看图像 hAxis 标签：

hAxis 标签分为两行，例如，它们的值是10.09，没有空格。但在较窄的屏幕上，它会换成两行，这是在 Firefox 中。

在 Chrome 中效果更好。这是它在 Chrome 中的外观：

var options = {
    height: 314,
    areaOpacity: 0.18,
    enableInteractivity: false,
    isStacked: true,
    hAxis: {
        textStyle: {
            color: '#919fa9',
            fontName: 'Proxima Nova',
            fontSize: 11,
            italic: false
        }
    },
    vAxis: {
        slantedText: true,
        minValue: 0,
        textPosition: 'out',
        title: 'Revenue',
        titleTextStyle: {
            fontSize: 14
        },
        textStyle: {
            color: '#919fa9',
            fontName: 'Proxima Nova',
            fontSize: 11,
            italic: false
        },
        baselineColor: '#eff1f2',
        gridlines: {
            color: '#eff1f2',
            count: 15
        }
    },
    lineWidth: 2,
    colors: ['#00a8ff'],
    curveType: 'function',
    pointSize: 5,
    pointShapeType: 'circle',
    pointFillColor: '#008ffb',
    backgroundColor: {
        fill: '#ffffff',
        strokeWidth: 0,
    },
    chartArea: {
        left: 60,
        top: 10,
        width: '100%',
        height: 260
    },
    fontSize: 11,
    fontName: 'Proxima Nova',
    tooltip: {
        trigger: 'selection',
        isHtml: true
    },
    seriesType: 'bars',
    series: {
        0: { color: '#2db56e' },
        1: { color: '#cc0000' },
        2: {
            type: 'line',
            color: '#00a8ff',
            pointSize: 4,
            pointShapeType: 'circle'
        }
    }
};

如何改进 Firefox 版本的外观？因为目前它很难阅读

【问题讨论】：

嗯，现在添加了

标签： javascript css firefox charts google-visualization

【解决方案1】：

尝试将以下选项设置为1 --> hAxis.maxTextLines

hAxis: {
  maxTextLines: 1,
  ...

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['date', 'revenue'],
    ['10.01', 20],
    ['10.02', 30],
    ['10.03', 40],
    ['10.04', 50],
    ['10.05', 60],
    ['10.06', 70],
    ['10.07', 80],
    ['10.08', 90],
    ['10.09', 100],
    ['10.10', 120],
    ['10.11', 130],
    ['10.12', 150],
    ['10.13', 200],
    ['10.14', 220],
    ['10.15', 230],
    ['10.16', 240],
    ['10.17', 250],
    ['10.18', 260],
    ['10.19', 270],
    ['10.20', 280],
    ['10.21', 280],
    ['10.22', 290],
    ['10.23', 320],
    ['10.24', 340],
    ['10.25', 350],
    ['10.26', 360],
    ['10.27', 370],
    ['10.28', 380],
    ['10.29', 390],
    ['10.30', 400],
    ['10.31', 420]
  ]);

  var options = {
    height: 314,
    areaOpacity: 0.18,
    enableInteractivity: false,
    isStacked: true,
    hAxis: {
      maxTextLines: 1,
      textStyle: {
        color: '#919fa9',
        fontName: 'Proxima Nova',
        fontSize: 11,
        italic: false
      }
    },
    vAxis: {
      slantedText: true,
      minValue: 0,
      textPosition: 'out',
      title: 'Revenue',
      titleTextStyle: {
        fontSize: 14
      },
      textStyle: {
        color: '#919fa9',
        fontName: 'Proxima Nova',
        fontSize: 11,
        italic: false
      },
      baselineColor: '#eff1f2',
      gridlines: {
        color: '#eff1f2',
        count: 15
      }
    },
    lineWidth: 2,
    colors: ['#00a8ff'],
    curveType: 'function',
    pointSize: 5,
    pointShapeType: 'circle',
    pointFillColor: '#008ffb',
    backgroundColor: {
      fill: '#ffffff',
      strokeWidth: 0,
    },
    chartArea: {
      left: 60,
      top: 10,
      width: '100%',
      height: 260
    },
    fontSize: 11,
    fontName: 'Proxima Nova',
    tooltip: {
      trigger: 'selection',
      isHtml: true
    },
    seriesType: 'bars',
    series: {
      0: { color: '#2db56e' },
      1: { color: '#cc0000' },
      2: {
        type: 'line',
        color: '#00a8ff',
        pointSize: 4,
        pointShapeType: 'circle'
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：