Question

我想展示一些仪表板图表（like these ones），例如一个PieChart和一个BarChart。

我发现的问题是这些图表没有显示，除非，我右键单击Inspect元素。反之，如果我已经打开 inspect元素工具，图表就不会显示直到我关闭 inspect elements 工具

我正在使用bootstrap，slim框架和雄辩的orm。

对于pieChart，显示的样本数据如下：

 Private Function Compress(ByVal fileToCompress As FileInfo) As Boolean

    Dim _Compress As Boolean

    Using originalFileStream As FileStream = fileToCompress.OpenRead()
        If (File.GetAttributes(fileToCompress.FullName) And FileAttributes.Hidden) <> FileAttributes.Hidden And fileToCompress.Extension <> ".gz" Then
            Using compressedFileStream As FileStream = File.Create(fileToCompress.FullName + ".gz")
                Using compressionStream As GZipStream = New GZipStream(compressedFileStream, CompressionMode.Compress)
                    originalFileStream.CopyTo(compressionStream)
                    Console.WriteLine("Compressed {0} from {1} to {2} bytes.",
                                      fileToCompress.Name, fileToCompress.Length.ToString(), compressedFileStream.Length.ToString())
                End Using
            End Using
        End If
    End Using

    _Compress = File.Exists(fileToCompress.FullName + ".gz")


    Return _Compress

End Function

以下是PieChart和BarChart的代码：

在html中：

        [
            {
                Area: "Actores y Procesos Sociales",
                Cantidad: 49
            },
            {
                Area: "Población y Estudios Demográficos",
                Cantidad: 41
            },
            {
                Area: "Estudios Agrarios",
                Cantidad: 40
            },
            {
                Area: "Instituciones Políticas",
                Cantidad: 35
            },
            {
                Area: "Sociedad y Cultura",
                Cantidad: 30
            },
            {
                Area: "Estudios Urbanos y Regionales",
                Cantidad: 26
            },
            {
                Area: "Estudios de la Educación y la Ciencia",
                Cantidad: 23
            }
        ]

在剧本中：

<head>
   <link href="http://132.248.234.17/sica15/public/assets/css/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
   <link href="/assets/css/font-awesome-4.6.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="/assets/css/sbadmin2-sidebar-toggle.css" rel="stylesheet" /> 
</head>
<body>
    <div id="page-wrapper">
        <div class="container-fluid">
            <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                        <div id="projectresearcher">
                            <div id="numberRangeFilter_control_div"></div> <div id="numberRangeFilter_chart_div"></div>
                        </div>
                    </div>
        </div>

        <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                        <div id="institucionesPporproyecto_div">
                            <div id="numberRangeFilter_control_div_2"></div> <div id="numberRangeFilter_chart_div_2"></div>
                        </div>
                    </div>
            </div>
       </div>
    </div>

为什么会这样？我应该修复什么才能在浏览器中打开URI后显示这些图表？

