放大谷歌折线图
[英]Zoom Google Line chart
问题描述
I am trying to create a line chart with the Google Visualization API.
我正在尝试使用 Google Visualization API 创建折线图。 I want to enable zooming.我想启用缩放。 Documents say that the 'explorer' option is useful. 文档说 'explorer' 选项很有用。 But when I try to use the 'explorer' option, the chart is shown but zoom does not work.但是当我尝试使用“资源管理器”选项时，会显示图表但缩放不起作用。
This is my code:这是我的代码：
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);
}
How can I resolve this problem and make a line chart zoomable?如何解决此问题并使折线图可缩放？
4 个解决方案
解决方案1
37 2016-04-13 10:51:37
Here is How I got the zoom with the dragToZoom explorer function这是我如何使用dragToZoom资源管理器功能进行缩放
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 4.0
}
the fiddle is here https://jsfiddle.net/4w626v2s/2/小提琴在这里https://jsfiddle.net/4w626v2s/2/
also by just allowing it to zoom by scrolling也只是允许它通过滚动来缩放
explorer: {
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 4.0
}
the fiddle for scroll to zoom is here https://jsfiddle.net/5h7jxqq8/2/滚动缩放的小提琴在这里https://jsfiddle.net/5h7jxqq8/2/
解决方案2
15 2014-02-24 12:24:06
This seems to be working now with LineChart AND ColumnChart (even though this one is not documented).这似乎现在与LineChart AND ColumnChart一起工作（即使这个没有记录）。
var options = {
explorer: {
maxZoomOut:2,
keepInBounds: true
}
};
解决方案3
2 2017-03-17 07:09:22
Try this:试试这个：
<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>
If you want to set Width and Height according to the Screen.如果要根据屏幕设置宽度和高度。 So, you can achieve this by using "innerWidth" and "innerHeight" as shown below:因此，您可以通过使用“innerWidth”和“innerHeight”来实现这一点，如下所示：
<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>
I hope it helps you to solve the problem.我希望它可以帮助您解决问题。
解决方案4
1 2019-12-05 13:11:43
The Below code will work but you should not use animation on your charts.下面的代码将起作用，但您不应在图表上使用动画。 Remove animation and use only explorer.删除动画并仅使用资源管理器。 This is a bug, if animation is applied then zoom will not work.这是一个错误，如果应用动画，则缩放将不起作用。
I spent weeks to figure this out.我花了几个星期来弄清楚这一点。
explorer: {
keepInBounds: true,
maxZoomIn: 8.0
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.