0
我不是最好的JavaScript，我一直在遇到一些麻煩。任何建議表示讚賞。Ajax請求插入Highcharts到頭部和運行函數
我試圖在用戶單擊帶有onclick事件的鏈接後生成圖表。
我的文檔的頭像是這樣的。
<script src="billajax.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
Billajax.js有許多功能，但爲了簡化，它看起來像這樣。
function getl(uid){
if(document.getElementById("votescode")){
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse5(xmlHttp.responseText);
//BELOW GENERATES CHART CODE
var xmlHttp2 = getXMLHttp();
xmlHttp2.onreadystatechange = function()
{
if(xmlHttp2.readyState == 4)
{
HandleResponse4(xmlHttp2.responseText);
dothis();
}
}
xmlHttp2.open("GET", "ajax.php?&p=glv&req="+uid+"&n="+Math.random(), true);
xmlHttp2.send(null);
}
}
xmlHttp.open("GET", "ajax.php?&p=gl&req="+uid+"&n="+Math.random(), true);
xmlHttp.send(null);
}else{
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse5(xmlHttp.responseText);
//BELOW GENERATES CHART CODE
var xmlHttp2 = getXMLHttp();
xmlHttp2.onreadystatechange = function()
{
if(xmlHttp2.readyState == 4)
{
HandleResponse3(xmlHttp2.responseText);
dothis();
}
}
xmlHttp2.open("GET", "ajax.php?&p=glv&req="+uid+"&n="+Math.random(), true);
xmlHttp2.send(null);
}
}
xmlHttp.open("GET", "ajax.php?&p=gl&req="+uid+"&n="+Math.random(), true);
xmlHttp.send(null);
}
}
function HandleResponse3(response)
{
//var idid = 'waiting';
//toggle_visibility(idid);
var script = document.createElement("script");
script.setAttribute("id", "votescode");
script.innerHTML = response;
document.head.appendChild(script);
}
function HandleResponse4(response)
{
//var idid = 'waiting';
//toggle_visibility(idid);
var el = document.getElementById('votescode');
el.parentNode.removeChild(el);
var script = document.createElement("script");
script.setAttribute("id", "votescode");
script.innerHTML = response;
document.head.appendChild(script);
}
function HandleResponse5(response)
{
//var idid = 'waiting';
//toggle_visibility(idid);
document.getElementById('initiative').innerHTML = response;
//var shn = $('.shtn').ThreeDots();
//shn.ThreeDots.update({max_rows:1});
//var bsy = $('.billsy').ThreeDots();
//bsy.ThreeDots.update({max_rows:3});
}
getL（uid）中的ajax調用的輸出如下所示，併成功插入到文檔的頭部。用HandleResponse5填充的html內容也被正確插入。
點擊鏈接後，它激發getl（uid）函數，該函數生成插入頁面所需的代碼（highcharts容器），然後根據腳本是否生成HandleResponse3或Handleresponse4的highcharts代碼之前被解僱。
生成高圖的代碼輸出如下。它工作，如果我把它扔進jsfiddle，所以我不知道爲什麼我不斷收到以下錯誤（從鉻控制檯）。
Uncaught TypeError: Object [object Object] has no method 'highcharts'
dothis
(anonymous function)
o jquery.min.js:2
p.add jquery.min.js:2
e.fn.e.ready jquery.min.js:2
e.fn.e.init jquery.min.js:2
e jquery.min.js:2
(anonymous function)
HandleResponse3 billajax.js:310
xmlHttp2.onreadystatechange billajax.js:247
Uncaught TypeError: Object [object Object] has no method 'highcharts'
dothis
xmlHttp2.onreadystatechange
這是在getl（UID）定義
//CALL FROM BILL AJAX ABOVE WHICH GENERATES CODE BELOW.
xmlHttp2.open("GET", "ajax.php?&p=glv&req="+uid+"&n="+Math.random(), true);
function dothis(){
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container').highcharts({
chart: {
renderTo: 'container',
backgroundColor:'transparent',
width:130,height:140,
size:'100%'
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 200,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits:{enabled:false},
exporting:{enabled:false},
colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Supports You', 1],
['Opposes You', 1],
['Absent on Supporting', 0],
['Absent on Opposing', 0]
]
}]
});
}
function dothis2(){
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container2').highcharts({
chart: {
renderTo: 'container2',
backgroundColor:'transparent',
width:130,height:140,
size:'100%'
},
legend:{
enabled: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
size: 200,
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits:{enabled:false},
exporting:{enabled:false},
colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Supports You', 0],
['Opposes You', 2],
['Absent on Supporting', 0],
['Absent on Opposing', 0]
]
}]
});
}
$(function() { dothis();dothis2(); });
我已經成功地實施了類似的解決方案，但我想不出通過調用ajax.php生成的代碼，爲什麼這不會當我使用類似的設置時正常工作。
再次，任何意見將不勝感激。
我剛剛嘗試過：http://jsfiddle.net/Yrygy/69/ - 並從AJAX中添加圖表正常工作。我能猜到的是你的Highcharts路徑是錯誤的。 –
Pawel Fus，這是我混亂的原因......路徑是正確的，並且腳本被正確加載。我將它們改爲本地拷貝，認爲它必須與它們加載，並且什麼都不做...... – user2355051
我不認爲這個例子反映了上面例子中發生的事情。在看完你的例子的工作後，它可能是我實現dothis（）;函數包裝圖表的創建？我會嘗試下一步去看看它是否有所作爲。謝謝。 – user2355051