如何使用for循环在HTML页面中创建多个高图和打印?

时间:2017-05-11 05:34:21

标签: javascript highcharts

我有以下代码,以便我创建多个高级图:

<script type='text/javascript'>
for(v=1;v<{{ uniindicatorproduct|safe }}+1;v++) {
    var container = "#container"+v;
    $(document).ready(function () {
       var title = { text: '{{ title|safe }}' };
        var xAxis = {categories: {{ t|safe }}, };
        var yAxis = {title: {text: ' '}, };
        var array ={{ y|safe }}
        var series = [],
            i = 0;
        var a = {{ x|safe }}
            lena = a.length
        for (i; i < lena; i++) {
            series.push({
                name: [a[i]],
                data: array[i]
            });
        }
        var json = {};
        .....
        $(container).highcharts(json);
    });
}
</script>

我已将此应用于上面的代码How to make multiple charts using highcharts in a loop?,但此代码只能打印最后一个图表,如何使我的输出可以打印出所有的高图?

1 个答案:

答案 0 :(得分:1)

它无法正常工作的原因之一是您没有在匿名函数中添加代码。其他原因是您在非document.ready代码的for循环中添加了document.ready代码。这使得代码跳过执行,直到文档准备就绪。

<script type='text/javascript'>
    $(document).ready(function () {
        function createElem() {
            for(v=1;v<{{ uniindicatorproduct|safe }}+1;v++) {
                var container = "#container"+v;
                var title = { text: '{{ title|safe }}' };
                var xAxis = {categories: {{ t|safe }}, };
                var yAxis = {title: {text: ' '}, };
                var array ={{ y|safe }}
                var series = [],
                    i = 0;
                var a = {{ x|safe }}
                    lena = a.length
                for (i; i < lena; i++) {
                    series.push({
                        name: [a[i]],
                        data: array[i]
                    });
                }
                var json = {};
                .....
                $(container).highcharts(json);
            }
        }

        //Call the above function once html is ready
        createElem();
    });
</script>