[英]Prevent Google Charts from zooming in
I'm building a column chart using Google Charts.我正在使用 Google Charts 构建柱形图。 It's a chart that shows the amount of pageviews for a specific page over the last 30 days.这是一个图表,显示特定页面在过去 30 天内的综合浏览量。 I create it with the following JavaScript code (full uncut fiddle here ):我使用以下 JavaScript 代码(此处为完整未剪辑的小提琴)创建它:
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Visits');
data.addRows([
// These data rows come from my database (timestamp + hits)
[new Date(1458691200 * 1000),null],
[new Date(1458777600 * 1000),null],
// This keeps repeating for each day, all with null value
[new Date(1461283200 * 1000),2],
[new Date(1461369600 * 1000),null]
]);
var options = {
chartArea: {
width: '70%',
height: '70%'
},
hAxis: {
format: 'd',
gridlines: {
count: 15
},
title: 'Day'
},
vAxis: {
baseline: 0,
format: '#',
gridlines: {
count: -1
},
title: 'Views',
viewWindowMode:'explicit',
viewWindow: {
max: 10,
min: 0
}
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
This works pretty well, it comes up with a chart that is close to what I need, but the graph is "zoomed in" on the only not-null data:这工作得很好,它提供了一个接近我需要的图表,但该图表在唯一的非空数据上被“放大”:
This way, it looks like the 2 views of April 22 are actually covering the period of April 12 until April 22, which is not the case.这样,看起来 4 月 22 日的 2 个视图实际上涵盖了 4 月 12 日到 4 月 22 日的时间段,但事实并非如此。
How do I make the chart prevent from zooming in?如何使图表防止放大? Ideally, it should fit itself between the gridlines of the period it is about.理想情况下,它应该适合它所在时期的网格线之间。
I don't think it is a zoom issue.我不认为这是缩放问题。
Looks like a bug / problem with the 'current'
version.看起来像'current'
版本的错误/问题。
Version '43'
renders the expected chart...版本'43'
呈现预期的图表...
google.charts.load('43', {packages: ['corechart', 'bar']}); google.charts.setOnLoadCallback(drawBasic); function drawBasic() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Day'); data.addColumn('number', 'Visits'); data.addRows([ [new Date(1458691200 * 1000),null], [new Date(1458777600 * 1000),null], [new Date(1458864000 * 1000),null], [new Date(1458950400 * 1000),null], [new Date(1459036800 * 1000),null], [new Date(1459123200 * 1000),null], [new Date(1459209600 * 1000),null], [new Date(1459296000 * 1000),null], [new Date(1459382400 * 1000),null], [new Date(1459468800 * 1000),null], [new Date(1459555200 * 1000),null], [new Date(1459641600 * 1000),null], [new Date(1459728000 * 1000),null], [new Date(1459814400 * 1000),null], [new Date(1459900800 * 1000),null], [new Date(1459987200 * 1000),null], [new Date(1460073600 * 1000),null], [new Date(1460160000 * 1000),null], [new Date(1460246400 * 1000),null], [new Date(1460332800 * 1000),null], [new Date(1460419200 * 1000),null], [new Date(1460505600 * 1000),null], [new Date(1460592000 * 1000),null], [new Date(1460678400 * 1000),null], [new Date(1460764800 * 1000),null], [new Date(1460851200 * 1000),null], [new Date(1460937600 * 1000),null], [new Date(1461024000 * 1000),null], [new Date(1461110400 * 1000),null], [new Date(1461196800 * 1000),null], [new Date(1461283200 * 1000),2], [new Date(1461369600 * 1000),null] ]); var options = { chartArea: { width: '70%', height: '70%' }, hAxis: { format: 'd', gridlines: { count: 15 }, title: 'Day' }, vAxis: { baseline: 0, format: '#', gridlines: { count: -1 }, title: 'Views', viewWindowMode:'explicit', viewWindow: { max: 10, min: 0 } } }; var chart = new google.visualization.ColumnChart( document.getElementById('chart_div') ); chart.draw(data, options); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.