le graphique.renderTo ne fonctionne pas

Je suis en train de créer dynamiquement highcharts sur la même page dans un bootstrap carrousel.

J'ai une fonction "createChart" comme ceci:

createChart(questiontitle, answers);

function createChart(questiontitle, answers){
    chart = new Highcharts.Chart(options); //Create new chart with general options
    chart.renderTo(container);
    for (var i = 0; i < answers.length; i++) {
        categories.push(answers[i].Text);
    }
    console.log(categories);
    chart.xAxis[0].setCategories(categories);
    chart.setTitle({ text: 'eerzera' });
    //redraw chart
    chart.redraw();
}

J'ai un div comme ceci:

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Comme vous pouvez le voir j'ai "graphique.renderTo" mais je reçois toujours le même message d'erreur:

Highcharts Erreur #13

Rendu div pas trouvé

Cette erreur se produit si le graphique.renderTo option est misconfugured donc
que Highcharts est impossible de trouver l'élément HTML pour rendre le graphique
dans.

Ma variable options est comme ceci:

var options = {
chart: {
type: 'bar'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
}

Comment est-ce possible?

OriginalL'auteur nielsv | 2013-09-11

  1. 6

    Si votre objectif est de maintenir cette dynamique, en étant capable de créer plusieurs tableaux avec plusieurs renderTo mais en utilisant les mêmes options, vous pouvez le faire comme ceci:

    changement 

    function createChart(questiontitle, answers){
chart = new Highcharts.Chart(options); 
chart.renderTo(container);

    :

    function createChart(questiontitle, answers){
chart = $('#container').highcharts(options);

    ou, si ce n'est à l'aide de jQuery, 

    function createChart(questiontitle, answers){
options.chart.renderTo = 'container';
chart = new Highcharts.Chart(options);
    Merci pour la solution parfaite!

    OriginalL'auteur jlbriggs

  2. 4

    Quelque chose comme ceci: chart.renderTo(container); n'existe pas dans Highcharts.

    Pour définir renderTo options d'utilisation:

    var options = {
chart: {
type: 'bar',
renderTo: 'container'
},

    OriginalL'auteur Paweł Fus

  3. 3

    Au cas où quelqu'un tombe sur ce pendant Googler, lorsque vous spécifique de l'élément dans renderTo, vous ne devriez pas inclure le # si cet élément est une pièce d'identité.

    Si vous avez cet élément <div id="graph-container"></div>

    D'échec:
    renderTo: '#graph-container'

    Cela fonctionne:
    renderTo: 'graph-container'

    Référence à la Highcharts docs

    OriginalL'auteur NLF

  4. 0

    Vous pouvez être confrontés au même problème que j'ai été.
    Essayez de mettre votre highchart script droit après le div de la déclaration, tout comme dans l'exemple ci-dessous de sorte qu'il peut reconnaître votre div id:

    <head>
<title>HighCharts :D</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto">
</div>
<script type="text/javascript">
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
myChart.renderTo('container');
</script>
</body>

    OriginalL'auteur Taua Negri