Question

我想显示具有不同数据和不同特征的双重Google图表仪表板显示在一页中，但是一页中只能显示一个？

<a href="https://ibb.co/jYS7yz"><img src="https://image.ibb.co/f3OQke/Presentation1.png" alt="Presentation1" border="0"></a>

<iframe src="https://pastebin.com/embed_iframe/fxnwphVf" style="border:none;width:100%"></iframe>

Answer 1

您可以这样做

 
    <html>

<head>
    <title>Google Charts Tutorial</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
    </script>
    <script type="text/javascript">
        google.charts.load('current', { packages: ['corechart'] });    
    </script>
</head>

<body>
    <div id="container" style="width: auto; height: 450px; margin: 0 auto"></div>
    <div id="container2" style="width: auto; height: 450px; margin: 0 auto"></div>
    <script language="JavaScript">
        function drawChart() {
            // Define the chart to be drawn.
            var data1 = google.visualization.arrayToDataTable([
                ['Fruit', 'Mount', { role: 'annotation' }, 'weight', { role: 'annotation' }],
                ['Apple', 1000, '1000', 245, '245'],
                ['Mango', 1234, '1234', 234, '234'],
                ['Watermelon', 12345, '12345', 342, '342'],
                ['Pineapple', 7321, '7321', 545, '545'],
                ['Grape', 46723, '46723', 2345, '2345'],
                ['Banana', 9643, '9643', 462, '462'],
                ['Orange', 4684, '4684', 235, '235']
            ]);

            var options1 = { title: 'About Fruit', isStacked: true };

            // Instantiate and draw the chart.
            var chart1 = new google.visualization.BarChart(document.getElementById('container'));
            chart1.draw(data1, options1);
        }

        function drawChart1() {
            // Define the chart to be drawn.
            var data1 = google.visualization.arrayToDataTable([
                ['Vegetables', 'Mount', { role: 'annotation' }, 'Weight', { role: 'annotation' }],
                ['Cabbage', 117021, '117021', 134, '134'],
                ['Celery ', 1673407, '1673407', 194, '194'],
                ['Asparagus', 152139, '152139', 192, '192'],
                ['Cucumber', 180718, '180718', 216, '216'],
                ['Onion', 14214, '14214', 168, '168'],
                ['Pumpkin', 183667, '183667', 215, '215'],
                ['Sprout ', 15956, '15956', 118, '118']
            ]);

            var options1 = { title: 'About Vegetables', isStacked: true, is3D: true, };

            // Instantiate and draw the chart.
            var chart2 = new google.visualization.BarChart(document.getElementById('container2'));
            chart2.draw(data1, options1);
        }
        google.charts.setOnLoadCallback(drawChart);
        google.charts.setOnLoadCallback(drawChart1);
    </script>
</body>

</html>

Dual Dashboard Google图表

1 个答案: