只能加载一张图表
Only can load one Zingchart
我有一个问题,我只能加载1 zingchart在我的网页,即使我有2个图表的代码。
代码将只生成最新的图表,在本例中是饼图,而忽略条形图。
下面是我的代码
<?php
//getDBConnect function
require 'dbconnect.php';
//Get ID from form
$id = $_GET['staffid'];
//connect to database
$con = getDBConnect();
if(!mysqli_connect_errno($con)){
$sqlQueryStr =
"SELECT a.ai_Name, r.duration " .
"FROM report AS r, academicinstitution AS a " .
"WHERE r.ai_Id = a.ai_Id ";
$result = mysqli_query($con,$sqlQueryStr);
mysqli_close($con);
} else {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
//Get data into array
$emparray = array();
while ($row = mysqli_fetch_assoc($result)) {
$emparray[] = $row;
}
//Group array by ai_Name
$grouparray = array();
foreach($emparray as $item)
{
if(!isset($grouparray[$item["ai_Name"]]))
$grouparray[$item["ai_Name"]] = 0;
$grouparray[$item["ai_Name"]] += $item["duration"];
}
?>
<script>
var dataBar=[
<?php
foreach($grouparray as $keys => $value){
echo $value. ",";
}
?>];
window.onload=function(){
zingchart.render({
id:'chartBar',
height:400,
width:600,
data:{
"graphset":[
{
"type":"bar",
"title":{"text":"BarChart"},
"series":[
{
"values":dataBar
}
]
}
]
}
});
};
</script>
<script>
var dataPie=[
<?php
foreach($grouparray as $keys => $value){
echo '{';
echo '"text":"'.$keys.'","values":['.$value.']';
echo '},';
}
?>];
window.onload=function(){
zingchart.render({
id:'chartPie',
height:400,
width:600,
data:{
"graphset":[
{
"type":"pie",
"title":{"text":"PieChart"},
"series":dataPie
}
]
}
});
};
</script>
<div id="chartBar"></div>
<div id="chartPie"></div>
我该怎么办?
这里的问题是您为window.onload
事件分配了两个函数。JavaScript只允许在事件触发时调用一个函数。如果您为它分配了多个函数,则最新的赋值将覆盖之前的赋值。这就是为什么你的饼状图是渲染的,而不是条形图。
解决方案是将两个渲染调用都放在window.onload
回调中。
是这样的:
<script>
var dataBar=[
<?php
foreach($grouparray as $keys => $value){
echo $value. ",";
}
?>];
var dataPie=[
<?php
foreach($grouparray as $keys => $value){
echo '{';
echo '"text":"'.$keys.'","values":['.$value.']';
echo '},';
}
?>];
window.onload=function(){
zingchart.render({
id:'chartBar',
height:400,
width:600,
data:{
"graphset":[
{
"type":"bar",
"title":{"text":"BarChart"},
"series":[
{
"values":dataBar
}
]
}
]
}
});
zingchart.render({
id:'chartPie',
height:400,
width:600,
data:{
"graphset":[
{
"type":"pie",
"title":{"text":"PieChart"},
"series":dataPie
}
]
}
});
}
</script>
我是ZingChart团队的。
相关文章:
- 在新表单上使用JavaScript创建多个共享点项目,但将下一页加载延迟到全部创建
- 当一次加载所有文件时,是否有来自阵列的10个随机闪存文件显示在页面上?(在javascript中)
- 使用Ajax和Jquery一次加载100个块的Wordpress帖子
- 一次加载HTML对象并多次使用
- 一次加载网页,而不是分段加载
- 如何仅在每次单击可滚动(jquery工具)中的导航按钮时加载图像,而不是一次加载所有图像
- 获取下一页加载的进度
- 更有效率的是,一次加载所有javascript或根据需要按页面加载它
- 保罗爱尔兰无限滚动一次加载 2 页
- 使用javascript一次加载/取消隐藏一个图像
- 通过导航栏中的单个播放按钮,在电子书中的每一页加载音频文件
- 通过AJAX一次加载两个视频
- Three.js/WebGL一次加载大量纹理数据,操作方法
- 一次加载两个HTML文档(从字符串加载iframe内容)
- 单页网页应用程序;一次加载所有模板
- 一次加载所有模板
- Emberjs:一次加载所有模板
- Jquery分页,不会一次加载所有数据
- 如何使JQuery滑块一次加载元素集
- 进度事件监听器一次加载一个缩略图