我在简单的Google图表上遇到了hAxis格式的问题。在我的选项var:
'hAxis': {
baseline: minDate,
format: 'dd/MM'
},
我填写了values
数组:
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'X');
dataTable.addColumn('number', 'Value'));
var values = [];
values.push([new Date(date), 10]);
我得到了google chart hAxis。
我想在我的图表上显示每个星期一,如“星期一06/02”。其他日子就像现在一样显示:
17/01 ---- 21/01 ----- 25/01 ----- 29/01 --- 02/02 ---- Monday 06/02
有可能得到这个吗?
答案 0 :(得分:1)
使用hAxis.ticks
提供自定义轴标签
以下工作代码段每7天添加一个标签,从星期一开始 ...
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var formatDate = new google.visualization.DateFormat({
pattern: 'dd/MM'
});
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'X');
dataTable.addColumn('number', 'Value');
var oneDay = (1000 * 60 * 60 * 24);
var startDate = new Date(2017, 0, 16);
var endDate = new Date();
var ticksAxisH = [];
for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
// set x value
var rowDate = new Date(i);
var xValue = {
v: rowDate,
f: formatDate.formatValue(rowDate)
};
// set y value (y = 2x + 8)
var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);
// add data row
dataTable.addRow([
xValue,
yValue
]);
// add tick every 7 days
if (((i - startDate.getTime()) % 7) === 0) {
ticksAxisH.push(xValue);
}
}
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(dataTable, {
hAxis: {
baseline: startDate,
format: 'dd/MM',
ticks: ticksAxisH
},
legend: 'none'
});
}
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;