我想根据响应制作多条形图。在这里，我想制作 4 个图表，但应用程序中只显示一个图表。但是循环运行四次，只看到一个图形。谁能告诉我为什么这个图是一次性获得的？下面是我的代码。控制台打印从 0 到 4 的值，但图形只看到一个。仅给出 4 个供参考。总计数是动态的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>jQuery Shield UI Demos</title>
<link id="themecss" rel="stylesheet" type="text/css"
href="//www.shieldui.com/shared/components/latest/css/light/all.min.css"/>
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
</head>
<body class="theme-light">
<div class="test">
<div style="width: 270px; margin-left: auto; margin-right: auto; height: 100px;" id="sparkLine"></div>
</div>
<script type="text/javascript">
$(function () {
//find the tota number of categories from the repons
var totalCount = 4;
var categoryName = ["Asthama","HTB","Cold","diarrohea"]
for(i=0;i<= totalCount;i++){
console.log("I am called"+i+"times")
$("#sparkLine").append().shieldChart({
theme: "light",
chartAreaPaddingTop: -7,
chartLegend: {
enabled: true,
title:categoryName[i]
},
seriesSettings: {
bar: {
activeSettings: {
pointHoveredState: {
enabled: false
}
},
pointMark: {
enabled: false
}
}
},
axisX: {
axisTickText: {
enabled: false
},
plotStripWidth: 0,
drawWidth: 0,
ticksWidth: 0,
ticksHeight: 0
},
axisY: {
axisTickText: {
enabled: false
},
plotStripWidth: 0,
drawWidth: 0,
ticksWidth: 0
},
dataSeries: [{
seriesType: "bar",
data: [2000, 2100, 1900, 1700, 1000, 500, 700, 120, 4000, 3100, 3200, 3700, 300, 200, 700, 900, 1700, 700, 800]
}]
});
};
});
</script>
</body>
</html>
对于不同的地图，需要使用不同的 id。
$("#sparkLine"+i).append().shieldChart({
在 JS 中动态添加的 HTML
for(i=0;i< totalCount;i++){
finalOutput = finalOutput + '<div style="width: 270px; margin-left: auto; margin-right: auto; height: 100px;" id="sparkLine'+ i +'"></div>';
document.getElementById("graph123").innerHTML = finalOutput;
}
检查此链接 提琴手