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

Question

I have below code in order for me to create multiple highchart:

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

I have apply this on my above code How to make multiple charts using highcharts in a loop? , but this code only able to print the last chart, how to make my output that can print out all the highchart?

Answer 1

One of the reasons it is not working is that you had not added the code in an anonymous function. Other was that you had added document.ready code in for loop of non document.ready codes. This makes the code skip the execution until document is 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>