javascript - カルーセルの読み込み中に複数のハイチャートでエラーが発生しました

Question

ブートストラップ カルーセルに複数のグラフを読み込んでいますが、常に次のハイチャート エラーが発生します。

ハイチャート エラー #16

ページで既に定義されているハイチャート

このエラーは、Highcharts または Highstock が同じページに 2 回読み込まれたときに発生するため、Highcharts 名前空間は既に定義されています。Highcharts.Chart コンストラクターと Highcharts のすべての機能が Highstock に含まれていることに注意してください。したがって、Chart と StockChart を組み合わせて実行している場合は、highstock.js ファイルをロードするだけで済みます。

これは私がhtmlで行うことです:

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <?php for ($i = 1; $i <= $numquestions; $i++) { ?>
                    <div class="item">
                        <h2><?php echo "de titel van de question"; ?></h2>
                        <div id=<?php echo "container" . $i; ?>></div>
                    </div>
        <?php
        } ?>

    </div>
    <!-- Controls (CHECK ICONS) -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">&laquo;</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">&raquo;</a>
</div>

カルーセルに多数のアイテムを作成します。

私のJavaScript：

<script type="text/javascript">
var categories = new Array();
var data = new Array();
var chart;

var questionsandanswers = <?php echo json_encode($questionandanswers); ?>;

for (var i = 0; i < questionsandanswers.length; i++) {
    questiontitle = "";
    answers = "";

    // Loop through questions
    var questiontitle = questionsandanswers[i].Text;
    var answers = questionsandanswers[i]['0'];

    createChart(i, questiontitle, answers);
}

// Create the Charts
function createChart(i, questiontitle, answers){
    chart="";
    i++;
    // CHART OPTIONS
    var options = {
        chart: {
            type: 'bar',
            renderTo: 'container' + i
        },

        xAxis: {
            categories: '',

            title: {
                text: null
            }
        },

        yAxis: {
            min: 0,

            title: {
                text: 'Aantal keer gekozen',
                align: 'high'
            },

            labels: {
                overflow: 'justify'
            }
        },

        tooltip: {
            //valueSuffix: ' aantal keer gekozen'
        },

        plotOptions: {
             bar: {
                dataLabels: {
                    enabled: true,
                    color: 'black',
                    formatter: function() {
                        if (this.y === 0) {
                            return null;
                        } else {
                            return this.y;
                        }
                    }
                },

                stacking: 'normal'
            }
        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },

        credits: {
             enabled: false
        },

        series: []
    }

    chart = new Highcharts.Chart(options); // Create new chart with general options

    for (var i = 0; i < answers.length; i++) {
        // add answers to categories array
        categories.push(answers[i].Text);
        data.push(answers[i]['0']);
    }

    // add categories to x-axis
    chart.xAxis[0].setCategories(categories);

    chart.addSeries({data:data,name:'Aantal keer gekozen'},false);
    chart.setTitle({ text: questiontitle });

    // redraw chart
    chart.redraw();
    categories = Array();
    data = Array();
}

</script>

ご覧のとおり、グラフを別のコンテナーに追加しましたが、それでもエラーが発生します。同じページに複数のハイチャートを追加することはわかっていますが、... . そのエラーが発生しないようにするにはどうすればよいですか?