Javascript 列向下钻取图表-通过XML数据源解析格式副本
我有一个XML树，我正在解析和设置列向下搜索HighChart选项。但是HTML呈现一个空白页面： ex.xmlJavascript 列向下钻取图表-通过XML数据源解析格式副本,javascript,highcharts,Javascript,Highcharts,我有一个XML树，我正在解析和设置列向下搜索HighChart选项。但是HTML呈现一个空白页面： ex.xml <chart> <categories> <name>'MSIE'</name> <name>'Firefox'</name> <name>'Chrome'</name> <name>'Safari'&l
<chart>
<categories>
<name>'MSIE'</name>
<name>'Firefox'</name>
<name>'Chrome'</name>
<name>'Safari'</name>
<name>'Opera'</name>
</categories>
<name>'Browser Brands'</name>
<data>
<series>
<y>55.11</y>
<drilldown>
<name>'MSIE versions'</name>
<categories>
<name>'MSIE 8.0'</name>
<name>'MSIE 6.0'</name>
<name>'MSIE 7.0'</name>
<name>'MSIE 9.0'</name>
</categories>
<data>
<series>
<y>33.06</y>
<drilldown>
<name>'drilldown next level'</name>
<categories>
<name>'a'</name>
<name>'b'</name>
<name>'c'</name>
</categories>
<data>
<point>23</point>
<point>54</point>
<point>47</point>
</data>
</drilldown>
</series>
<point>10.85</point>
<point>7.35</point>
<point>2.41</point>
</data>
</drilldown>
</series>
<series>
<y>21.63</y>
<drilldown>
<name>'Firefox versions'</name>
<categories>
<name>'Firefox 3.6'</name>
<name>'Firefox 4.0'</name>
<name>'Firefox 3.5'</name>
<name>'Firefox 3.0'</name>
<name>'Firefox 2.0'</name>
</categories>
<data>
<point>13.52</point>
<point>5.43</point>
<point>1.58</point>
<point>0.83</point>
<point>0.20</point>
</data>
</drilldown>
</series>
<series>
<y>11.94</y>
<drilldown>
<name>'Chrome versions'</name>
<categories>
<name>'Chrome 10.0'</name>
<name>'Chrome 11.0'</name>
<name>'Chrome 8.0'</name>
<name>'Chrome 9.0'</name>
<name>'Chrome 12.0'</name>
<name>'Chrome 6.0'</name>
<name>'Chrome 5.0'</name>
<name>'Chrome 7.0'</name>
</categories>
<data>
<point>9.91</point>
<point>0.50</point>
<point>0.36</point>
<point>0.32</point>
<point>0.22</point>
<point>0.19</point>
<point>0.12</point>
<point>0.12</point>
</data>
</drilldown>
</series>
<series>
<y>7.15</y>
<drilldown>
<name>'Safari versions'</name>
<categories>
<name>'Safari 5.0'</name>
<name>'Safari 4.0'</name>
<name>'Safari Win 5.0'</name>
<name>'Safari 4.1'</name>
<name>'Safari/Maxthon'</name>
<name>'Safari 3.1'</name>
<name>'Safari 41'</name>
</categories>
<data>
<point>4.55</point>
<point>1.42</point>
<point>0.23</point>
<point>0.21</point>
<point>0.20</point>
<point>0.19</point>
<point>0.14</point>
</data>
</drilldown>
</series>
<series>
<y>2.14</y>
<drilldown>
<name>'Opera versions'</name>
<categories>
<name>'Opera 11.x'</name>
<name>'Opera 10.x'</name>
<name>'Opera 9.x'</name>
</categories>
<data>
<point>1.65</point>
<point>0.37</point>
<point>0.12</point>
</data>
</drilldown>
</series>
</data>
</chart>
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4 <title>Highcharts Example</title>
5 <!-- 1. Add these JavaScript inclusions in the head of your page -->
6 <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script-->
7 <script type="text/javascript" src="jquery/js/jquery-1.7.1.min.js"></script>
8 <script type="text/javascript" src="jquery/js/jquery-ui-1.8.18.custom.min.js"></script>
9 <script type="text/javascript" src="highcharts/js/highcharts.js"></script>
10 <script type="text/javascript">
11 var chart;
12 $(document).ready(function() {
13 var colors = Highcharts.getOptions().colors;
14 var index=0;
15 var options = ({
16 chart: {
17 renderTo: 'container',
18 type: 'column'
19 },
20 title: {
21 text: 'Browser market share, April, 2011'
22 },
23 subtitle: {
24 text: 'Click the columns to view versions. Click again to view brands.'
25 },
26 xAxis: {
27 categories: []
28 },
29 yAxis: {
30 title: {
31 text: 'Total percent market share'
32 }
33 },
34 plotOptions: {
35 column: {
36 cursor: 'pointer',
37 point: {
38 events: {
39 click: function() {
40 var drilldown = this.drilldown;
41 if (drilldown) { // drill down
42
43 this.series.chart.setTitle({
44 text: drilldown.name
45 });
46
47 setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
48 } else { // restore
49 this.series.chart.setTitle({
50 text: chart.name
51 });
52 setChart(name, categories, data);
53 }
54 }
55 }
56 },
57 dataLabels: {
58 enabled: true,
59 color: colors[0],
60 style: {
61 fontWeight: 'bold'
62 },
63 formatter: function() {
64 return this.y +'%';
65 }
66 }
67 }
68 },
69 tooltip: {
70 formatter: function() {
71 var point = this.point,
72 s = this.x +':<b>'+ this.y +'% market share</b><br/>';
73 if (point.drilldown) {
74 s += 'Click to view '+ point.category +' versions';
75 } else {
76 s += 'Click to return to browser brands';
77 }
78 return s;
79 }
80 },
81 series: [],
82 exporting: {
83 enabled: false
84 }
85 });
86
87 $.get('ex.xml', function(xml) {
88 var $xml = $(xml);
89 $('chart', $xml).children('categories').each(function() {
90 options.xAxis.categories.push($(this).find('name').text());
91 });
92 var seriesDownSearch = function(){
93 var seriesOptions = {
94 y: parseFloat($(this).find('y').text()).toFixed(2),
95 color: colors[index],
96 level : index + 1,
97 drilldown : []
98 };
99 $(this).children('drilldown').each(function(){
100 var drilldown = {
101 name : $(this).children('name').text(),
102 level : index + 1,
103 color: colors[index],
104 categories : [],
105 data : []
106 };
107 $(this).children('categories').each(function() {
108 drilldown.categories.push($(this).find('name').text());
109 });
110 $(this).children('data').each(function() {
111 $(this).children('series').each(seriesDownSearch);
112 var data = {
113 point: []
114 };
115 $(this).children('point').each(function() {
116 data.point.push(parseFloat($(this).text()).toFixed(2));
117 });
118 drilldown.data.push(data);
119 seriesOptions.drilldown.push(drilldown);
120 options.series.push(seriesOptions);
121 });
122 });
123 index = index + 1;
124 };
125 $xml.find('chart > data').children('series').each(seriesDownSearch);
126 chart = new Highcharts.Chart(options);
127 chart.series.name = $('chart', $xml).children('name').text();
128 chart.series.level = 0;
129 });
130 function setChart(name, categories, data, color) {
131 chart.xAxis[0].setCategories(categories);
132 chart.series[0].remove();
133 chart.addSeries({
134 name: name,
135 data: data,
136 color: color || 'white'
137 });
138 }
139 });
140 </script>
141 </head>
142 <body>
143 <!-- 3. Add the container -->
144 <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
145 </body>
146 </html>
提前感谢-请让我知道如何解决这个问题，因为我完全无法解决它。您确定它不包含JS错误吗
$(data).find("series").each(seriesDownSearch);
according to me, it should be
$(data).find('series').each(seriesDownSearch);
我已经用修改过的代码更新了我的问题。我成功地解析了XML树，但无法将其正确设置为图表选项。@Prakash您是否正确地获取了值？你有没有尝试发出警报，看看你是否得到了系列、类别或任何东西？@Prakash刚刚看到了这一点，节点值没有包含在单引号中OK谢谢我会从节点值中删除单引号。警报向我显示值已正确解析，但问题是将其设置为图表选项。不知何故，在读取值后，在对象中设置它，然后作为图表选项不会发生properly@Prakash再次检查您的功能
$(data).find("series").each(seriesDownSearch);
according to me, it should be
$(data).find('series').each(seriesDownSearch);