Javascript 将Highcharts插入Head and Run函数的Ajax请求

我不是javascript的高手，我遇到了一些麻烦。如有任何建议，我们将不胜感激

我试图在有人单击带有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>

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调用的输出如下所示，并成功地插入到文档的头部。使用HandlerResponse5填充的html内容也被正确插入

单击链接后，它将启动getl（uid）函数，该函数生成插入页面所需的代码（highcharts容器），然后根据脚本之前是否启动，为具有HandlerResponse3或HandlerResponse4的highcharts生成代码

生成highchart的代码的输出如下所示。如果我把它扔进JSFIDLE中，它就会工作，所以我不明白为什么我一直收到以下错误（来自chrome控制台）

这是调用getl（uid）中定义的ajax.php生成的代码

//来自上面BILL AJAX的调用，该调用生成下面的代码。
xmlHttp2.open（“GET”、“ajax.php？&p=glv&req=“+uid+”&n=“+Math.random（），true）；
函数dothis（）{
//使颜色呈放射状
Highcharts.getOptions（）.colors=Highcharts.map（Highcharts.getOptions（）.colors，函数（color）{
返回{
径向梯度：{cx:0.4，cy:0.2，r:0.7
},
停止：[
[0，颜色]，
[1，Highcharts.Color（Color）.brighlight（-0.3）.get（'rgb'）]//darken
]
};
});
$（“#容器”）。高图({
图表：{
renderTo:'容器'，
背景颜色：'透明'，
宽度：130，高度：140，
尺寸：'100%'
},
标题：{
正文：“2010年特定网站的浏览器市场份额”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
尺寸：200，
数据标签：{
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式：'{point.name}:{point.percentage:.1f}%'
}
}
},
信用证：{已启用：错误}，
正在导出：{enabled:false}，
颜色：['#ADD46D'、'#F1744F'、'#b9e376'、'#f2a48d']，
系列：[{
键入“pie”，
名称：“浏览器共享”，
数据：[
[“支持你”，1]，
[“反对你”，1]，
[“支持时缺席”，0]，
[“对方缺席”，0]
]
}]
});
}
函数dothis2（）{
//使颜色呈放射状
Highcharts.getOptions（）.colors=Highcharts.map（Highcharts.getOptions（）.colors，函数（color）{
返回{
径向梯度：{cx:0.4，cy:0.2，r:0.7
},
停止：[
[0，颜色]，
[1，Highcharts.Color（Color）.brighlight（-0.3）.get（'rgb'）]//darken
]
};
});
$（“#container2”）。高图({
图表：{
renderTo:'container2'，
背景颜色：'透明'，
宽度：130，高度：140，
尺寸：'100%'
},
图例：{
已启用：false
},
标题：{
正文：“2010年特定网站的浏览器市场份额”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
尺寸：200，
数据标签：{
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式：'{point.name}:{point.percentage:.1f}%'
}
}
},
信用证：{已启用：错误}，
正在导出：{enabled:false}，
颜色：['#ADD46D'、'#F1744F'、'#b9e376'、'#f2a48d']，
系列：[{
键入“pie”，
名称：“浏览器共享”，
数据：[
['Supports You'，0]，
[“反对你”，2]，
[“支持时缺席”，0]，
[“对方缺席”，0]
]
}]
});
}
$（函数（）{dothis（）；dothis2（）；}）；

我已经成功地实现了一个类似的解决方案，但我不明白为什么在使用类似的设置时，它不能正常工作

---

再次感谢您的建议。

问题已解决，页面正文中存在冲突库。脚本冲突导致了错误。

我刚刚尝试：-从AJAX添加图表效果很好。我能猜到的是，你的高图表路径是错误的。帕维尔·福斯，这就是我困惑的原因。。。路径正确，脚本加载正确。我把它们改成本地副本，认为这与它们的加载有关，什么都没有……我不认为这个例子反映了上面例子中发生的事情。在看了您的示例如何工作之后，可能是我对dothis（）的实现；包装图表创建的函数？下一步我会试着脱掉它，看看它是否有区别。谢谢。尝试删除包装函数dothis（）；由于未捕获的TypeError仍然失败：Object[Object Object]在检查源代码对话框时没有“highcharts”方法，highcharts.js在页面加载时被加载，因此我不确定是什么导致了这种情况。你确定你有最新（3.0.x）版本的highcharts吗？库伊

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

//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(); });