Question

我想根据回答制作多个条形图。在这里，我想制作4个图表，但应用程序中仅显示一个图表。但是循环运行了四次，只看到一个图，谁能告诉我为什么这个图是一次获得的？下面是我的代码。控制台打印从0到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>

Answer 1

对于不同的地图，您需要使用不同的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;
}

检查此链接fiddler

制作多个sparkLine条形图

1 个答案: