javascript chart.renderTo 不起作用

chart.renderTo doesn't work

提问by nielsv

I'm trying to dynamically create highcharts on the same page in a bootstrap carousel.

我正在尝试在引导轮播中的同一页面上动态创建 highcharts。

I have a function "createChart" like this:

我有一个像这样的函数“createChart”：

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

I have a div like this:

我有一个这样的 div：

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

As you can see I have "chart.renderTo" but I always get the same error:

正如你所看到的，我有“chart.renderTo”，但我总是得到同样的错误：

Highcharts Error #13

Rendering div not found

This error occurs if the chart.renderTo option is misconfugured so that Highcharts is unable to find the HTML element to render the chart in.

Highcharts 错误 #13

未找到渲染 div

如果 chart.renderTo 选项配置错误，导致 Highcharts 无法找到 HTML 元素来呈现图表，则会发生此错误。

My variable options is like this:

我的变量选项是这样的：

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

How is this possible?

这怎么可能？

回答by jlbriggs

If your goal is to keep this dynamic, by being able to build multiple charts with multiple renderTo's but using the same options, you can do it like this:

如果您的目标是保持这种动态，通过能够使用多个 renderTo 构建多个图表但使用相同的选项，您可以这样做：

change

改变

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

to:

到：

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

or, if not using jQuery,

或者，如果不使用 jQuery，

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

回答by Pawe? Fus

Something like this: chart.renderTo(container);doesn't exists in Highcharts.

像这样的东西：chart.renderTo(container);Highcharts 中不存在。

To set renderTouse options:

设置renderTo使用选项：

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

回答by NLF

In case someone stumbles on this while Googling, when you specific the element in renderTo, you shouldn't include the #if that element is an ID.

万一有人在谷歌搜索时偶然发现了这一点，当你在 中指定元素时renderTo，你不应该包含#如果该元素是一个 ID。

If you have this element <div id="graph-container"></div>

如果你有这个元素 <div id="graph-container"></div>

This fails: renderTo: '#graph-container'

这失败了： renderTo: '#graph-container'

This works: renderTo: 'graph-container'

这有效： renderTo: 'graph-container'

Reference to the Highcharts docs

参考 Highcharts 文档

回答by Taua Negri

You may be facing the same problem that i was. Try to put your highchart script right after your div's declaration just like in the example bellow so it can recognize your div's id:

你可能面临和我一样的问题。尝试将您的 highchart 脚本放在您的 div 声明之后，就像下面的示例一样，以便它可以识别您的 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>