我有一个显示谷歌图表的功能。我想显示存储在数据库中的每一年的图表。 几个小时以来我一直困扰的问题是，例如，变量
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覆盖了，为什么会这样？ 我该如何解决这个问题？
最佳答案
在您的代码中，您已经定义了 draw_chart 函数两次。相反，您应该定义它一次，然后在 2013 年和 2014 年使用不同的参数调用它两次。
您的第二个脚本标签包含 2014 年图表的代码，覆盖 2013 年，因此它只显示 2014 年
关于Javascript 变量坚持使用最后一个值覆盖第一个值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30986636/