Zoom Google Line chart

后端 未结 4 632
暗喜
暗喜 2020-12-13 14:59

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

相关标签:
4条回答
  • 2020-12-13 15:35

    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
    }
    
    0 讨论(0)
  • 2020-12-13 15:39

    Here is How I got the zoom with the dragToZoom explorer function

    explorer: { 
            actions: ['dragToZoom', 'rightClickToReset'],
            axis: 'horizontal',
            keepInBounds: true,
            maxZoomIn: 4.0
    }
    

    the fiddle is here 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/

    0 讨论(0)
  • 2020-12-13 15:52

    This seems to be working now with LineChart AND ColumnChart (even though this one is not documented).

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

    http://jsfiddle.net/duJA8/

    0 讨论(0)
  • 2020-12-13 15:55

    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:

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

    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题