解决问题在于这部分有<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http:/assets/js/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart','table','controls'],'language': 'es'}); google.charts.setOnLoadCallback(proyectosporarea); google.charts.setOnLoadCallback(institucionesPporproyecto); function proyectosporarea() {/*PROYECTOS POR ÁREA*/ var data = new google.visualization.DataTable(); var proyectosporarea = {{proyectosporarea|json_encode|raw}}; var totalproyectos = 0; data.addColumn('string', 'Área'); data.addColumn('number', 'Cantidad'); $.each(proyectosporarea, function(index, value){ var Cantidad = parseInt(value.Cantidad); totalproyectos += Cantidad; data.addRow([value.Area,Cantidad]); }); var dashboard = new google.visualization.Dashboard(document.getElementById('projectarea'));//var chart = new google.visualization.PieChart(document.getElementById('projectarea')); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'numberRangeFilter_control_div', 'options': { 'filterColumnLabel': 'Cantidad' } }); // Create a pie chart, passing some options var pieChart = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'numberRangeFilter_chart_div', 'options': { title: 'Número de proyectos vigentes por área de investigación (total: '+totalproyectos+')', backgroundColor: { fill:'transparent'}, height: 500, } }); dashboard.bind(donutRangeSlider, pieChart); function resizeHandler () { dashboard.draw(data);//chart.draw(data, options); } if (window.addEventListener) { window.addEventListener('resize', resizeHandler, false); } else if (window.attachEvent) { window.attachEvent('onresize', resizeHandler); } }/*Fin de drawChart() Proyectos por área*/ function institucionesPporproyecto() {/*INSTITUCIONES POR NÚMERO DE PROYECTOS*/ var data = new google.visualization.DataTable(); var proyectosporarea = {{institucionesPporproyecto|json_encode|raw}}; var total = 0; var totalInvestigadores = 0; data.addColumn('string', 'Institución'); data.addColumn('number', 'Cantidad'); data.addColumn({type: 'string', role: 'annotation'}); //Sumando los totales para después calcular el porcentaje $.each(proyectosporarea, function(indice,valor){ var Cantidad = parseInt(valor.Cantidad); var Total = parseInt(Cantidad); total += Total; }); $.each(proyectosporarea, function(index, value){ var Cantidad = parseInt(value.Cantidad); var Porcentaje = ((Cantidad/total)*100); if(Porcentaje % 1 != 0){ Porcentaje = Porcentaje.toFixed(0)+'%'; }else{ Porcentaje = Porcentaje + '%'; } totalInvestigadores=totalInvestigadores+1; data.addRow([value.Institucion,Cantidad,Porcentaje]); }); var view = new google.visualization.DataView(data); view.setColumns([0, 1]); var table = new google.visualization.Table(document.getElementById('institucionesPporproyecto_t')); table.draw(view, {width: '100%', height: '100%'}); var dashboard2 = new google.visualization.Dashboard(document.getElementById('institucionesPporproyecto_div'));/*Cambie chart por dashboard*/ var control2 = new google.visualization.ControlWrapper({ 'controlType':'NumberRangeFilter', 'containerId':'numberRangeFilter_control_div_2', 'options':{ 'filterColumnIndex':1, 'minValue':0, //'maxValue':60, } }); var chart = new google.visualization.ChartWrapper({ 'chartType':'BarChart', 'containerId':'numberRangeFilter_chart_div_2', 'options':{ title: 'Número de proyectos por institución participante (Total de Instituciones: '+totalInvestigadores+').', chartArea: {width: '45%'}, hAxis: { title: 'Cantidad de proyectos', minValue: 0 }, vAxis: { title: 'Instituciones' }, height: 1400, //width: 1200, } }); dashboard2.draw(view);//chart.draw(view); google.visualization.events.addListener(table, 'sort', function(event) { data.sort([{column: event.column, desc: !event.ascending}]); dashboard2.draw(view);//chart.draw(view); }); //chart.draw(data, options); Aquí ando dashboard2.bind(control2,chart); function resizeHandler () { dashboard2.draw(data);//chart.draw(data, options); } if (window.addEventListener) { window.addEventListener('resize', resizeHandler, false); } else if (window.attachEvent) { window.attachEvent('onresize', resizeHandler); } }/*Fin de drawChart() Tabla Instituciones por número de proyectos*/ </script>：

我有：

function resizeHandler()

而不是：

        dashboard2.bind(control2,chart);
        /*http://stackoverflow.com/a/18984903/1883256*/           
        function resizeHandler () { /*This helps make the chart responsive*/
            dashboard2.draw(data);
        }
        if (window.addEventListener) {
            window.addEventListener('resize', resizeHandler, false);
        }
        else if (window.attachEvent) {
            window.attachEvent('onresize', resizeHandler);
        }

所以，我不得不重复dashboard2.bind(control2,chart); dashboard2.draw(data); /*http://stackoverflow.com/a/18984903/1883256*/ function resizeHandler () {/*This helps make the chart responsive*/ dashboard2.draw(data); } if (window.addEventListener) { window.addEventListener('resize', resizeHandler, false); } else if (window.attachEvent) { window.attachEvent('onresize', resizeHandler); }内dashboard.draw(data);和function resizeHandler()以外dashboard.bind()函数下方的调用。

Answer 1

首先，setOnLoadCallback只应在每页加载时调用一次并且您可以在'callback'

中加入google.charts.load

尝试替换此...

google.charts.load('current', {'packages':['corechart','table','controls'],'language': 'es'});
google.charts.setOnLoadCallback(proyectosporarea);
google.charts.setOnLoadCallback(institucionesPporproyecto);

有了......

    google.charts.load('current', {
      'callback': function () {
        proyectosporarea();
        institucionesPporproyecto();
      },
      'packages': ['corechart','table','controls'],
      'language': 'es'
    });

接下来，每个包装器对象需要一个dom元素
在函数proyectosporarea中，对象似乎有错误containerId
请参阅以下代码段中的评论...

var donutRangeSlider = new google.visualization.ControlWrapper({
    'controlType': 'NumberRangeFilter',
    'containerId': 'filter_div',  //<-- should = numberRangeFilter_control_div
    'options': {
        'filterColumnLabel': 'Cantidad'
    }
});

// Create a pie chart, passing some options
var pieChart = new google.visualization.ChartWrapper({
    'chartType': 'PieChart',
    'containerId': 'chart_div',  //<-- should = numberRangeFilter_chart_div
    'options': {
        title: 'Número de proyectos vigentes por área de investigación (total: '+totalproyectos+')',
        backgroundColor: { fill:'transparent'},
        height: 500,
    }
});

仅当我右键单击inspect元素时，Google图表才会加载仪表板

1 个答案: