У меня есть дерево XML, которое я анализирую и задаю параметры колонки Детализация 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>
Я не уверен, в чем проблема и почему диаграмма не отображается?
=============================================== ===================================
Модифицированный / Обновленный код:
Я сделал некоторые изменения в своем коде, но все еще не могу увидеть граф Column DrillDown в браузере, используя ту же древовидную структуру XML, которая упоминалась выше в потоке.
Я получаю только заголовок «Обзор доли рынка, апрель 2011 года», а все остальное пустое.
Обратите внимание на код в строках 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?
Заранее спасибо - пожалуйста, дайте мне знать, как я могу решить проблему, так как я полностью застрял с ней.