在单页中动态创建 google 个图表

Question

我正在尝试在单个 html 页面中动态创建多个图表，一切都完美加载，除了最后显示的图表是唯一具有可用交互性的图表（例如：将鼠标悬停在点上要读取数据，请单击图例以突出显示行..)，而其他将仅显示静态图表。

HTML代码：

<html>
   <head>
      <title>Dashboard</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"> </script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script type = "text/javascript" src = "./scripts/scripts.js"> </script>
   </head>
    
   <body>
   </body>
   <script language = "JavaScript">
        var dashboard = getParameterByName("dashboard");
        google.charts.load('current', {packages: ['corechart','line']});
        buildDashboard(dashboard);
    </script>
</html>

主要 JS 函数：

function buildDashboard(dashboard)
{
    var panels = getPanels(dashboard);
    google.charts.setOnLoadCallback(function(){
        drawCharts(dashboard, panels); 
    });
}


function drawCharts(dashboard, panels) 
{
    for(var i = 0; i < panels.length; i++) 
    {
        var panel = panels[i];
        var _data = getPanelData(dashboard, panel.Id);
        if(panel["Type"] == "LineChart")
        {
            var legend = JSON.parse(JSON.stringify(_data[0]));
            var options = buildLineChartOptions(panel, legend);
            var data = google.visualization.arrayToDataTable(beautifyData(panel, _data));

            var divname = panel.Id;
            if(!document.getElementById(divname))
                document.body.innerHTML += "<div id = " + divname + " style = \"width: 100%; height: 600px; margin: 0 auto\"></div>";
            
            var chart = new google.visualization.LineChart(document.getElementById(divname));
            chart.draw(data, options);

        }
    }
}

Answer 1

已解决：问题已通过在一张一张绘制图表之前为所有图表创建 <div> 元素而解决。

在单页中动态创建 google 个图表

Dynamic creation of google charts in single page

html

javascript

charts

google-visualization