[英]Why is google chart function not being called when it's inside a function?
I'm trying to make my google chart show once they click on a tab link, but google charts doesn't show. 我想让我的Google图表显示在他们点击标签链接后,但Google图表不显示。
I included the google charts code inside ChartlyDaily
. 我在
ChartlyDaily
包含了Google图表代码。 When it's outside the ChartDaily
function it works , but inside it doesn't. 当它在
ChartDaily
函数外部时,它可以工作,但在内部它却不能。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function ChartDaily(){
google.setOnLoadCallback(drawChartDaily);
function drawChartDaily() {
var chart_data = ['3',7];
alert(chart_data);
var data = google.visualization.arrayToDataTable([
['Scoring Activity', 'Points given'], chart_data]);
var options = {
title: 'Semis overall scoring activity'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
jQuery(document).ready(function() {
$('#tabs > div').hide();
$('#tabs div:first').fadeIn('slow');
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li.active').removeClass('active'); // <== Only what you need
$(this).parent().addClass('active');
var selectedTab=$(this).attr('href');
$('#tabs > div').fadeOut('slow', function() { // <== Use a callback
$(selectedTab).delay(10).fadeIn('fast'); // <== add a delay
});
return false;
});
$('#menu_tab1').click(function(){
ChartDaily(); // supposed to show the chart
});
$('#menu_tab2').click(function(){
alert('tab-2 got clicked!!');
});
$('#menu_tab3').click(function(){
alert('tab-3 got clicked!!');
});
$('#menu_tab4').click(function(){
alert('tab-4 got clicked!!');
});
});
</script>
<div id="chart_div" style=" margin-left:-280px;width: 800px; height: 500px;"></div>
Here's something to start over from. 从这里开始。
function GoogleChart() {
this.chart_data = ['3',7];
this.data_table = google.visualization.arrayToDataTable([['Scoring Activity', 'Points given'], chart_data]);
this.options = {
title: 'Semis overall scoring activity'
};
this.chart = new google.visualization.PieChart(document.getElementById('chart_div'));
}
GoogleChart.prototype.drawChartDaily = function () {
this.chart.draw(this.data_table, this.options);
};
$(function () {
function myOnLoadCallback() {
var googleChart = new GoogleChart();
$('#menu_tab1').click(function(){
googleChart.drawChartDaily();
});
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(myOnLoadCallback);
});
Edit: Changed to a non-tested example. 编辑:更改为未经测试的示例。
The Google loader has issues being called from inside other functions, so it's best to let it run by itself. Google加载程序存在从其他函数内部调用的问题,因此最好让它自己运行。 Try something like this:
尝试这样的事情:
function ChartDaily () {
var chart_data = ['3',7];
var data = google.visualization.arrayToDataTable([
['Scoring Activity', 'Points given'],
chart_data
]);
var options = {
title: 'Semis overall scoring activity'
};
var chart = new oogle.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function init () {
$('#menu_tab1').click(function(){
ChartDaily();
});
}
google.load("visualization", "1", {packages:["corechart"], callback: init});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.