web-dev-qa-db-de.com

Google-Liniendiagramm vergrößern

Ich versuche, ein Liniendiagramm mit der Google-Visualisierungs-API zu erstellen. Ich möchte das Zoomen aktivieren. Dokumente sagen Sie, dass die Option 'Explorer' nützlich ist. Wenn ich jedoch die Option "Explorer" verwende, wird das Diagramm angezeigt, aber der Zoom funktioniert nicht.

Das ist mein 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);
}

Wie kann ich dieses Problem lösen und ein Liniendiagramm zoombar machen?

12
alinaish

Hier ist, wie ich den Zoom mit der Explorer-Funktion dragToZoom bekam

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

die Geige ist hier https://jsfiddle.net/4w626v2s/2/

auch durch bloßes Zoomen durch Scrollen

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

die Geige zum Scrollen zum Zoomen ist hier https://jsfiddle.net/5h7jxqq8/2/

24
Leonard Kakande

Dies scheint jetzt mit LineChart AND ColumnChart zu funktionieren (auch wenn dieser nicht dokumentiert ist).

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

http://jsfiddle.net/duJA8/

12
Sébastien

Versuche dies:

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

Wenn Sie Breite und Höhe entsprechend dem Bildschirm einstellen möchten. So können Sie dies erreichen, indem Sie "innerWidth" und "innerHeight" wie unten gezeigt verwenden:

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

Ich hoffe, es hilft Ihnen, das Problem zu lösen.

1