ICode9

精准搜索请尝试: 精确搜索
首页?>?bet356体育下载> 文章详细

javascript – 缩放Google Line图表

2019-09-30 10:37:02??阅读:9??来源: 互联网

标签:linechart?javascript?charts?google-visualization


bet356体育下载我正在尝试使用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);
}

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

解决方法:

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



标签:linechart,javascript,charts,google-visualization

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有