缩放谷歌折线图答案

【问题标题】：Zoom Google Line chart缩放谷歌折线图
【发布时间】：2013-12-24 16:44:04
【问题描述】：

我正在尝试使用 Google Visualization API 创建折线图。我想启用缩放。 Documents 说 'explorer' 选项很有用。但是当我尝试使用 '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);
}

如何解决此问题并使折线图可缩放？

【问题讨论】：

在使用带有“日期”类型轴的资源管理器选项时，API 中存在一个已知错误。开发团队正在研究解决方案。

标签： javascript charts google-visualization linechart

【解决方案1】：

这是我如何使用 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/

【讨论】：

您好，这对我不起作用..请帮助其紧急
@HarrySharma 你能解释一下你是如何使用它的吗？
@HarrySharma 看起来尚未为甘特图定义缩放developers.google.com/chart/interactive/docs/gallery/…
如何在移动设备或 Android Webview 上缩放和滚动谷歌图表？我已尝试上述选项在我的计算机浏览器上运行良好，但在 Android Webview 或移动浏览器上无法运行，请帮助我..

【解决方案2】：

这似乎现在可以与 LineChart 和 ColumnChart 一起使用（即使没有记录这一点）。

var options = {
    explorer: {
        maxZoomOut:2,
        keepInBounds: true
    }
};

http://jsfiddle.net/duJA8/

【讨论】：

这也适用于散点图。此外，据我所知，如果您在轴上有任何对数缩放，则此功能不起作用。
您好，这对我不起作用..请帮助其紧急

【解决方案3】：

试试这个：

<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>

如果你想根据屏幕设置宽度和高度。因此，您可以通过使用“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>

希望能帮到你解决问题。

【讨论】：

【解决方案4】：

以下代码可以使用，但您不应在图表上使用动画。删除动画并仅使用资源管理器。这是一个错误，如果应用了动画，那么缩放将不起作用。

我花了几个星期才弄明白。

explorer: {
  keepInBounds: true,
  maxZoomIn: 8.0
}

【讨论】：