Google API可视化图表无法使用 [英] Google API Visualization Chart Not Working

查看：92
本文介绍了Google API可视化图表无法使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用Google Visualization API制作3张图，但只显示1张图。但是，当我刷新页面或转到其他浏览器时，会出现不同的图形。我如何让每张图都出现？我使用@WhiteHat建议，但它没有奏效。这是他们建议后的更新后的代码：




$ p 

 < script> 
（function（i，s，o，g，r，a，m）{i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || function（）{
 （i [r] .q = i [r] .q || []）。push（arguments）}，i [r] .l = 1 * new Date（）; a = s.createElement（o），
m = s.getElementsByTagName（o）[0]; a.async = 1; a.src = g; m.parentNode.insertBefore（a，m）
}）（window，document，'script' ， '// www.google-analytics.com/analytics.js','ga'）; 
 
 ga（'create'，'UA-66892235-1'，'auto'）; 
 ga（'send'，'pageview'）; 
< / script> 
< meta charset =utf-8> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 
< meta name =viewportcontent =width = device-width，initial-scale = 1> 
< meta name =descriptioncontent => 
< meta name =authorcontent => 
 
< title>分析工具< / title> 
 
 {％load staticfiles％} 
 
 <！ -  Bootstrap Core CSS  - > 
< link rel =stylesheettype =text / csshref ={％static'home / css / bootstrap.min.css'％}/> 
 
<！ - 自订CSS  - > 
< link rel =stylesheettype =text / csshref ={％static'home / css / grayscale.css'％}/> 
< link rel =stylesheettype =text / csshref ={％static'home / css / style.css'％}/> 
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js>< / script> 
 
 <！ - 自定义字体 - > 
< link href ={％static'home / font-awesome / css / font-awesome.min.css'％} =stylesheettype =text / css> 
 
< link href =http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic =stylesheettype =text / css> 
< link href =http://fonts.googleapis.com/css?family=Montserrat:400,700 =stylesheettype =text / css> 
< link href ='http：//fonts.googleapis.com/css？family = Lobster'rel ='stylesheet'type ='text / css'> 
< link href ='http：//fonts.googleapis.com/css？family = Raleway：300,400,500,600'rel ='stylesheet'type ='text / css'> 
 
 
 <！ -  HTML5 Shim and Respond.js IE8支持HTML5元素和媒体查询 - > 
 <！ - 警告：如果您通过file查看页面，Respond.js不起作用：//  - > 
<！ -  [if lt IE 9]> 
  





 < script src = https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js >< /脚本> 
<！[endif]  - > 
 
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< / script> 
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script> 
 
< script type =text / javascriptsrc =http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js> < /脚本> 
 
< script type =text / javascript> 
 
 
 
函数printDiv（divName）{
 var printContents = document.getElementById（divName）.innerHTML; 
 console.log（printContents）
 w = window.open（）; 
 w.document.write（< html>< head>< title>打印页面< /标题>）; 
 w.document.write（{％load staticfiles％}）
 w.document.write（< link rel ='stylesheet'type ='text / css'href ='{％ static'home / css / bootstrap.min.css'％}'/>）
 w.document.write（< link rel ='stylesheet'type ='text / css'href ='{ ％static'home / css / style.css'％}'/>）
 w.document.write（< link href ='http：//fonts.googleapis.com/css？family = Lora：400,700,400italic，700italic'rel ='stylesheet'type ='text / css'>）
 w.document.write（'< / head>< body>'）; 
 w.document.write（printContents）; 
 w.document.write（'< / body>< / html>'）; 
 w.print（）; 
 w.close（）; 
} 
 
 
 //加载可视化API和饼图包。 
 google.charts.load（'current'，{callback：drawChart，packages：['bar'，'corechart'，'line'，'table']}）; 
 
 //设置回调以在加载Google Visualization API时运行。 
 google.setOnLoadCallback（drawChart）; 
 
