放大Google折线图 [英] Zoom Google Line chart
问题描述
我正在尝试使用Google Visualization API创建折线图。我想启用缩放。 文档表示资源管理器选项非常有用。
但是当我尝试使用'explorer'选项时,图表显示,但缩放无效。
I am trying to create a line chart with the Google Visualization API. I want to enable zooming. Documents say that the 'explorer' option is useful. But when I try to use the 'explorer' option, the chart is shown but zoom does not work.
这是我的代码:
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?
推荐答案
以下是我如何通过 dragToZoom
浏览器功能
Here is How I got the zoom with the dragToZoom
explorer function
explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 4.0
}
小提琴在这里 https://jsfiddle.net/4w626v2s/2/
也可以通过滚动来缩放。
also by just allowing it to zoom by scrolling
explorer: {
axis: 'horizontal',
keepInBounds: true,
maxZoomIn: 4.0
}
滚动缩放的小提琴在这里 https://jsfiddle.net/5h7jxqq8/2/
the fiddle for scroll to zoom is here https://jsfiddle.net/5h7jxqq8/2/
这篇关于放大Google折线图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!