Question

我无法在我的aspx页面上加载多个条形图。该页面仅加载一个图表。如果我评论第一个图表的代码然后它加载第二个图表，同样适用于图表3.这是我的代码，请帮助？：

<asp:Content ID="Content2" ContentPlaceHolderID="cphMainMenuUserMaster" runat="server">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <body>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div style="width: 1064px; height: 150px; margin: 0 auto;">
            <UControl:ucMenu ID="ucMenuOption" runat="server" />
            <div style="width: 850px; float: right; border-radius: 4px; border: 1px solid #e1e1e1">
                <div style="height: 30px; border: 1px solid #e1e1e1; border-top: none; border-right: none;
                    border-left: none; text-align: center; background-image: url(../Images/panel_header.jpg);
                    background-repeat: repeat-x; color: #7bae23; font-weight: bold; font-size: 15px;
                    padding-top: 6px">
                    Weekly Graph
                </div>
                <div id="div_weekly_graph" style="width: 750px; height: 350px; margin-bottom: 20px;
                    margin-top: 20px; padding-left: 50px">
                   <%-- <img id="imgLoadingWeekly" alt="Loading Graph" src="../Images/graphLoadingIcon.gif"
                        style="position: relative; top: 70px" />--%>
                </div>
                <div style="height: 30px; border: 1px solid #e1e1e1; border-right: none; border-left: none;
                    text-align: center; background-image: url(../Images/panel_header.jpg); background-repeat: repeat-x;
                    color: #7bae23; font-weight: bold; font-size: 15px; padding-top: 6px">
                    Monthly Graph
                </div>
                <div id="div_monthly_graph" style="width: 800px; height: 400px; margin-bottom: 10px">
                  <%--  <img id="imgLoadingGraphMothly" alt="Loading Graph" src="../Images/graphLoadingIcon.gif"
                        style="position: relative; top: 70px" />--%>
                </div>
                <div style="height: 30px; border: 1px solid #e1e1e1; border-right: none; border-left: none;
                    text-align: center; background-image: url(../Images/panel_header.jpg); background-repeat: repeat-x;
                    color: #7bae23; font-weight: bold; font-size: 15px; padding-top: 6px">
                    Semi Annual Graph
                </div>
                <div id="div_semiannual_graph" style="width: 800px; height: 400px; margin-bottom: 10px">
                 <%--   <img id="imgLoadingGraphSemiAnnual" alt="Loading Graph" src="../Images/graphLoadingIcon.gif"
                        style="position: relative; top: 70px" />--%>
                </div>
            </div>
        </div>
        <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1.1", { packages: ["bar"] });
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit', 'Test'],
          ['2014', 1000, 400, 200, 323],
          ['2015', 1170, 460, 250, 323],
          ['2016', 660, 1120, 300, 323],
          ['2017', 1030, 540, 350, 323],
          ['2017', 1030, 540, 350, 323],
          ['2017', 1030, 540, 350, 323]
        ]);

                var data2 = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit', 'Test'],
          ['2014', 1000, 400, 200, 323],
          ['2015', 1170, 460, 250, 323],
          ['2016', 660, 1120, 300, 323],
          ['2017', 1030, 540, 350, 323],
          ['2017', 1030, 540, 350, 323],
          ['2017', 1030, 540, 350, 323]
        ]);

                var options = {
                    chart: {
                        title: '',
                        subtitle: ''
                    }
                };

                var options2 = {
                    chart: {
                        title: '',
                        subtitle: ''
                    }
                };

                var chart = new google.charts.Bar(document.getElementById('div_weekly_graph'));
                var chart2 = new google.charts.Bar(document.getElementById('div_semiannual_graph'));

                chart.draw(data, options);
                chart2.draw(data2, options2);
            }

        </script>
    </body>
</asp:Content>

Answer 1

我想我可能已经找到了解决方案。如果我使用此api：google.load（＆＃34; visual＆＃34;，＆＃34; 1.1＆＃34;，{packages：[＆＃34; bar＆＃34;]}），则只会出现此错误/问题; - ＆GT;新API

但是如果我使用这个api：google.load（＆＃34; visual＆＃34;，＆＃34; 1＆＃34;，{packages：[＆＃34; corechart＆＃34;]}）; - ＆gt; OLD API，图表加载正常。

这可能是新api中的一个错误。

Google Chart - 我无法在一个页面上加载多个条形图

1 个答案: