chart.renderTo no funciona

Estoy tratando de crear dinámicamente gráficos altos en la misma página en un carrusel de arranque.

Tengo una función "createChart" como esta:

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();
}

Tengo un div como este:

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

Como puede ver, tengo "chart.renderTo" pero siempre obtengo el mismo error:

Highcharts Error #13

Representación div no encontrada

Este error ocurre si la opción chart.renderTo está mal configurada, por lo que Highcharts no puede encontrar el elemento HTML para representar el gráfico.

Mis opciones variables son así:

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]
        }]
    }

¿Cómo es esto posible?

preguntado el 11 de septiembre de 13 a las 14:09

4 Respuestas

Si su objetivo es mantener esta dinámica, al poder crear múltiples gráficos con múltiples renderTo pero usando las mismas opciones, puede hacerlo así:

cambiar

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

a:

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

o, si no usa jQuery,

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

Respondido el 11 de Septiembre de 13 a las 20:09

¡Gracias por la solución perfecta! - nielsv

En caso de que alguien tropiece con esto mientras busca en Google, cuando especifique el elemento en renderTo, no debe incluir el # si ese elemento es un ID.

Si tienes este elemento <div id="graph-container"></div>

Esto falla: renderTo: '#graph-container'

Esto funciona: renderTo: 'graph-container'

Referencia a los documentos de Highcharts

Respondido 08 Feb 14, 21:02

Algo como esto: chart.renderTo(container); no existe en Highcharts.

Para establecer renderTo opciones de uso:

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

Respondido el 11 de Septiembre de 13 a las 14:09

Es posible que esté enfrentando el mismo problema que yo. Intente poner su secuencia de comandos highchart justo después de la declaración de su div, como en el ejemplo a continuación, para que pueda reconocer la identificación de su div:

<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>

respondido 03 mar '17, 13:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.