I'm trying to instantiate a highcharts objects with this code:

$(function () {

var chart;

var json = null;

$.getJSON('{% url ajax_search 'pie_chart' %}?{{request.META.QUERY_STRING}}',

function(data, textStatus, jqXHR)

{

json = data.template;

console.log(json);

chart = new Highcharts.Chart(json);

});

})

The console logs the returned json appropriately.

When I copy and past in the json to where the (json) is, the chart renders. However, as it is now, it throws the following error: Uncaught Highcharts error #13: www.highcharts.com/errors/13

Following that link it says:

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

However, again, if I copy and past the json (from the console) to where the variable would otherwise be, it works fine.

I'm sure this is something simple. What am I doing wrong here?

解决方案

The element/div you are trying to render the chart to is missing,

can you share the json that is printed in the console? Additionaly, if you can add the following more logs to give us a better understanding of the picture.

A standard set of logs that I would use to troubleshoot highcharts error #13 are

console.log("JSON: " + JSON.stringify(chartingOptions));

console.log("Render to element with ID : " + chartingOptions.chart.renderTo);

console.log("Number of matching dom elements : " + $("#" + chartingOptions.chart.renderTo).length);

These should be added just before calling the Highcharts constructor

chart = new Highcharts.Chart(chartingOptions);

If all is well you should see the correct element ID, and length as 1.

Here is the log that is seen for the demo above

JSON: {"chart":{"renderTo":"container"...}}

Render to element with ID : container

Number of matching dom elements : 1