我正面临谷歌图表中的错误(或功能),当只有一个或两个条目时,图表会以奇怪的方式显示hAxis中的日期标签。我在网上发现了一个存在相同错误的演示:
https://blog.smalldo.gs/2013/04/google-chart-tools-walkthrough-part-3/#create-dashboard
要重现,请缩小图表范围滑块,除非图表上只有一个条目。它不显示日期,而只显示10年的步数。有没有办法修改它或做任何解决方法,以便正确显示日期?
答案 0 :(得分:1)
默认情况下,图表将根据图表的数据和大小创建轴标签
当只有一行数据时,它不确定轴范围应该是什么,
并添加年份标签,以填补图表底部的空间
要阻止此行为,请为min
选项设置max
和hAxis.viewWindow
值
在这种情况下,每次范围过滤器更改时,视图窗口都应该更改
这样,断开折线图与仪表板的连接
当表格图表的'ready'
事件触发时,
使用表格图表中的过滤数据表来绘制折线图
您可以使用数据表方法getColumnRange
来确定viewWindow
请参阅以下工作代码段...
google.charts.load('current', {
packages: ['controls']
}).then(function () {
var myData = new google.visualization.DataTable();
myData.addColumn('date', 'Date');
myData.addColumn('number', 'Hours Worked');
myData.addRows([
[new Date(2014, 6, 12), 9],
[new Date(2014, 6, 13), 8],
[new Date(2014, 6, 14), 10],
[new Date(2014, 6, 15), 8],
[new Date(2014, 6, 16), 0]
]);
var dash_container = document.getElementById('dashboard_div'),
myDashboard = new google.visualization.Dashboard(dash_container);
var myDateSlider = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnLabel: 'Date'
}
});
var myTable = new google.visualization.ChartWrapper({
chartType : 'Table',
containerId : 'table_div'
});
google.visualization.events.addListener(myTable, 'ready', drawLine);
var myLine = new google.visualization.ChartWrapper({
chartType : 'LineChart',
containerId : 'line_div'
});
myDashboard.bind(myDateSlider, myTable);
myDashboard.draw(myData);
function drawLine() {
var dataTable = myTable.getDataTable();
var dateRange = dataTable.getColumnRange(0);
var xTicks = dataTable.getDistinctValues(0);
myLine.setDataTable(dataTable);
myLine.setOption('hAxis.ticks', xTicks);
myLine.setOption('hAxis.viewWindow.min', dateRange.min);
myLine.setOption('hAxis.viewWindow.max', dateRange.max);
myLine.draw();
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
<div id="control_div"></div>
<div id="line_div"></div>
<div id="table_div"></div>
</div>