web-dev-qa-db-ja.com

Google折れ線グラフをズーム

Google Visualization APIで折れ線グラフを作成しようとしています。ズームを有効にしたい。 ドキュメント 「エクスプローラー」オプションが便利だと言ってください。しかし、「エクスプローラ」オプションを使用しようとすると、チャートは表示されますが、ズームが機能しません。

これは私のコードです：

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);
}

この問題を解決して折れ線グラフをズーム可能にするにはどうすればよいですか？

javascriptchartsgoogle-visualizationlinechart
14
alinaish

dragToZoom Explorer関数でズームを取得する方法は次のとおりです

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/

30
Leonard Kakande

これは、 LineChart AND ColumnChart （これでも1つは文書化されていません）。

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

http://jsfiddle.net/duJA8/

11
Sébastien

これを試して：

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

画面に合わせて幅と高さを設定したい場合。したがって、次のように「innerWidth」と「innerHeight」を使用することでこれを実現できます。

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

問題の解決に役立つことを願っています。

1
Sami Ahmed Siddiqui

以下のコードは機能しますが、チャートでアニメーションを使用しないでください。アニメーションを削除し、エクスプローラのみを使用してください。これはバグです。アニメーションが適用されている場合、ズームは機能しません。

私はこれを理解するために数週間を費やしました。

冒険者： {

                keepInBounds: true,
                maxZoomIn: 8.0
            }
0
Vivek Amirthakadeswaran