函数drawChart（）{
 var djangoDataTable = {{tableArr | safe}}; 
 var dataTable = google.visualization.arrayToDataTable（djangoDataTable）; 
 
 var djangoData1 = {{deathHBV_Final | safe}} 
 var data1 = google.visualization.arrayToDataTable（djangoData1）; 
 
 var djangoData2 = {{hcc_Final | safe}} 
 var data2 = google.visualization.arrayToDataTable（djangoData2）; 
 
 var djangoData3 = {{cirrhosis_Final | safe}} 
 var data3 = google.visualization.arrayToDataTable（djangoData3）; 
 
 
 
 var options3 = {
 title：死亡率HBV，
 titleTextStyle：{
 fontSize：26，
字体名称：'Raleway'，
}，
颜色：['＃ff7f50'，'＃49B7A8']，
 
宽度：400，
高度：400 ，
 vAxis：{
 title：'Percentage（％）'，
 maxValue：100，
}，
 hAxis：{
 title：'Year '，
}，
图例：{
位置：'none'，
 maxLines：2，
} 
}; 
 
 var options4 = {
 title：Cirrhosis，
 titleTextStyle：{
 fontSize：26，
 fontName：'Raleway'，
 $，b $ b颜色：['＃ff7f50'，'＃49B7A8']，
宽度：400，
高度：400，
 vAxis：{
 title： '百分比（％）'，
 maxValue：100，
}，
 hAxis：{
标题：'Year'，
}，
图例： {
 position：'none'，
 maxLines：2，
} 
}; 
 
 var options5 = {
 title：肝癌，
 titleTextStyle：{
 fontSize：26，
 fontName：'Raleway'，
 $，
 colors：['＃ff7f50'，'＃49B7A8']，
 
 width：400，
 height：400，
 vAxis：{
 title：'Percentage（％）'，
 maxValue：100，
}，
 hAxis：{
 title：'Year'，
}，
图例：{
位置：'none'，
 maxLines：2，
} 
}; 
 
 var optionsTable = {
'showRowNumber'：false，
'width'：'100％'，
'height'：'100％'，
'allowHtml'：true，
}; 
 
 var chart3 = new google.visualization.LineChart（document.getElementById（'linechart1'））; 
 chart3.draw（data1，options3）; $ {
 $ b if（{{ifCirr}} == 0）{
 var chart4 = new google.visualization.LineChart（document.getElementById（'linechart2'））; 
 chart4.draw（data3，options4）; 
} 
 
 var chart5 = new google.visualization.LineChart（document.getElementById（'linechart3'））; 
 chart5.draw（data2，options5）; （y = 0; y <4; y ++）{
 dataTable.setCell（y，0，String（djangoDataTable [y + 1] [0]），null，{
 
} （j = 1; j  dataTable.setCell（i，j，String（djangoDataTable [i + 1] [j]），null，{'style'：' （j = 2; j } 
} 
 
 （i = 0; i <4; i ++）{
 dataTable.setCell（i，j，String（djangoDataTable [i + 1] [b] 
 
 $ b var table ='font-size：18px;'}}，新的google.visualization.Table（document.getElementById（'table_div'））; 
 table.draw（dataTable，optionsTable）; 
 
 $ b $（'＃mailform'）。submit（function（）{
 var formAction = $（＃selectmail）。val（）==technical ？research.cs.alc@gmail.com：mtoy@stanford.edu; 
 $（＃mailform）。attr（action，MAILTO：+ formAction）; 
}）; 
 
< / script>


解决方案 loader.js 与较旧的库 jsapi 。



< script src =https://www.gstatic.com/charts/loader.js>< / script>


与

< script src =https://www.google.com/jsapi><< ; /脚本>



接下来，加载语句只应该每次调用一次页面加载。

这可能是随机图表选择的原因。
，您可以加载所需的所有包一个电话。



尝试替换此... 

  //加载可视化API和饼图包。 
 google.load（'visualization'，'1.0'，{'packages'：['corechart']}）; 
 google.load（'visualization'，'1'，{'packages'：['corechart'，'bar']}）; 
 google.load（'visualization'，'1.1'，{'packages'：['line']}）; 
 google.load（visualization，1.0，{'packages'：['table']}）; 
 //设置回调以在加载Google Visualization API时运行。 
 google.setOnLoadCallback（drawChart）;

与此... 

  google.charts.load（'current'，{
 callback：drawChart，
 packages：['bar'，'corechart'，'line'，'table'] 
}）;


I used the Google Visualization API for making 3 graphs but only 1 graph is showing. However, when I refresh the page or go to a different browser, a different graph appears. How do I make every graph appear? I used @WhiteHat suggestion but it did not work. Here is the updated code after their suggestion:

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-66892235-1', 'auto');
    ga('send', 'pageview');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Analysis Tool</title>

{% load staticfiles %}

<!-- Bootstrap Core CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'home/css/bootstrap.min.css' %}" />

<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'home/css/grayscale.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'home/css/style.css' %}" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Custom Fonts -->
<link href="{% static 'home/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">

<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:300,400,500,600' rel='stylesheet' type='text/css'>


<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>


    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 

<script type="text/javascript">



    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        console.log(printContents)
        w=window.open();
        w.document.write("<html><head><title>Print Page</title>");
        w.document.write("{% load staticfiles %}")
        w.document.write("<link rel='stylesheet' type='text/css' href='{% static 'home/css/bootstrap.min.css' %}' />")
        w.document.write("<link rel='stylesheet' type='text/css' href='{% static 'home/css/style.css' %}' />")
        w.document.write("<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>")
        w.document.write('</head><body>');
        w.document.write(printContents);
        w.document.write('</body></html>');
        w.print();
        w.close();  
    }       


    // Load the Visualization API and the piechart package.        
    google.charts.load('current', {callback: drawChart,packages: ['bar', 'corechart', 'line', 'table'] });

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var djangoDataTable = {{ tableArr|safe }};
        var dataTable = google.visualization.arrayToDataTable(djangoDataTable);

        var djangoData1 = {{ deathHBV_Final|safe }}
        var data1 = google.visualization.arrayToDataTable(djangoData1);

        var djangoData2 = {{ hcc_Final|safe }}
        var data2 = google.visualization.arrayToDataTable(djangoData2);

        var djangoData3 = {{ cirrhosis_Final|safe }}
        var data3 = google.visualization.arrayToDataTable(djangoData3);



        var options3 = {
            title: "Mortality Rate HBV",
            titleTextStyle :{
                fontSize:26,
                fontName:'Raleway',
            },
            colors: ['#ff7f50','#49B7A8'],

            width: 400,
            height: 400,
            vAxis: {
                title:'Percentage (%)',
                maxValue: 100,
            },
            hAxis:{
                title:'Year',
            },
            legend:{
                position:'none',
                maxLines: 2,
            }
        };

        var options4 = {
            title: "Cirrhosis",
            titleTextStyle :{
                fontSize:26,
                fontName:'Raleway',
            },
            colors: ['#ff7f50','#49B7A8'],
            width: 400,
            height: 400,
            vAxis: {
                title:'Percentage (%)',
                maxValue: 100,
            },
            hAxis:{
                title:'Year',
            },
            legend:{
                position:'none',
                maxLines: 2,
            }
        };

        var options5 = {
            title: "Liver Cancer",
            titleTextStyle :{
                fontSize:26,
                fontName:'Raleway',
            },
            colors: ['#ff7f50','#49B7A8'],

            width: 400,
            height: 400,
            vAxis: {
                title:'Percentage (%)',
                maxValue: 100,
            },
            hAxis:{
                title:'Year',
            },
            legend:{
                position:'none',
                maxLines: 2,
            }
        };

        var optionsTable = {
            'showRowNumber': false,
            'width': '100%',
            'height': '100%',
            'allowHtml': true, 
        };

        var chart3 = new google.visualization.LineChart(document.getElementById('linechart1'));
        chart3.draw(data1, options3);

        if({{ ifCirr }} == 0){
            var chart4 = new google.visualization.LineChart(document.getElementById('linechart2'));
            chart4.draw(data3, options4);
        }

        var chart5 = new google.visualization.LineChart(document.getElementById('linechart3'));
        chart5.draw(data2, options5);

        for (y = 0; y < 4; y++){
            dataTable.setCell(y,0,String(djangoDataTable[y+1][0]),null,{'style': ' font-size:20px;'})
        }

        for (j = 1; j < djangoDataTable[1].length; j += 2){
            for (i = 0; i < 4; i++) { 
                dataTable.setCell(i,j,String(djangoDataTable[i+1][j]),null,{'style': 'background-color: rgba(255,127,80,0.7); font-size:18px;'})
            }
        }

        for (j = 2; j < djangoDataTable[1].length; j += 2){
            for (i = 0; i < 4; i++) { 
                dataTable.setCell(i,j,String(djangoDataTable[i+1][j]),null,{'style': 'background-color: #49b7a8; font-size:18px;'})
            }
        }

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(dataTable, optionsTable);
    }

    $('#mailform').submit(function(){
        var formAction = $("#selectmail").val() == "technical" ? "research.cs.alc@gmail.com" : "mtoy@stanford.edu";
        $("#mailform").attr("action", "MAILTO:" + formAction);
    }); 

</script>

解决方案

first, it is recommended to use loader.js vs. the older library jsapi.

<script src="https://www.gstatic.com/charts/loader.js"></script>
vs.
<script src="https://www.google.com/jsapi"></script>

next, the load statement should only be called once per page load.
which is probably the reason for random chart selection.
and you can load all the packages you need in one call.

try replacing this... 

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
google.load('visualization', '1', {'packages': ['corechart', 'bar']});
google.load('visualization', '1.1',{'packages': ['line']});
google.load("visualization", "1.0", {'packages':['table']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

with this... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['bar', 'corechart', 'line', 'table']
});

这篇关于Google API可视化图表无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