我正在尝试在同一页面中添加谷歌柱形图,然后添加谷歌表格图表。添加柱形图时,它可以正常工作,但只要我添加表格图表,我就会在谷歌列图表的代码中出现错误。错误是: 您使用错误的数据类型而不是DataTable或DataView调用draw()方法。
有趣的是,当我删除提供Google Table图表所需的javascript文件链接的行时,此错误消失了。该行是:
以下是我的代码,有人可以帮我解决如何在同一页面添加Google柱形图和Google桌面图表的解决方案吗?
mqtt = new MqttAndroidClient(
MainActivity.this,
"tcp://<org-id>.messaging.internetofthings.ibmcloud.com:1883",
"d:<org-id>:MQTTdevices:watson-android"
);
MqttConnectOptions options = new MqttConnectOptions();
options.setCleanSession(true);
options.setUserName("use-token-auth");
options.setPassword("<token>".toCharArray());
Log.i(TAG, "attempting connection");
try {
mqtt.connect(options, new IMqttActionListener() {
@Override
public void onSuccess(IMqttToken asyncActionToken) {
Log.i(TAG, "connected to mqtt");
isconneted = true;
}
@Override
public void onFailure(IMqttToken asyncActionToken, Throwable e) {
Log.e(TAG, "mqtt connect failed", e);
isconneted = false;
}
});
} catch (MqttException e) {
Log.e(TAG, "mqtt connect failed", e);
}
答案 0 :(得分:0)
google
加载次数太多。
google.load
和google.setOnLoadCallback
只应调用一次。
材料列图表和表格图表所需的包是bar
和table
。
在这里,我删除了两个autoload
脚本,并在柱形图后绘制了表格图表。
另外,我建议将<script>
标记添加到<head>
或<body>
。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MyTitle</title>
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar", "table"]});
google.setOnLoadCallback(drawChart1);
function drawChart1() {
var abc = $.ajax({url:'kpi24.php',async:false,dataType:"json",}).responseText;
var data = new google.visualization.DataTable(abc);
var options = {
chart: {
title: '',
subtitle: '',
},
bars: 'vertical',
vAxis: {format: 'percent'},
legend: { position: 'right', maxLines: 3 },
colors: ['#20488D', '#EA922B']
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
// draw table chart
drawTable();
}
</script>
<script type="text/javascript">
function drawTable() {
var abcnew = $.ajax({url:'kpi26.php',async:false,dataType:"json",}).responseText;
var datanew = new google.visualization.DataTable(abcnew);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(datanew, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
</head>