Question

我尝试将Google图表加载到模式中，但没有显示任何内容。我尝试在index.html文件中加载jsapi仍然没有运气。还试图在索引页面中调用函数drawChart();。仍然没有运气。

这是我的模拟

的index.html

<a data-toggle="modal" href="remote/modal.html" data-target=".modal" class="btn btn-sm btn-danger">Click Me!</a>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        </div>
    </div>
</div>

modal.html

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', 'KPI 1');
        data.addColumn('number', 'KPI 1 Target');
        data.addColumn({type:'boolean',role:'certainty'});
        data.addColumn('number', 'KPI 2');
        data.addColumn('number', 'KPI 2 Target');
        data.addColumn({type:'boolean',role:'certainty'});
        data.addColumn('number', 'KPI 3 WR');
        data.addColumn('number', 'KPI 3 WR Target');
        data.addColumn({type:'boolean',role:'certainty'});
        data.addColumn('number', 'KPI 4 CA');
        data.addColumn('number', 'KPI 4 CA Target');
        data.addColumn({type:'boolean',role:'certainty'});
        data.addRows([
            ['Jan', 76.87, 75.00, false, 93.40, 72.00, false, 0.35, 0.5, false, 6.21, 1.13, false],
            ['Feb', 76.68, 75.00, false, 90.45, 72.00, false, 0.44, 0.5, false, 9.52, 1.13, false],
            ['Mar', 80.48, 75.00, false, 89.80, 72.00, false, 0.49, 0.5, false, 9.27, 1.13, false]
        ]);

        var options = {
            curveType: "function",
            width: 800, height: 450,
            chartArea:{ left: '8%', top: '8%', width: "80%", height: "80%" },
            series: {
                0:{color: '#e2383f'},
                1:{color: '#e2383f', visibleInLegend: false},
                2:{color: '#3498db'},
                3:{color: '#3498db', visibleInLegend: false},
                4:{color: '#F0AD4E'},
                5:{color: '#F0AD4E', visibleInLegend: false},
                6:{color: '#8ec449'},
                7:{color: '#8ec449', visibleInLegend: false}
            }
        };
        new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, options);
    }
</script>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Chart</h4>
</div>
<div class="modal-body">
    <div id="chart_div"></div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Answer 1

我找到了答案。我所要做的就是替换

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

用这个

google.load('visualization', '1', {'packages':['corechart'], "callback": drawChart});

Answer 2

之前的解决方案对我不起作用。但我可以找到一个有效的（我在Chrome和Firefox上测试过它）。

它需要jQuery，但我想这不是一个很大的不便。

 $('body').one('shown.bs.modal', '#modal', function(){
   google.load('visualization', '1.1', {'packages':['corechart'], "callback": drawChart});
 }); 
 // I keep this duplicated for allowing graphs outside modals. 
 // If you always show them inside a modal you can remote the next line
 google.load('visualization', '1.1', {'packages':['corechart'], "callback": drawChart});

 // Regular draw function
 function drawChart() {
   ...
 }

一切都很紧张。

请注意#modal是指所使用的模态的ID。
我使用one代替on，因为一旦内容加载，bootstrap就无法从远程再次获取

Bootstrap - 将远程Google图表加载到模态中

2 个答案: