在轮播中加载多个 highcharts 时出错

Question

我在引导轮播中加载多个图表，但我总是收到以下 highcharts 错误：

Highcharts 错误 #16

页面中已经定义了Highcharts

此错误在第二次加载 Highcharts 或 Highstock 时发生 在同一页面中，因此已经定义了 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>

如您所见，我将图表添加到不同的容器中，但仍然出现错误。我知道我在同一页面中添加了多个 highcharts，但我需要......如果我没有收到该错误，我该如何解决？

Answer 1

在我看来，我已经在我的常规布局脚本中加载了 highcharts javascript。这给了我一个错误，即我的页面中已经定义了 highcharts ...。愚蠢的错误！