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

Question

查看图像 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 版本的外观？ 因为目前它很难阅读

Answer 1

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

hAxis: {
  maxTextLines: 1,
  ...

请参阅以下工作片段...

 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>