Javascript 变量坚持使用最后一个值覆盖第一个值

Question

我有一个显示谷歌图表的功能。我想显示存储在数据库中的每一年的图表。几个小时以来我一直困扰的问题是，例如，变量

var year

始终将最后一年作为值。

例如，如果我想显示每年(2013 年和 2014 年)的图表，它只会显示 2014 年的图表，而忽略第一年。如果我只获取 2013 年的数据，它显示的是 2013 年的数据。

似乎它覆盖了所有数据，只保留最后一个值。

我的代码如下:

<?php 
    foreach ($anios as $anio) 
    {
        ?>
            <script type="text/javascript">
                google.load("visualization", "1", {packages:["corechart"]});
                google.setOnLoadCallback(drawChart);
        <?php

        $datos=$difusion_stats->notas_stats_anio($anio->Año);
        ?>
          var year=<?=$anio->Año?>; console.log('First, the year value is '+year);
          var data=<?=$datos?>;
          var id_chart = 'chart_'+<?=$anio->Año?>;

            function drawChart() {
                console.log('Inside the drawChart() function. Current year value is: '+year);
                console.log('Php current year value is: '+<?=$anio->Año?>);
            var data = google.visualization.arrayToDataTable(<?=$datos?>);

            var options = {
                    title: 'Distribución de notas y entrevistas en el año '+<?=$anio->Año?>,
                    legend: 'Porcentaje de los distintos tipos de eventos',
                    pieSliceText: 'texto',
                    slices : {
                        0 : {offset: 0.1}
                    },
                    /*sliceVisibilityThreshold: .2,//Para contraer el resto y poner "otro"*/
                    pieHole: 0.4,
                    backgroundColor: { fill:'transparent'},
                    tooltip: {showColorCode: true},
                    tooltip: {isHtml: true},
                    height: 400,
                    titleTextStyle: {
                        color: '#FFFFFF'
                    },
                    legendTextStyle: {
                        color: '#FFFFFF'
                    }          
                };                      

                var chart = new google.visualization.PieChart(document.getElementById(id_chart));

                chart.draw(data, options);
                /*Para hacerlo responsive: http://stackoverflow.com/a/18984903/1883256*/
                function resizeHandler () {
                    chart.draw(data, options);
                }
                if (window.addEventListener) {
                    window.addEventListener('resize', resizeHandler, false);
                }
                else if (window.attachEvent) {
                    window.attachEvent('onresize', resizeHandler);
                }  

            }/*Fin de la función drawChart()*/
    </script>
        <?php
    }/*Fin del foreach PHP*/
?>

在这种情况下，生成的 javascript 代码是每年的两个代码:2013 年和 2014 年:

<script type="text/javascript">
                    google.load("visualization", "1", {packages:["corechart"]});
                    google.setOnLoadCallback(drawChart);
                          var year=2013; console.log('First, the year value is '+year);
              var data=[['tipo','Cantidad'],['nota',14],['entrevista',3]];
              var id_chart = 'chart_'+2013;

                function drawChart() {
                    console.log('Inside the drawChart() function. Current year value is: '+year);
                    console.log('Php current year value is: '+2013);
                var data = google.visualization.arrayToDataTable([['tipo','Cantidad'],['nota',14],['entrevista',3]]);

                var options = {
                        title: 'Distribución de notas y entrevistas en el año '+2013,
                        legend: 'Porcentaje de los distintos tipos de eventos',
                        pieSliceText: 'texto',
                        slices : {
                            0 : {offset: 0.1}
                        },
                        /*sliceVisibilityThreshold: .2,//Para contraer el resto y poner "otro"*/
                        pieHole: 0.4,
                        backgroundColor: { fill:'transparent'},
                        tooltip: {showColorCode: true},
                        tooltip: {isHtml: true},
                        height: 400,
                        titleTextStyle: {
                            color: '#FFFFFF'
                        },
                        legendTextStyle: {
                            color: '#FFFFFF'
                        }          
                    };                      

                    var chart = new google.visualization.PieChart(document.getElementById(id_chart));

                    chart.draw(data, options);
                    /*Para hacerlo responsive: http://stackoverflow.com/a/18984903/1883256*/
                    function resizeHandler () {
                        chart.draw(data, options);
                    }
                    if (window.addEventListener) {
                        window.addEventListener('resize', resizeHandler, false);
                    }
                    else if (window.attachEvent) {
                        window.attachEvent('onresize', resizeHandler);
                    }  

                }/*Fin de la función drawChart()*/
        </script>
                            <script type="text/javascript">
                    google.load("visualization", "1", {packages:["corechart"]});
                    google.setOnLoadCallback(drawChart);
                          var year=2014; console.log('First, the year value is '+year);
              var data=[['tipo','Cantidad'],['nota',43],['entrevista',12]];
              var id_chart = 'chart_'+2014;

                function drawChart() {
                    console.log('Inside the drawChart() function. Current year value is: '+year);
                    console.log('Php current year value is: '+2014);
                var data = google.visualization.arrayToDataTable([['tipo','Cantidad'],['nota',43],['entrevista',12]]);

                var options = {
                        title: 'Distribución de notas y entrevistas en el año '+2014,
                        legend: 'Porcentaje de los distintos tipos de eventos',
                        pieSliceText: 'texto',
                        slices : {
                            0 : {offset: 0.1}
                        },
                        /*sliceVisibilityThreshold: .2,//Para contraer el resto y poner "otro"*/
                        pieHole: 0.4,
                        backgroundColor: { fill:'transparent'},
                        tooltip: {showColorCode: true},
                        tooltip: {isHtml: true},
                        height: 400,
                        titleTextStyle: {
                            color: '#FFFFFF'
                        },
                        legendTextStyle: {
                            color: '#FFFFFF'
                        }          
                    };                      

                    var chart = new google.visualization.PieChart(document.getElementById(id_chart));

                    chart.draw(data, options);
                    /*Para hacerlo responsive: http://stackoverflow.com/a/18984903/1883256*/
                    function resizeHandler () {
                        chart.draw(data, options);
                    }
                    if (window.addEventListener) {
                        window.addEventListener('resize', resizeHandler, false);
                    }
                    else if (window.attachEvent) {
                        window.attachEvent('onresize', resizeHandler);
                    }  

                }/*Fin de la función drawChart()*/
        </script>

但从未显示 2013 年的图表。 :/

在这种情况下，我得到两年:2013 年和 2014 年。但是，在控制台日志消息中，我看到它通过替换为去年来覆盖 2013 年，因此消息是:

First, the year value is 2013
stats:273 After calling the setOnLoadCallback() function, the year value is 2013
stats:274 we are about to call the drawChart() function ... YEAR: 2013
stats:280 First, the year value is 2014
stats:286 After calling the setOnLoadCallback() function, the year value is 2014
stats:287 we are about to call the drawChart() function ... YEAR: 2014
**stats:290 Inside the function. Current year value is: 2014**
stats:290 Inside the function. Current year value is: 2014

2013的值被2014覆盖了，为什么会这样？我该如何解决这个问题？

Answer 1

在您的代码中，您已经定义了 draw_chart 函数两次。相反，您应该定义它一次，然后在 2013 年和 2014 年使用不同的参数调用它两次。

您的第二个脚本标签包含 2014 年图表的代码，覆盖 2013 年，因此它只显示 2014 年