如何消除 hAxis 上的冗余标签?
我的数据集有 8 个代表过去 8 个季度的月初日期。我收到了很多无法删除的额外 hAxis 标签。我尝试过使用网格线设置,但未能清理图表。我的目标是每个栏一个标签。
有人可以指出我正确的方向吗?
一如既往地感谢您的帮助!
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addColumn('number', 'Goal');
data.addRows([
[new Date(2023, 0, 1), 5, 6],
[new Date(2023, 3, 1), 7, 6],
[new Date(2023, 6, 1), 3, 6],
[new Date(2023, 9, 1), 1, 6],
[new Date(2024, 0, 1), 5, 6],
[new Date(2024, 3, 1), 7, 6],
[new Date(2024, 6, 1), 3, 6],
[new Date(2024, 9, 1), 1, 6],
]);
var options = {
title: 'Rate the Day on a Scale of 1 to 10',
height: 400,
hAxis: {
slantedText: true,
slantedTextAngle: 90,
type: "discrete",
format: 'yyyy-QQ',
//gridlines: { count: -1 },
//minorGridlines: {count: 0},
},
vAxis: {
minValue: 0
},
seriesType: 'bars',
series: {
1: {
type: 'line'
}
},
trendlines: {
0: {
type: "linear"
}
},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
问题是由于 x 轴是连续轴(日期)
图表沿 x 轴显示不同的日期,
但是,日期的格式会导致显示重复的标签。
有几种方法可以解决...
1) 为 x 轴提供自定义刻度,以每条显示一个标签
2)将日期列转换为字符串,从而产生离散轴
以下是两者的示例...
1) 为 x 轴提供自定义刻度,以每条显示一个标签
ticks
配置选项采用一组值,因此,构建第一个数据表列中的值的数组
// build x-axis ticks
var xAxisTicks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
xAxisTicks.push(data.getValue(i, 0));
}
然后在
hAxis
选项中使用这些勾号
hAxis: {
slantedText: true,
slantedTextAngle: 90,
type: 'discrete',
format: 'yyyy-QQ',
ticks: xAxisTicks // <-- include custom ticks
},
请参阅以下工作片段...
google.charts.load('current', {
'packages': ['corechart']
}).then(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addColumn('number', 'Goal');
data.addRows([
[new Date(2023, 0, 1), 5, 6],
[new Date(2023, 3, 1), 7, 6],
[new Date(2023, 6, 1), 3, 6],
[new Date(2023, 9, 1), 1, 6],
[new Date(2024, 0, 1), 5, 6],
[new Date(2024, 3, 1), 7, 6],
[new Date(2024, 6, 1), 3, 6],
[new Date(2024, 9, 1), 1, 6],
]);
// build x-axis ticks
var xAxisTicks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
xAxisTicks.push(data.getValue(i, 0));
}
var options = {
title: 'Rate the Day on a Scale of 1 to 10',
height: 400,
hAxis: {
slantedText: true,
slantedTextAngle: 90,
format: 'yyyy-QQ',
ticks: xAxisTicks // <-- include custom ticks
},
vAxis: {
minValue: 0
},
seriesType: 'bars',
series: {
1: {
type: 'line'
}
},
trendlines: {
0: {
type: 'linear'
}
},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
2)将日期列转换为字符串,从而产生离散轴
首先将数据表第一列的数据类型改为string
data.addColumn('string', 'Time of Day'); // <-- change to string
接下来,我们需要一个日期格式化程序来将日期转换为所需的格式
// create date formatter to convert x-axis values to string
var formatDate = new google.visualization.DateFormat({
pattern: 'yyyy-QQ'
});
然后,我们将数据保存在一个单独的变量中,并将日期转换为字符串,然后再将行添加到数据表
// hold raw data in a variable
var dataRaw = [
[new Date(2023, 0, 1), 5, 6],
[new Date(2023, 3, 1), 7, 6],
[new Date(2023, 6, 1), 3, 6],
[new Date(2023, 9, 1), 1, 6],
[new Date(2024, 0, 1), 5, 6],
[new Date(2024, 3, 1), 7, 6],
[new Date(2024, 6, 1), 3, 6],
[new Date(2024, 9, 1), 1, 6],
];
// convert date to formatted string
dataRaw = dataRaw.map(function (row) {
row[0] = formatDate.formatValue(row[0]);
return row;
});
// add converted data to data table
data.addRows(dataRaw);
请参阅以下工作片段...
google.charts.load('current', {
'packages': ['corechart']
}).then(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time of Day'); // <-- change to string
data.addColumn('number', 'Rating');
data.addColumn('number', 'Goal');
// create date formatter to convert x-axis values to string
var formatDate = new google.visualization.DateFormat({
pattern: 'yyyy-QQ'
});
// hold raw data in a variable
var dataRaw = [
[new Date(2023, 0, 1), 5, 6],
[new Date(2023, 3, 1), 7, 6],
[new Date(2023, 6, 1), 3, 6],
[new Date(2023, 9, 1), 1, 6],
[new Date(2024, 0, 1), 5, 6],
[new Date(2024, 3, 1), 7, 6],
[new Date(2024, 6, 1), 3, 6],
[new Date(2024, 9, 1), 1, 6],
];
// convert date to formatted string
dataRaw = dataRaw.map(function (row) {
row[0] = formatDate.formatValue(row[0]);
return row;
});
// add converted data to data table
data.addRows(dataRaw);
var options = {
title: 'Rate the Day on a Scale of 1 to 10',
height: 400,
hAxis: {
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
minValue: 0
},
seriesType: 'bars',
series: {
1: {
type: 'line'
}
},
trendlines: {
0: {
type: 'linear'
}
},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>