谷歌折线图haxis标签被删除

Question

我有一个谷歌折线图，有三条线。我在haxis上显示月份作为标签。然而，随着图表继续绘制线条，标签正在消失/删除。如何避免这种情况？

下面是我的图表代码：

google.charts.load('current', {
packages: ['corechart']
});
google.setOnLoadCallback(prepareChartData);
function prepareChartData(){
var chartData = new google.visualization.DataTable();
chartData.addColumn('date', 'Date');
chartData.addColumn('number', 'Total');
chartData.addColumn('number', 'Dogs');
chartData.addColumn('number', 'Cats');
title = 'My Chart';
var options = {
title: title,
curveType: 'function',
legend: {position: 'bottom', alignment: 'start'},
colors: ['#003f5c', '#ffa600', '#665191', '#f95d6a'],
chartArea: {
	bottom: 80
},
annotations: {
alwaysOutside: true,
textStyle: {
color: 'black',
fontSize: 11
},
},
hAxis: {
format: 'MMM yy',
viewWindowMode: "explicit",
},
vAxis: {
minValue: 0,
viewWindowMode: "explicit",
viewWindow: { min: 0 },
title: ''
},
titleTextStyle: {
color:'#3a3a3a',
fontSize:24,
bold:false
// fontName: "Segoe UI"
},
bar: {groupWidth: '95%'},
bars: 'horizontal'
};
var chartDivId = "chart_div";
var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
var rawData =[];
var chart_object = { "Dec 19": {monthLabel: "Dec", chartArray:[{'date': "2019-12-31", 'total': "5", 'cats': "10", 'dogs': "10"}]},"Jan 20": {monthLabel: "Jan", chartArray:[{'date': "2020-1-01", 'total': "5", 'cats': "10", 'dogs': "10"}]},"Feb 20": {monthLabel: "Feb", chartArray:[{'date': "2020-2-29", 'total': "5", 'cats': "10", 'dogs': "10"}]}, "Mar 20": {monthLabel: "Mar", chartArray:[{'date': "2020-3-01", 'total': "5", 'cats': "10", 'dogs': "10"},{'date': "2020-03-12", 'total': "15", 'cats': "30", 'dogs': "30"}]}};
$.each(chart_object, function(i, chartobject) {
	$.each(  chartobject.chartArray, function( chartIndex , chartValue ){
date = chartValue['date'];
total = parseInt(chartValue['total']);
catscount = parseInt(chartValue['cats']);
dogscount = parseInt(chartValue['dogs']);
catspercentage = 0;
catspercentageAnnotation = catscount+",  percent "+catspercentage+"%";
dogsspercentage = 0;
dogsspercentageAnnotation = dogscount+",  percent "+dogsspercentage+"%";
rawData.push([ new Date(date), total, {v: catscount, f: catspercentageAnnotation}, {v: dogscount, f: dogsspercentageAnnotation}]);
});
});
var counter = 0;
drawChart();
function drawChart() {
if(counter < rawData.length){
chartData.addRow(rawData[counter]);
// build x-axis ticks to prevent repeated labels
var dateFormat = new google.visualization.DateFormat({
pattern: 'yyyy-MM-dd'
});
var dateRange = chartData.getColumnRange(0);
var ticks = [];
var dateTick = dateRange.min;
while (dateTick.getTime() <= dateRange.max.getTime()) {
if (ticks.length === 0) {
// format first tick
ticks.push({
v: dateTick,
f: dateFormat.formatValue(dateTick)
});
} else {
ticks.push(dateTick);
}
dateTick = new Date(dateTick.getFullYear(), dateTick.getMonth() + 1, 1);
}
options.hAxis.ticks = ticks;
chart.draw(chartData, options);
counter++;
window.setTimeout(drawChart, 1000);
}
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

我是否缺少任何图表选项？如何在不删除的情况下在月份开始时显示月份？

有人能帮我解决这个问题吗？提前谢谢。

Answer 1

您有几个选项：

Alternations

{
options: {
hAxis: {
maxAlternation: 4
}
}
}

文件描述：

水平轴文本的最大级别数。如果轴文本标签过于拥挤，服务器可能会向上或向下移动相邻标签，以便将标签放得更近。此值指定要使用的级别的最大数目；如果标签可以不重叠地放置，则服务器可以使用更少的级别。对于日期和时间，默认值为1。

这将允许标签在4个不同级别之间交替，从而允许所有级别共存。你可以用另一个你觉得足够的数字来代替4。此外，您可能需要在图表区域打勾，为额外的标签行腾出空间。

倾斜文本

{
options: {
hAxis: {
slantedTextAngle: 90
}
}
}

文件描述：

水平轴文本的角度(如果绘制倾斜(。如果hAxis.slatedText为false，或者处于自动模式，并且图表决定水平绘制文本，则忽略此项。如果角度为正，则旋转为逆时针方向；如果角度为负，则为顺时针方向。

这将使标签垂直书写，因此每个标签在轴上只占用很小的空间。

只需增加底部的图表区域

{
options: {
chartArea: {
bottom: 80
}
}
}

文件描述：

一个具有成员的对象，用于配置图表区域的位置和大小(绘制图表本身的位置，不包括轴和图例(。支持两种格式：数字或后跟%的数字。一个简单的数字是一个以像素为单位的值；后面跟%的数字是百分比。示例：chartArea：｛左：20，上：0，宽："50%"，高："75%"｝

通过增加图表底部的可用空间，您可以通过"刚好"倾斜标签来允许倾斜文本自动工作。