Javascript 我现有项目中的Google图表HTML页面集成不起作用
我有一个谷歌图表HTML页面，每当我单独修改它时，它都能很好地绘制图表。 第页的代码如下Javascript 我现有项目中的Google图表HTML页面集成不起作用,javascript,jquery,html,google-visualization,Javascript,Jquery,Html,Google Visualization,我有一个谷歌图表HTML页面，每当我单独修改它时，它都能很好地绘制图表。 第页的代码如下 <!doctype html> <html lang='en'> <head> <!-- Required meta tags --> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-s
<!doctype html>
<html lang='en'>
<head>
<!-- Required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<title>Value IQ</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700&display=swap' rel='stylesheet'>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<!-- detail section start -->
<section class='section-padding'>
<div class='container'>
<div class='row'>
<div class='col-12'>
<div>
<h2 class='text-blue main-title'>Current v/s Previous year selling</h2>
</div>
</div>
</div>
<div class='row'>
<div class='col-lg-12'>
<!-- start:: Chart card -->
<div class='card-blk chart-card d-flex flex-column'>
<div class='card flex-grow-3'>
<div class='card-title'>
<h6 class='text-center'>
Customers
</h6>
</div>
<div class='card-content text-center'>
<div id='chartElement3'>
<script type='text/javascript'>
google.charts.load('current', {
callback: drawElement3Dashboard,
'packages':['corechart', 'controls']
});
function drawElement3Dashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string','customer_profile_value');
data.addColumn('number','Current Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number','Last year Turnover');
data.addColumn({type:'string', role:'annotation'});
data.addRows([['A+',19.9, '19.9', 18.2, '18.2'],['A',5.5, '5.5', 5.4, '5.4'],['B',2.4, '2.4', 2.3, '2.3'],['C',1.0, '1.0', 1.0, '1.0'],['C-',0.3, '0.3', 0.3, '0.3']]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_3'));
var controller = new google.visualization.ControlWrapper({'controlType': 'NumberRangeFilter','containerId': 'filter_div_3','options': {'filterColumnLabel':'Current Turnover'}});
var colChart = new google.visualization.ChartWrapper({'chartType': 'ColumnChart','containerId': 'chart_div_3',
'options': {
'height': 300,
'annotations': {'alwaysOutside': 'null','highContrast': 'true','textStyle': {'fontName': 'Times-Roman','fontSize': 9,'color': '#000000','opacity': 1}},
'legend' :{'position' :'bottom','alignment' :'center','element_legend_text' :'',},
'colors' :['#65A1DD','#9FC2EA','#919191','#CBCBCB','#E0E0E0','#717171','#C2D8F1'],
'enableInteractivity' :'true',
'forceIFrame' :'false',
'reverseCategories' :'false',
'tooltip' :'',
'slices' :'10',
'animation': { 'duration' :'2000',
'easing' :'linear',
'startup' :'true',
'alwaysOutside' :'',},
'bar': { 'groupWidth' :'61.8%',},
'hAxis': { 'direction':'1','format' :'short','gridlines': { 'count' :'-1','units' :'',},'logScale ':'false','scaleType' :'','textPosition' :'out','title' :'',},
'isStacked' :'false',
'orientation' :'horizontal',
'vAxis': { 'direction' :'1','format' :'short','gridlines': { 'count' :'4','units' :'',},'logScale' :'false','scaleType' :'','textPosition' :'out','title' :'','viewWindow':{'min':'0',}}
}});
dashboard.bind(controller, colChart);
dashboard.draw(data);
}
</script>
<div id='dashboard_div_3'>
<div id='filter_div_3' style='display: none;'></div>
<div id='chart_div_3'>
</div>
</div>
</div>
</div>
</div>
<h6 class='card-subtitle'>
User: Company name
</h6>
</div>
<!-- end:: Chart card -->
</div>
</div>
<!-- Start:: Copyright and page text -->
<div class='row mt-auto pt-3'>
<div class='col-12'>
<div class='copyright-text d-flex justify-content-between'>
<span>Company Name</span>
<span>Page 1</span>
</div>
</div>
</div>
<!-- End:: Copyright and page text -->
</div>
</section>
<!-- detail section end -->
</body>
</html>
价值智商
当前v/s上一年的销售额
客户
load（'current'，{
回拨：抽屉门3仪表板，
“包”：[“核心图表”，“控件”]
});
函数drawerElement3DAshboard（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'customer_profile_value'）；
data.addColumn（'编号'，'当前营业额'）；
addColumn（{type:'string'，role:'annotation'}）；
data.addColumn（“数字”，“去年营业额”）；
addColumn（{type:'string'，role:'annotation'}）；
addRows（['A+'，19.9'，19.9'，18.2'，18.2'，['A'，5.5'，5.4'，5.4'，5.4'，2.4'，2.4'，2.3'，2.3'，2.3'，1.0'，1.0'，1.0'，1.0'，['C-'，0.3'，0.3'，0.3']）；
var dashboard=new google.visualization.dashboard（document.getElementById（'dashboard_div_3'）；
var controller=new google.visualization.ControlWrapper（{'controlType'：'NumberRangeFilter'，'containerId'：'filter\u div\u 3'，'options'：{'filterColumnLabel'：'Current Revolution'}）；
var colChart=new google.visualization.ChartWrapper（{'chartType'：'ColumnChart'，'containerId'：'chart\u div\u 3'，
“选项”：{
‘高度’：300，
“注解”：{'alwaysOutside'：'null'，'highContrast'：'true'，'textStyle'：{'fontName'：'Times Roman'，'fontSize'：9，'color'：'#000000'，'opacity'：1}，
'图例'：{'position'：'bottom'，'alignment'：'center'，'element_legend_text'：''，}，
“颜色”：[“#65A1DD”、“#9FC2EA”、“#9191”、“#CBCB”、“#E0E0E0”、“#7171”、“#C2D8F1”]，
“enableInteractivity”：“true”，
“forceIFrame”：“false”，
“反向分类”：“假”，
“工具提示”：“，
“切片”：“10”，
‘动画’：{‘持续时间’：‘2000’，
“缓和”：“线性”，
'startup'：'true'，
'alwaysOutside'：''，}，
'bar'：{'groupWidth'：'61.8%，}，
'hAxis'：{'direction'：'1'，'format'：'short'，'gridlines'：{'count'：'-1'，'units'：''，}，'logScale'：'false'，'scaleType'：''，'textPosition'：'out'，'title'：''，}，
'isStacked'：'false'，
“方向”：“水平”，
“vAxis”：{‘方向’：‘1’，‘格式’：‘短’，‘网格线’：{‘计数’：‘4’，‘单位’：''，}，'logScale'：'false'，'scaleType'：''，'textPosition'：'out'，'title'：''，'viewWindow'：{'min'：'0'，}
}});
dashboard.bind（控制器、colChart）；
仪表盘.绘图（数据）；
}
用户：公司名称
公司名称
第1页
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
伙计们，这可能是什么原因呢？你能把这个添加到你的代码中吗 您可以将回调直接放在load语句中，并且可以依靠回调来知道页面何时准备就绪
google.charts.load('current', {
callback: drawElement3Dashboard,
'packages':['corechart', 'controls']
});
通过分离javascript和html来检查这一点
google.charts.load（'current'，{
回拨：抽屉门3仪表板，
“包”：[“核心图表”，“控件”]
});
函数drawerElement3DAshboard（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'customer_profile_value'）；
data.addColumn（'编号'，'当前营业额'）；
addColumn（{type:'string'，role:'annotation'}）；
data.addColumn（“数字”，“去年营业额”）；
addColumn（{type:'string'，role:'annotation'}）；
addRows（['A+'，19.9'，19.9'，18.2'，18.2'，['A'，5.5'，5.4'，5.4'，5.4'，2.4'，2.4'，2.3'，2.3'，2.3'，1.0'，1.0'，1.0'，1.0'，['C-'，0.3'，0.3'，0.3']）；
var dashboard=new google.visualization.dashboard（document.getElementById（'dashboard_div_3'）；
var controller=new google.visualization.ControlWrapper（{'controlType'：'NumberRangeFilter'，'containerId'：'filter\u div\u 3'，'options'：{'filterColumnLabel'：'Current Revolution'}）；
var colChart=new google.visualization.ChartWrapper（{'chartType'：'ColumnChart'，'containerId'：'chart\u div\u 3'，
“选项”：{
‘高度’：300，
“注解”：{'alwaysOutside'：'null'，'highContrast'：'true'，'textStyle'：{'fontName'：'Times Roman'，'fontSize'：9，'color'：'#000000'，'opacity'：1}，
'图例'：{'position'：'bottom'，'alignment'：'center'，'element_legend_text'：''，}，
“颜色”：[“#65A1DD”、“#9FC2EA”、“#9191”、“#CBCB”、“#E0E0E0”、“#7171”、“#C2D8F1”]，
“enableInteractivity”：“true”，
“forceIFrame”：“false”，
“反向分类”：“假”，
“工具提示”：“，
“切片”：“10”，
‘动画’：{‘持续时间’：‘2000’，
“缓和”：“线性”，
'startup'：'true'，
'alwaysOutside'：''，}，
'bar'：{'groupWidth'：'61.8%，}，
'hAxis'：{'direction'：'1'，'format'：'short'，'gridlines'：{'count'：'-1'，'units'：''，}，'logScale'：'false'，'scaleType'：''，'textPosi'