Javascript提取分支和叶子信息

时间:2012-03-17 06:32:01

标签: javascript

我在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'元素定义在'钻取'。这样就可以在一种结构下访问它们。

提前致谢

0 个答案:

没有答案