如何使用for循环创建多个highchart并在HTML页面中打印？答案

【问题标题】：How to create multiple highchart and print in HTML page by using for loop?如何使用for循环创建多个highchart并在HTML页面中打印？
【发布时间】：2017-05-11 13:44:03
【问题描述】：

我有以下代码可以创建多个高图：

<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?上应用了这个，但是这个代码只能打印最后一个图表，如何让我的输出可以打印出所有的高图？

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

它不起作用的原因之一是您没有在匿名函数中添加代码。另一个是您在非document.ready 代码的循环中添加了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>

【讨论】：

谢谢，我明白了