How can I fix Highcharts error #13?

问题

I use highchart so, the user can close and open the chart page and redraw the chart, in some case give me this error, how can I fix it, Thanks Here is my code

 function populateGraph(graph1data1,graph1data2,id,time,bottomText,tickinterval){
$(function () {
  $('#'+id).highcharts({
      chart: {
          type: 'line'
      },
      xAxis: {
        tickWidth: 0,
        categories: ['1,2,3,4']
      },
      yAxis: {
        gridLineColor: '#fff',
          title: {
              text: ''
          },
          labels: {
              formatter: function() {
                  return '';
              }
          }              
      },
      navigation: {
        buttonOptions: {
            enabled: false
        }
    },
      series: [{
          name: 'This ',
          data: [1,2,3,4],
          color: '#1e71ef'     
      }, {
          name: 'Last ',
          data: [5,6,7,8],
          color:'#dfe0e1'
      }]
  });
});
}
}




       function loadOnlineDashboardChannel(channel){
          $.ajax({
          type: "get",
          dataType: 'html',
          data: {},
          url: "/companies/2/online_dashboard_channel",
          success: function(data, status){ 
          var obj = JSON.parse(data);
          var template_data = { 
            measures_list:   
              obj.measures         
          };
          $(function() { 
        var tmplHTML_measures = '{{#measures_list}} <div class="col-lg-11  col-lg-offset-1"><p class="indicator-title gray-bottom-border">{{name}}</br></p><div><p><span class="font30px">{{total}} </span> Total {{name}}<br><span class="green-text">{{increase}}%</span> from last <span class="metric_time"></span></p></div><div class="graph-header"><h3>{{this_interval}} </h3><p>New {{name}}</p><p class="percentage-graph green-text">{{percentag e}}%<p></div><div id={{graph_id}} class="graph"></div> </div>{{/measures_list}}';   
          Handlebars.render = function(tmpl, data){data = data || {};return                                                       Handlebars.compile(tmpl)(data);};  
      $("#template").empty().append(Handlebars.render(tmplHTML_measures,template_data) );
      var data_graph;
      for ( var i = 0; i < obj.measures.length; i++ ) {
        data_graph=obj.measures[i];
                      populateGraph(data_graph.this_interval_detail,data_graph.last_interval_detail,data_graph.graph_id,time,obj.bottom_graph_text,parseInt($('#timeframe-select').find(":selected").attr('interval')) );
      }              
     })


  },
  error: function(error) {

}
});

return this;
};

I use handlebar so in this part in var tmplHTML_measures I create the div, in the for I call the function to draw the chart.

Thanks, I repeat sometimes it works perfectly and sometimes fail give me the error #13

回答1:

I faced the same error and what I got to know is that Error#13 occurs when HighCharts.js tries to access an element which is not present in the DOM.

How I fixed it? I made sure that the HightCharts method is called only after my targeted element is created in the DOM. Bingo!!!! Everything worked fine.

回答2:

I had the same issue and fixed it using the correct container:

In my case I used the following:

// Use Meteor.defer() to create chart after DOM is ready:
Meteor.defer(function() {
  // Create standard Highcharts chart with options:
  Highcharts.chart('Charts', {
    chart: {
      renderTo: 'container',
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },....
  }.....
}

Template.body.helpers({
  createChart: function () {...}

and in the HTML file:

<div id='Charts'>
    {{createChart}}
</div>

I found the fix from Highcharts: http://forum.highcharts.com/viewtopic.php?f=9&t=15610

Regards.

回答3:

Categories needs to be a collection, it was like this:

categories: xaxis

Change it to this:

categories: ['xaxis']

Some of the data fields need to be enclosed in single quotes like this:

data: 'blue'

Here is a fiddle without any errors for you:

http://jsfiddle.net/MVcBe/

Good luck with the rest. :)

ps I sometimes find it easier to edit a working fiddle from the highcharts site and adapt it to what you need. Like this one:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

回答4:

For me error was resolved when I placed the calling script after the HTML element.

Like;

<div id="container"></div>

<script>    
Highcharts.chart('container', {
// some script here
});
</script>

Also if you check on high chart site it says:

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

https://www.highcharts.com/errors/13

回答5:

Perhaps a bit late to the party, but the default name for the container in Highcharts example was 'container'. The browser didn't seem to like that, name clash perhaps, changing to 'Chart' did the trick.

回答6:

Also, make sure "highcharts-more.js" is declared in your HTML.

<script src="https://code.highcharts.com/highcharts-more.js"></script>

回答7:

I loaded script codes after document ready function, and it worked fine.

$(document).ready(function(){
});

回答8:

I also run into the same error code, but in my case the reason was my data was too large to supported

来源：https://stackoverflow.com/questions/21536233/how-can-i-fix-highcharts-error-13