页面上有多个谷歌图表

Multiple Google charts on page

本文关键字：谷歌      更新时间：2024-01-16

我目前正试图在我的asp.net MVC网站上显示3个谷歌图表。

我希望这些图表紧挨着（在同一行上），但目前我无法使它们一个在另一个下面（在同一栏上），我不知道为什么。。。

以下代码仅显示一个图表（第一个）：

<div id="chart_divb">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { packages: ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Mois');
            data.addColumn('number', 'Interventions');
            var data1=@Html.Raw(Json.Encode(ViewBag.chartToday));
            $.each(data1,function(index,value){
                data.addRows([[value.Item1, value.Item2]]);
            });
            var options = {'title':'Total Interventions on @(DateTime.Now.Year-2)','width':400,'height':300,legend:{position:'none'}};
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_divb'));
            chart.draw(data,options);
        }
    </script>
</div>
<div id="chart_diva">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { packages: ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Mois');
            data.addColumn('number', 'Interventions');
            var data1=@Html.Raw(Json.Encode(ViewBag.chartToday))
            $.each(data1,function(index,value){
                data.addRows([[value.Item1, value.Item2]]);
            });
            var options = {'title':'Total Interventions on @(DateTime.Now.Year-1)','width':400,'height':300,legend:{position:'none'}};
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_diva'));
            chart.draw(data,options);
        }
    </script>
</div>

<div id="chart_div">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { packages: ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Mois');
            data.addColumn('number', 'Interventions');
            var data1=@Html.Raw(Json.Encode(ViewBag.chartToday))
            $.each(data1,function(index,value){
                data.addRows([[value.Item1, value.Item2]]);
            });
            var options = {'title':'Total Interventions on @DateTime.Now.Year','width':400,'height':300,legend:{position:'none'}};
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data,options);
        }
    </script>
</div>

每个调用都在工作（我可以在源代码中看到），但它们只是没有显示出来。

希望有人能帮助我，并提前感谢你的帮助！

正如@DLeh在前面的回答中提到的，您应该遵循Google图表注册图表库的指导原则(https://developers.google.com/chart/interactive/docs/basic_load_libs)。您只需要注册脚本并一次性加载图表。

至于将3个图表水平显示在一起，有多种方法可以通过CSS实现，但我只是使用float:left作为一个快速示例。

<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <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>
        <div id="chart_div1" style="float: left;">
            <script type="text/javascript">
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Mois');
                    data.addColumn('number', 'Interventions');
                    var data1 = @Html.Raw(Json.Encode(ViewBag.chartToday));
                    $.each(data1, function(index, value) {
                        data.addRows([[value.Item1, value.Item2]]);
                    });
                    var options = { 'title': 'Total Interventions on 1 @(DateTime.Now.Year - 2)', 'width': 400, 'height': 300, legend: { position: 'none' } };
                    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
                    chart.draw(data, options);
                }
            </script>
        </div>
        <div id="chart_div2" style="float: left;">
            <script type="text/javascript">
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Mois');
                    data.addColumn('number', 'Interventions');
                    var data1 = @Html.Raw(Json.Encode(ViewBag.chartToday));
                    $.each(data1, function(index, value) {
                        data.addRows([[value.Item1, value.Item2]]);
                    });
                    var options = { 'title': 'Total Interventions on 2 @(DateTime.Now.Year - 1)', 'width': 400, 'height': 300, legend: { position: 'none' } };
                    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
                    chart.draw(data, options);
                }
            </script>
        </div>

        <div id="chart_div3" style="float: left;">
            <script type="text/javascript">
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Mois');
                    data.addColumn('number', 'Interventions');
                    var data1 = @Html.Raw(Json.Encode(ViewBag.chartToday));
                    $.each(data1, function(index, value) {
                        data.addRows([[value.Item1, value.Item2]]);
                    });
                    var options = { 'title': 'Total Interventions on 3 @DateTime.Now.Year', 'width': 400, 'height': 300, legend: { position: 'none' } };
                    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div3'));
                    chart.draw(data, options);
                }
            </script>
        </div>
    </div>
</body>
</html>
相关文章：