Javascript 制作多个迷你条形图_Javascript

Javascript 制作多个迷你条形图

javascript

Javascript 制作多个迷你条形图,javascript,Javascript,我想根据回复制作一个多重条形图。在这里，我想制作4个图表，但应用程序中只显示一个图表。但是循环运行了四次，只看到一张图。有人能告诉我为什么这张图是一次得到的吗？下面是我的代码。控制台打印从0到4的值，但图形仅显示一个。仅供参考，仅给出4。totalCount是动态的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>jQu

我想根据回复制作一个多重条形图。在这里，我想制作4个图表，但应用程序中只显示一个图表。但是循环运行了四次，只看到一张图。有人能告诉我为什么这张图是一次得到的吗？下面是我的代码。控制台打印从0到4的值，但图形仅显示一个。仅供参考，仅给出4。totalCount是动态的

    <!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>


jQueryShieldUI演示
$（函数（）{
//从报告中查找总分类数
var totalCount=4；
变量categoryName=[“哮喘”、“HTB”、“感冒”、“腹泻”]
对于（i=0；i对于不同的map，您需要使用不同的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;
}

for（i=0；i

检查此链接
4不是静态值，可以是任何数字。仅供参考，我提供了4。可以吗？或者你想要任何曲调？@jennysam