[英]Google Charts X Axis Showing Up Down Values
I have plotted a Google Line chart which is showing X axis values in alternating up down format when having more values as shown below. 我绘制了一个Google折线图,当具有更多值时,它以向下交替的格式显示X轴值,如下所示。
But I want to show it in a single line in a much better representation than the current one, a slope representation would also be fine like below. 但是我想以单行显示它比当前显示的更好,斜率表示也可以像下面这样。
My code for plotting the chart is as below: 我的图表绘制代码如下:
var options = {
width: '100%',
height: '100%',
legend: ({ position: 'top', maxLines: 1, alignment: 'end'}),
chartArea: { left: "8%", right: "8%", top: "10%", width: "100%", height: "75%" },
backgroundColor: 'transparent',
tooltip: { textStyle: { color: 'black' }, isHtml: true },
curveType: 'none',
};
var chart = new google.visualization.LineChart($('Div')[0]);
chart.draw(view, options);
Is there any specific option that I have to apply to make the axis display in the required format? 我必须应用任何特定选项以使轴以所需格式显示吗?
see the configuration options for hAxis
查看hAxis
的配置选项
for a slope representation , use --> slantedText: true
对于坡度表示 ,请使用-> slantedText: true
hAxis.slantedText
- If true, draw the horizontal axis text at an angle, to help fit more text along the axis.hAxis.slantedText
如果为true,hAxis.slantedText
一定角度绘制水平轴文本,以帮助沿轴放置更多文本。
to enforce one level of labels, use --> maxAlternation: 1
要执行一级标签,请使用-> maxAlternation: 1
hAxis.maxAlternation
- Maximum number of levels of horizontal axis text.hAxis.maxAlternation
水平轴文本的最大级别数。 If axis text labels become too crowded, the server might shift neighboring labels up or down in order to fit labels closer together. 如果轴文本标签变得太拥挤,则服务器可能会向上或向下移动相邻标签,以使标签更靠近在一起。
to keep the labels from wrapping on two lines, use --> maxTextLines: 1
maxTextLines: 1
标签不缠绕在两行上,请使用-> maxTextLines: 1
maxTextLines
- Maximum number of lines allowed for the text labels.maxTextLines
文本标签允许的最大行数。 Labels can span multiple lines if they are too long, and the number of lines is, by default, limited by the height of the available space. 如果标签太长,则标签可以跨越多行,默认情况下,行数受可用空间的高度限制。
note: you may need to adjust chartArea.bottom
to allow more room along the x-axis... 注意:您可能需要调整chartArea.bottom
以在x轴上chartArea.bottom
出更多空间...
see following working snippet... 请参阅以下工作片段...
google.charts.load('current', { packages:['corechart'] }).then(function () { var dateFormat = 'dd MMM'; var formatDate = new google.visualization.DateFormat({ pattern: dateFormat }); var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'X'); dataTable.addColumn('number', 'Value'); var oneDay = (1000 * 60 * 60 * 24); var startDate = new Date(2018, 9, 1); var endDate = new Date(2018, 9, 31); var ticksAxisH = []; for (var i = startDate.getTime(); i <= endDate.getTime(); i = i + oneDay) { var rowDate = new Date(i); var xValue = formatDate.formatValue(rowDate); var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8); dataTable.addRow([ xValue, yValue ]); } var container = document.getElementById('chart_div'); var chart = new google.visualization.LineChart(container); var options = { width: '100%', height: '100%', legend: { position: 'top', maxLines: 1, alignment: 'end' }, chartArea: { bottom: 40, left: '8%', right: '8%', top: '10%', width: '100%', height: '75%' }, backgroundColor: 'transparent', tooltip: { textStyle: { color: 'black' }, isHtml: true }, curveType: 'none', hAxis: { slantedText: true } }; function drawChart() { chart.draw(dataTable, options); } drawChart(); window.addEventListener('resize', drawChart, false); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.