我有一个XML树，我正在解析并设置Column Drill down HighChart选项。但是HTML呈现一个空白页面：
ex.xml
<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>
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="highcharts/js/highcharts.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors;
var color=0;
var options = ({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
this.series.chart.setTitle({
text: chart.name
});
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'% market share</b><br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' versions';
} else {
s += 'Click to return to browser brands';
}
return s;
}
},
series: [],
exporting: {
enabled: false
}
});
$.get('ex.xml', function(xml) {
var $xml = $(xml);
$xml.find('chart categories name').each(function(i, category) {
options.xAxis.categories.push($(category).text());
});
$xml.find("chart data series").each(function(i, series){
var seriesDownSearch = function(){
var series = $(this);
var seriesOptions = {
name: 'Browser Brands',
y: parseInt(series.find('y').text()),
color: colors[color],
drilldown : []
};
series.find("drilldown").each(function(i, drilldown){
var drilldown = {
name : $(drilldown).find('name').text(),
color: colors[color],
categories : [],
data : []
};
$(drilldown).find('categories name').each(function(i, name) {
drilldown.categories.push($(name).text());
});
$(drilldown).find("data").each(function(i, data) {
var data = {
point: []
};
$(data).find('data point').each(function(i, point) {
data.push(parseInt($(point).text()));
drilldown.data.push(data);
seriesOptions.drilldown.push(drilldown);
options.series.push(seriesOptions);
});
color = color + 1;
$(data).find("series").each(seriesDownSearch);
});
})
};
});
chart = new Highcharts.Chart(options);
//chart.series.setTitle.push($xml.find('chart name').text());
});
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories);
chart.series[0].remove();
chart.addSeries({
name: name,
data: data,
color: color || 'white'
});
}
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
我不确定问题是什么以及为什么图表没有呈现？
=============================================== ===================================
修改/更新代码：
我在代码中做了一些修改，但仍然无法在浏览器中看到使用上述线程中提到的相同XML树结构的Column DrillDown图。 我只获得了“浏览市场份额，2011年4月”的标题，其他一切都是空白的。 请注意第127和128行的代码 - 我无法找到设置图表初始系列名称和级别方法的方法。请帮我完成我的项目？我完全坚持这个问题：
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>
最后如何将此图表选项设置为图表？
将选项设置为图表的问题是我无法找到正确设置图表选项的正确方法。由于我的函数是递归的，我不确定如何创建并正确设置从XML树处理的图表选项？
提前致谢 - 请让我知道如何在完全坚持下来解决问题。
答案 0 :(得分：0)
您确定它不包含JS错误吗？
$(data).find("series").each(seriesDownSearch);
according to me, it should be
$(data).find('series').each(seriesDownSearch);
如果您愿意，可以查看以获取更多信息：