我正在尝试在动态创建的 div 内绘制图形。从后端传递一串 HTML div,然后将其附加到comparison_widgets
div。然后调用一个函数,该函数需要在该 div 内绘制一个图形(Highcharts)。
但是当它进入功能时,它会说
Error: Syntax error, unrecognized expression: #id_Asia/Pacific_NorthAmerica
throw new Error( "Syntax error, unrecognized expression: " + msg );
我猜它无法找到id。我哪里错了?
这里 result[1] 是div 字符串,即
<div id="widget_Asia/Pacific_NorthAmerica" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-corner-all">
<span class="close right">x</span>
Asia / Pacific_North America
</div>
<div id="id_Asia/Pacific_NorthAmerica" class="portlet-content"></div>
</div>
结果[2]是id_Asia/Pacific_NorthAmerica
而result[0]是需要在图上绘制的数据。
AJAX 函数
$.ajax({
dataType : "json",
type: "POST",
url: "/dashboard/",
data : { 'comparison_widget_id' : comparison_widget_id,'level_id':level_id, },
success: function(result){
$("#comparison_widgets").append(result[1]);
var div_id = "id_"+result[2];
comparison_chart(div_id,result[0]);
}
});
function comparison_chart(div_id,result) {
var MAXPOINTS = 20;
var level_number = 0;
Highcharts.setOptions({
global: {
useUTC: false,
}
});
$("#"+div_id).highcharts({
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
if(series.data.length > MAXPOINTS){
series.addPoint([x, y], true, true);
}
else{
series.addPoint([x, y], true, false);
}
},5000);
},
}
},
title: {
text: 'Energy Chart'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
tooltip: {
formatter: function() {
var s;
s = this.y + 'kWh';
return s;
}
},
series: [{
type: 'spline',
name: 'Live Data',
data: result[0],
showInLegend: true,
}, {
type: 'pie',
data: result[2],
center: [90, 20],
size: 125,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: false,
},
point :{
events:{
click : function(){
level_number = level_number + 1;
$.ajax({
dataType: "json",
type : 'POST',
url : '/dashboard/',
data : {'name': this.name, 'level_number' : level_number},
success: function(result){
comparison_chart(result);
}
});
}
}
},
}]
});
}