我在JS中有点新手并且起草JS代码来解析和创建HighChart选项结构。 XML文件包含以下格式的内容
系列 - > DrillDown-> Data-用>系列 - > DrillDown->数据...
最后一个'数据'分支将有'点'节点。下面是我通过Jquery进行的AJAX调用时收到的XML(filename: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>
现在我正在编写JS代码来解析和设置HighChart选项。目标是将图表选项设置为如下所示:
struct Series{
float y:
struct DrillDown{
char name[SIZE];
char categories[SIZE][SIZE];
struct Data{
struct Series * series;
float points[SIZE];
};
};
};
struct Series seriesOptions;
与XML树结构格式一样。然后将此Series结构设置为HighChart选项:
options.series.push(seriesOptions);
其中options已在JS脚本中定义了数组。
因此,我遍历每个系列的XML树 - >每个数据的每个DrillDown-&gt;&gt;如果系列在那里,那么每个数据的每个DrillDown-&gt;遍历重复的Series-&gt;&gt;设置数据点:
$.get('ex.xml', function(xml) {
var $xml = $(xml);
$xml.find('chart categories name').each(function(i, category) {
options.xAxis.categories.push($(category).text());
});
chart.setTitle.push($xml.find('chart name').text());
$xml.find("chart data series").each(function(i, series){
var seriesDownSearch = function(){
var series = $(this);
var seriesOptions = {
y: parseInt(series.find('y').text()),
drilldown : []
}
series.find("drilldown").each(function(i, drilldown){
//set drilldown name leaf,categories branch name leaf and data branch
$(drilldown).find("data").each(function(i, data) {
//set data point and loop if series branch is present
$(data).find("series").each(seriesDownSearch);
});
})
}();
});
});
我的问题是我如何设置和创建评论代码为 // 。请注意,'名称叶,类别分支名称叶和数据分支'必须是'drilldown'元素和'选项' 'data'元素定义在'钻取'。这样就可以在一种结构下访问它们。
提前致谢