我正在尝试使用Google Visualization API创建折线图。我想启用缩放。 Documents说'探险家'选项很有用。 但是当我尝试使用'explorer'选项时,会显示图表,但缩放不起作用。
这是我的代码:
function drawVisualization(dataValues) {
var data = new window.google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Count');
for (var i = 0; i < dataValues.length; i++) {
data.addRow([new Date(dataValues[i].Year, dataValues[i].Month-1, dataValues[i].Day), dataValues[i].Count]);
}
var formatter_short = new google.visualization.DateFormat({ formatType: 'short' });
formatter_short.format(data, 0);
var options = {
title: "Time statistics",
explorer: { maxZoomOut: 8 }
};
var chart = new google.visualization.LineChart(document.getElementById('date'));
chart.draw(data, options);
}
如何解决此问题并使折线图可缩放?
答案 0 :(得分:25)
以下是我如何使用dragToZoom
资源管理器功能
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 4.0
}
小提琴在这里https://jsfiddle.net/4w626v2s/2/
也可以通过滚动来缩放
explorer: {
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 4.0
}
滚动缩放的小提琴是https://jsfiddle.net/5h7jxqq8/2/
答案 1 :(得分:12)
现在这似乎与LineChart和ColumnChart一起工作(即使没有记录这一点)。
var options = {
explorer: {
maxZoomOut:2,
keepInBounds: true
}
};
答案 2 :(得分:1)
试试这个:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
height: 600,
width: window.innerWidth,
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="height: 500px; "></div>
</body>
</html>
&#13;
如果要根据屏幕设置宽度和高度。所以,你可以通过使用&#34; innerWidth&#34;来实现这一点。和&#34; innerHeight&#34;如下图所示:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
animation:{
duration: 1000,
easing: 'linear',
startup: true
},
height: window.innerHeight,
width: window.innerWidth,
theme: 'material',
title: 'Company Performance'
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material"></div>
</body>
</html>
&#13;
我希望它可以帮助您解决问题。
答案 3 :(得分:0)
下面的代码将起作用,但您不应在图表上使用动画。删除动画,仅使用资源管理器。这是一个错误,如果应用了动画,则缩放将不起作用。
我花了数周时间才弄清楚这一点。
资源管理器:{
keepInBounds: true,
maxZoomIn: 8.0
}