0

我在引导轮播中加载多个图表，但总是出现以下 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，但我需要...... 我怎样才能解决这个问题，我没有得到那个错误？

4

1 回答 1

0

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

于 2013-09-11T18:40:46.387 回答