web-dev-qa-db-fra.com

Graphique Google Line Zoom

J'essaie de créer un graphique à courbes avec l'API de visualisation de Google. Je veux activer le zoom. Documents dites que l'option 'Explorateur' est utile. Mais lorsque j'essaie d'utiliser l'option "Explorateur", le graphique est affiché mais le zoom ne fonctionne pas.

Ceci est mon 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);
}

Comment puis-je résoudre ce problème et rendre un graphique linéaire zoomable?

javascriptchartsgoogle-visualizationlinechart
12
alinaish

Voici comment j'ai obtenu le zoom avec la fonction dragToZoom Explorer

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

le violon est ici https://jsfiddle.net/4w626v2s/2/

aussi en lui permettant simplement de zoomer en faisant défiler

Explorer: {
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0
}

le violon pour faire défiler jusqu'au zoom est ici https://jsfiddle.net/5h7jxqq8/2/

24
Leonard Kakande

Cela semble fonctionner maintenant avec LineChart AND ColumnChart (même si celui-ci n'est pas documenté).

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

http://jsfiddle.net/duJA8/

12
Sébastien

Essaye ça:

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

Si vous souhaitez définir la largeur et la hauteur en fonction de l'écran. Vous pouvez donc y parvenir en utilisant "innerWidth" et "innerHeight" comme indiqué ci-dessous:

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

J'espère que cela vous aide à résoudre le problème.

1
Sami Ahmed Siddiqui