Question

我在bootstrap轮播中加载了多个图表，但我总是得到以下highcharts错误：

Highcharts Error＃16

页面中已定义的Highcharts

第二次加载Highcharts或Highstock时会发生此错误   在同一页面中，因此已经定义了Highcharts命名空间。保持   记住Highcharts.Chart构造函数和所有功能   Highstock包含在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>

正如您所看到的，我将图表添加到不同的容器中，但仍然出现错误。我知道我在同一页面添加了多个高级图表，但我需要...。我怎么能解决这个问题，我没有得到那个错误？

Answer 1

我已经在我的常规布局脚本中加载了highcharts javascript，就像在我的视图中一样。这给了我错误，高页已经在我的页面中定义....愚蠢的错误！

在carousel中加载时出错多个highcharts

1 个答案: