个人中心
gpt4 book ai didi

javascript - Google API 可视化图表不起作用

转载 作者：行者123 更新时间：2023-11-28 05:47:50 25 4
gpt4 key购买 nike

我使用 Google Visualization API 制作了 3 个图表，但只显示了 1 个图表。但是，当我刷新页面或转到不同的浏览器时，会出现不同的图表。如何让每个图表都出现？我使用了@WhiteHat 的建议，但没有成功。以下是根据他们的建议更新的代码:

<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>

最佳答案

首先建议使用loader.js与旧库相比 jsapi 。

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

接下来，load每次页面加载时只能调用一次语句。
这可能是随机选择图表的原因。 您可以加载所有packages一次通话即可满足您的需求。

尝试更换这个...

// 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);

有了这个...

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

关于javascript - Google API 可视化图表不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38339239/

25 4 0
文章推荐： swift - 容器 View 中以编程方式创建的标签不会针对文本展开
文章推荐： c++ - GLFW - 用鼠标旋转相机的 View 矩阵使其旋转
文章推荐： c++ - Xcode，Objective-C 项目 : not compiling C++ file
文章推荐： javascript - 附加到 jquery 对话框明显的错误 - 有解决方法吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com