见图像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版本的外观?因为目前很难阅读
答案 0 :(得分: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>
&#13;