chart.renderTo не работает

Я пытаюсь динамически создавать высококачественные диаграммы на одной странице в карусели бутстрапа.
chart.renderTo не работает

У меня есть функция "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(); 
}

У меня есть DIV так:

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

Как вы можете видеть, у меня есть "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.

Мои различные опции, как это:

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

Как это возможно?

источник

2013-09-11 nielsv

Если ваша цель состоит в том, чтобы сохранить эту динамику, будучи в состоянии построить несколько графиков с несколькими renderTo годов, но используя те же параметры, которые вы можете сделать это следующим образом:

изменение

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

к:

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

или, если не с помощью JQuery,

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

источник

2013-09-11 19:05:55 jlbriggs

Спасибо за отличное решение! – nielsv

Что-то вроде этого: chart.renderTo(container); не существует в Highcharts.

Чтобы установить renderTo варианты использования:

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

источник

2013-09-11 13:22:33

В случае, если кто натыкается на это время погуглить, когда конкретный элемент в renderTo, вы не должны включать в себя #, если этот элемент является идентификатором.

Если у вас есть этот элемент <div id="graph-container"></div>

Это не удается: renderTo: '#graph-container'

Это работает: renderTo: 'graph-container'

Reference to the Highcharts docs

источник

2014-02-08 21:51:44 NLF

Вы можете столкнуться с той же проблемой, что я был. Попробуйте поставить highchart скрипт сразу после заявления вашего Div точно так же как в примере ниже, чтобы он мог распознать идентификатор вашего 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>

источник

2017-03-03 13:04:54

chart.renderTo не работает

ответ

Смежные вопросы