드릴 다운이있는 하이 차트 주 차트 및 드릴 다운 차트의 데이터가 다른 xml 파일에있는 경우

주 차트 및 드릴 다운 차트의 데이터가 다른 xml 파일에있는 드릴 다운을 사용하여 열 highchart를 작성하려고합니다. 가능한가? 어떤 예도 찾을 수 없었습니다. 내 코드가 제대로 작동하지 않습니다 (주 차트를 얻지 만 열을 클릭하면 아무 일도 일어나지 않습니다). 하이 차트에 드릴 다운 옵션을 전달할 수 없다고 생각됩니다. 물론 문제는 내가 생각하는 것보다 훨씬 커질 수 있습니다.드릴 다운이있는 하이 차트 주 차트 및 드릴 다운 차트의 데이터가 다른 xml 파일에있는 경우

도움이된다면 감사드립니다.

코드 :

$(document).ready(function() { 
//var drill = []; 
var options = { 
    credits: { 
     enabled: false 
    }, 
    xAxis: [{ 
     id: 0, 
     startOnTick: false, 
     labels: { 
      y: 15, 
      format: '{value:%e %b}', 
      zIndex: 0 
     }, 
     tickWidth: 0, 
     title: { 
      text: null 
     }, 
     type: 'datetime', 
     lineColor: '#BDBDBD' 
    },{ 
     id: 1, 
     startOnTick: false, 
     labels: { 
      y: 15, 
      style: { 
       color: '#A4A4A4' 
      }, 
      zIndex: 0 
     }, 
     tickWidth: 0, 
     title: { 
      text: null 
     }, 
     type: 'category', 
     lineWidth: 0, 
     lineColor: '#BDBDBD' 
    }], 
    yAxis: { 
     gridLineWidth: 0, 
     gridLineColor: '#e0e0e0', 
     labels: { 
      y: 0, 
      x: 0, 
      overflow: 'justify', 
      enabled: false, 
      maxStaggerLines: 0, 
      align: 'center' 
     }, 
     title: { 
      margin: 0, 
      text: null 
     }, 
     gridLineInterpolation: null, 
     lineColor: '#BDBDBD' 
    }, 
    tooltip: { 
     enabled: false, 
     shared: true, 
     xDateFormat: '%e %b', 
     valueSuffix: ' Lt', 
     borderColor: 'null', 
     borderRadius: 10 
    }, 
    plotOptions: { 
     areaspline: { 
      lineColor: '#c0c0c0', 
      marker: { 
       enabled: false, 
       fillColor: '#e0e0e0', 
       radius: 3, 
       lineWidth: 1, 
       lineColor: '#c0c0c0' 
      }, 
      lineWidth: 1, 
      states: { 
       hover: { 
        marker: { 
         radius: 3, 
         lineWidth: 1 
        } 
       } 
      } 
     }, 
     column: { 
      allowPointSelect: false, 
      cursor: 'pointer', 
      pointWidth: 35, 
      dataLabels: { 
       enabled: true, 
       inside: false, 
       crop: false, 
       overflow: 'none', 
       y: -10, 
       x: 0, 
       verticalAlign: 'middle', 
       padding: 0, 
      } 
     }, 
     series: { 
      animation: { 
       duration: 700 
      } 
     } 
    }, 
    chart: { 
     animation: { 
      duration: 700 
     }, 
     renderTo: 'container_1_BP', 
     events: { 
      drilldown: function(e){ 
       UpdateTitle('BP s/f ('+Highcharts.dateFormat('%Y-%m-%d', e.point.x)+'): ', Highcharts.numberFormat(e.point.y, 0,'.', ',') + ' Lt') 
       }, 
      drillup: function(){ 
       UpdateTitle('Bendrasis pelnas, s/f', null) 
      } 
     }, 
     spacingBottom: 20, 
     type: 'column', 
     borderRadius: 2, 
     spacingTop: 0, 
     width: 1012, 
     marginLeft: 0, 
     spacingRight: 0, 
     marginBottom: 40, 
     marginRight: 0, 
     marginTop: 30, 
     height: 180, 
     spacingLeft: 0 
    }, 
    title: { 
     margin: 5, 
     y: 15, 
     text: 'Bendrasis pelnas, s/f', 
     x: 20, 
     align: 'left', 
    }, 
    subtitle: { 
     x: 220, 
     y: 15, 
     style: {'color': '#a4a4a4', 'fontSize': '15px', 'fontWeight': 'bold'}, 
     align: 'left' 
    }, 
    Exporting: { 
     scale: 1, 
     buttons: { 
      contextButton: { 
       enabled: false 
      } 
     }, 
     enabled: false 
    }, 
    legend: { 
     enabled: false, 
     symbolWidth: 12 
    }, 
    series: [{ 
       index: 1, 
       data: [] 




      }, 

      { 
       index: 0, 
       data: [] 
      } 
    ], 

    drilldown: { 
     activeAxisLabelStyle: { 
      textDecoration: 'none', 
      fontWeight: 'regular', 
      color: 'A4A4A4' 
     }, 
     animation: { 
      duration: 700 
     }, 
     activeDataLabelStyle: { 
      textDecoration: 'none', 
      fontWeight: 'semi-bold', 
      color: '4c4c4c' 
     }, 
     drillUpButton: { 
      relativeTo: 'spacingBox', 
      position: { 
       align: 'right', 
       x: -5, 
       y: 0, 
       verticalAlign: 'top' 
      } 
     }, 
     series: [] 

    } 
}; 

        // Load the data from the XML file 
$.get('BP_plan.xml', function(xml) { 

    // Split the lines 
    var $xml = $(xml); 
    var cats = [], //x-axis categories 
     seriesDataMap = {}, 
     seriesDataMap1 = {}; //map of series name to data 

    //combine all processing into a single each callback, this will be faster 
    $xml.find('BP_plan').each(function() { 
     var $row = $(this), 
      category = $row.find('x').text(), 
      seriesName = $row.find('').text(), 
      dataValue = parseInt($row.find('y').text()), 
      dataValue1 = parseInt($row.find('Planas').text()); 

     cats.push(category); 

     if (seriesDataMap[seriesName] === undefined) { 
     //if we haven't seen this series before, add an empty array to our map 
     seriesDataMap[seriesName] = []; 
     } 
     if (seriesDataMap1[seriesName] === undefined) { 
     //if we haven't seen this series before, add an empty array to our map 
     seriesDataMap1[seriesName] = []; 
     } 
     //add this data point for this series to our map 
     seriesDataMap[seriesName].push(dataValue); 
     seriesDataMap1[seriesName].push(dataValue1); 

    }); 

    //add categories 
    options.xAxis[0].categories = cats; 

    //add series data 
    for(var seriesName in seriesDataMap) { 
    options.series.push({ 
     xAxis: 0, 
     index: 1, 
     name: seriesName , 
     data: seriesDataMap[seriesName], 
     type: 'column', 
     color: '#30bf09', 
     point: { 
      events: { 
       click: function (e) { 

        $.ajax ({ 
         type: 'GET', 
         url: 'detalizacija.xml', 
         dataType: "xml", 
         success: function(duom) { 

          $(duom).find('detalizacija').each(function(){ 
           var Data = $(this).find('data').text(), 
            Kategorija = $(this).find('kategorija').text(), 
            BP_Lt = parseInt($(this).find('BP_Lt').text()); 

           var dataOptions={ 
            y: e.point.category,  
            drilldown: { 
             xAxis: 1, 
             id: 'pirmas', 
             categories: [], 
             data: [] 
            } 
           }; 

          if (Data == e.point.category){ 
           dataOptions.drilldown.categories.push(Kategorija); 
           dataOptions.drilldown.data.push(BP_Lt); 
           }; 


        }); 
          //drill.push(dataOptions); 
          options.drilldown.push(dataOptions); 
          } 


        }); 

     } 
      }  
       } 


    }) 

    }; 

    //add series data 
    for(var seriesName in seriesDataMap1) { 
    options.series.push({ 
     xAxis: 0, 
     index: 0, 
     name: seriesName , 
     data: seriesDataMap1[seriesName], 
     type: 'areaspline', 
     color: '#e0e0e0' 

    }) 

    } 

var chart_1 = new Highcharts.Chart(options); 


}); 
});

BP_plan.xml :

<?xml version="1.0" encoding="UTF-8"?> 
<dataroot xmlns:od="urn:schemas-microsoft-com:officedata" generated="2014-07-14T10:24:21"> 
<BP_plan> 
<ID>1</ID> 
<x>1400187600000</x> 
<y>7213</y> 
<Planas>2930</Planas> 
</BP_plan> 
<BP_plan> 
<ID>2</ID> 
<x>1400274000000</x> 
<y>711</y> 
<Planas>0</Planas> 
</BP_plan> 
<BP_plan> 
<ID>3</ID> 
<x>1400360400000</x> 
<y>1038</y> 
<Planas>0</Planas> 
</BP_plan> 
<BP_plan> 
<ID>4</ID> 
<x>1400446800000</x> 
<y>6612</y> 
<Planas>2930</Planas> 
</BP_plan> 
<BP_plan> 
<ID>5</ID> 
<x>1400533200000</x> 
<y>21303</y> 
<Planas>2930</Planas> 
</BP_plan> 
<BP_plan> 
<ID>6</ID> 
<x>1400619600000</x> 
<y>8565</y> 
<Planas>2930</Planas> 
</BP_plan> 
<BP_plan> 
<ID>7</ID> 
<x>1400706000000</x> 
<y>9496</y> 
<Planas>2930</Planas> 
</BP_plan> 
<BP_plan> 
<ID>8</ID> 
<x>1400792400000</x> 
<y>11016</y> 
<Planas>2930</Planas> 
</BP_plan> 
<BP_plan> 
<ID>9</ID> 
<x>1400878800000</x> 
<y>787</y> 
<Planas>0</Planas> 
</BP_plan> 
<BP_plan> 
<ID>10</ID> 
<x>1400965200000</x> 
<y>199</y> 
<Planas>0</Planas> 
</BP_plan> 
<BP_plan> 
<ID>11</ID> 
<x>1401051600000</x> 
<y>13775</y> 
<Planas>2922</Planas> 
</BP_plan> 
<BP_plan> 
<ID>12</ID> 
<x>1401138000000</x> 
<y>20474</y> 
<Planas>2922</Planas> 
</BP_plan> 
<BP_plan> 
<ID>13</ID> 
<x>1401224400000</x> 
<y>10136</y> 
<Planas>2922</Planas> 
</BP_plan> 
<BP_plan> 
<ID>14</ID> 
<x>1401310800000</x> 
<y>8436</y> 
<Planas>2922</Planas> 
</BP_plan> 
</dataroot>

detalizacija.xml의 일부 :

<?xml version="1.0" encoding="UTF-8"?> 
<dataroot xmlns:od="urn:schemas-microsoft-com:officedata" generated="2014-07-14T10:25:43"> 
<detalizacija> 
<ID>16</ID> 
<data>1400187600000</data> 
<kategorija>ESET</kategorija> 
<BP_Lt>5938</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>17</ID> 
<data>1400187600000</data> 
<kategorija>OERP</kategorija> 
<BP_Lt>120</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>18</ID> 
<data>1400187600000</data> 
<kategorija>SoftMaker</kategorija> 
<BP_Lt>65</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>19</ID> 
<data>1400187600000</data> 
<kategorija>Google</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>20</ID> 
<data>1400187600000</data> 
<kategorija>Blancco</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>21</ID> 
<data>1400187600000</data> 
<kategorija>Axence</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>22</ID> 
<data>1400187600000</data> 
<kategorija>Kiti</kategorija> 
<BP_Lt>43</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>23</ID> 
<data>1400187600000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>24</ID> 
<data>1400187600000</data> 
<kategorija>PrestaShop</kategorija> 
<BP_Lt>1047</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>25</ID> 
<data>1400187600000</data> 
<kategorija>Eksportas</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>26</ID> 
<data>1400187600000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>27</ID> 
<data>1400187600000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>28</ID> 
<data>1400187600000</data> 
<kategorija>Box</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>29</ID> 
<data>1400187600000</data> 
<kategorija>Nuoma</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>30</ID> 
<data>1400274000000</data> 
<kategorija>ESET</kategorija> 
<BP_Lt>276</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>31</ID> 
<data>1400274000000</data> 
<kategorija>OERP</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>32</ID> 
<data>1400274000000</data> 
<kategorija>SoftMaker</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>33</ID> 
<data>1400274000000</data> 
<kategorija>Google</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>34</ID> 
<data>1400274000000</data> 
<kategorija>Blancco</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>35</ID> 
<data>1400274000000</data> 
<kategorija>Axence</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>36</ID> 
<data>1400274000000</data> 
<kategorija>Kiti</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>37</ID> 
<data>1400274000000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>38</ID> 
<data>1400274000000</data> 
<kategorija>PrestaShop</kategorija> 
<BP_Lt>436</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>39</ID> 
<data>1400274000000</data> 
<kategorija>Eksportas</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>40</ID> 
<data>1400274000000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>41</ID> 
<data>1400274000000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>42</ID> 
<data>1400274000000</data> 
<kategorija>Box</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>43</ID> 
<data>1400274000000</data> 
<kategorija>Nuoma</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>44</ID> 
<data>1400360400000</data> 
<kategorija>ESET</kategorija> 
<BP_Lt>56</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>45</ID> 
<data>1400360400000</data> 
<kategorija>OERP</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>46</ID> 
<data>1400360400000</data> 
<kategorija>SoftMaker</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>47</ID> 
<data>1400360400000</data> 
<kategorija>Google</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>48</ID> 
<data>1400360400000</data> 
<kategorija>Blancco</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>49</ID> 
<data>1400360400000</data> 
<kategorija>Axence</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>50</ID> 
<data>1400360400000</data> 
<kategorija>Kiti</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>51</ID> 
<data>1400360400000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>52</ID> 
<data>1400360400000</data> 
<kategorija>PrestaShop</kategorija> 
<BP_Lt>982</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>53</ID> 
<data>1400360400000</data> 
<kategorija>Eksportas</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>54</ID> 
<data>1400360400000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>55</ID> 
<data>1400360400000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>56</ID> 
<data>1400360400000</data> 
<kategorija>Box</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>57</ID> 
<data>1400360400000</data> 
<kategorija>Nuoma</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>58</ID> 
<data>1400446800000</data> 
<kategorija>ESET</kategorija> 
<BP_Lt>5779</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>59</ID> 
<data>1400446800000</data> 
<kategorija>OERP</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>60</ID> 
<data>1400446800000</data> 
<kategorija>SoftMaker</kategorija> 
<BP_Lt>59</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>61</ID> 
<data>1400446800000</data> 
<kategorija>Google</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>62</ID> 
<data>1400446800000</data> 
<kategorija>Blancco</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>63</ID> 
<data>1400446800000</data> 
<kategorija>Axence</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>64</ID> 
<data>1400446800000</data> 
<kategorija>Kiti</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>65</ID> 
<data>1400446800000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>66</ID> 
<data>1400446800000</data> 
<kategorija>PrestaShop</kategorija> 
<BP_Lt>774</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>67</ID> 
<data>1400446800000</data> 
<kategorija>Eksportas</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>68</ID> 
<data>1400446800000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>69</ID> 
<data>1400446800000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>70</ID> 
<data>1400446800000</data> 
<kategorija>Box</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>71</ID> 
<data>1400446800000</data> 
<kategorija>Nuoma</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>72</ID> 
<data>1400533200000</data> 
<kategorija>ESET</kategorija> 
<BP_Lt>17729</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>73</ID> 
<data>1400533200000</data> 
<kategorija>OERP</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>74</ID> 
<data>1400533200000</data> 
<kategorija>SoftMaker</kategorija> 
<BP_Lt>158</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>75</ID> 
<data>1400533200000</data> 
<kategorija>Google</kategorija> 
<BP_Lt>668</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>76</ID> 
<data>1400533200000</data> 
<kategorija>Blancco</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>77</ID> 
<data>1400533200000</data> 
<kategorija>Axence</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>78</ID> 
<data>1400533200000</data> 
<kategorija>Kiti</kategorija> 
<BP_Lt>1419</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>79</ID> 
<data>1400533200000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>80</ID> 
<data>1400533200000</data> 
<kategorija>PrestaShop</kategorija> 
<BP_Lt>1328</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>81</ID> 
<data>1400533200000</data> 
<kategorija>Eksportas</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>82</ID> 
<data>1400533200000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>83</ID> 
<data>1400533200000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>84</ID> 
<data>1400533200000</data> 
<kategorija>Box</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>85</ID> 
<data>1400533200000</data> 
<kategorija>Nuoma</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>86</ID> 
<data>1400619600000</data> 
<kategorija>ESET</kategorija> 
<BP_Lt>7409</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>87</ID> 
<data>1400619600000</data> 
<kategorija>OERP</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>88</ID> 
<data>1400619600000</data> 
<kategorija>SoftMaker</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>89</ID> 
<data>1400619600000</data> 
<kategorija>Google</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>90</ID> 
<data>1400619600000</data> 
<kategorija>Blancco</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>91</ID> 
<data>1400619600000</data> 
<kategorija>Axence</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>92</ID> 
<data>1400619600000</data> 
<kategorija>Kiti</kategorija> 
<BP_Lt>204</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>93</ID> 
<data>1400619600000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>94</ID> 
<data>1400619600000</data> 
<kategorija>PrestaShop</kategorija> 
<BP_Lt>952</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>95</ID> 
<data>1400619600000</data> 
<kategorija>Eksportas</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>96</ID> 
<data>1400619600000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>97</ID> 
<data>1400619600000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>98</ID> 
<data>1400619600000</data> 
<kategorija>Box</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>99</ID> 
<data>1400619600000</data> 
<kategorija>Nuoma</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>100</ID> 
<data>1400706000000</data> 
<kategorija>ESET</kategorija> 
<BP_Lt>8187</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>101</ID> 
<data>1400706000000</data> 
<kategorija>OERP</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>102</ID> 
<data>1400706000000</data> 
<kategorija>SoftMaker</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>103</ID> 
<data>1400706000000</data> 
<kategorija>Google</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>104</ID> 
<data>1400706000000</data> 
<kategorija>Blancco</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>105</ID> 
<data>1400706000000</data> 
<kategorija>Axence</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>106</ID> 
<data>1400706000000</data> 
<kategorija>Kiti</kategorija> 
<BP_Lt>174</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>107</ID> 
<data>1400706000000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>108</ID> 
<data>1400706000000</data> 
<kategorija>PrestaShop</kategorija> 
<BP_Lt>1135</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>109</ID> 
<data>1400706000000</data> 
<kategorija>Eksportas</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>110</ID> 
<data>1400706000000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>111</ID> 
<data>1400706000000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>112</ID> 
<data>1400706000000</data> 
<kategorija>Box</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>113</ID> 
<data>1400706000000</data> 
<kategorija>Nuoma</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>114</ID> 
<data>1400792400000</data> 
<kategorija>ESET</kategorija> 
<BP_Lt>4366</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>115</ID> 
<data>1400792400000</data> 
<kategorija>OERP</kategorija> 
<BP_Lt>5848</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>116</ID> 
<data>1400792400000</data> 
<kategorija>SoftMaker</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>117</ID> 
<data>1400792400000</data> 
<kategorija>Google</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>118</ID> 
<data>1400792400000</data> 
<kategorija>Blancco</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>119</ID> 
<data>1400792400000</data> 
<kategorija>Axence</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>120</ID> 
<data>1400792400000</data> 
<kategorija>Kiti</kategorija> 
<BP_Lt>210</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>121</ID> 
<data>1400792400000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>122</ID> 
<data>1400792400000</data> 
<kategorija>PrestaShop</kategorija> 
<BP_Lt>592</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>123</ID> 
<data>1400792400000</data> 
<kategorija>Eksportas</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>124</ID> 
<data>1400792400000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>125</ID> 
<data>1400792400000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>126</ID> 
<data>1400792400000</data> 
<kategorija>Box</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>127</ID> 
<data>1400792400000</data> 
<kategorija>Nuoma</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>128</ID> 
<data>1400878800000</data> 
<kategorija>ESET</kategorija> 
<BP_Lt>163</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>129</ID> 
<data>1400878800000</data> 
<kategorija>OERP</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>130</ID> 
<data>1400878800000</data> 
<kategorija>SoftMaker</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>131</ID> 
<data>1400878800000</data> 
<kategorija>Google</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>132</ID> 
<data>1400878800000</data> 
<kategorija>Blancco</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>133</ID> 
<data>1400878800000</data> 
<kategorija>Axence</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>134</ID> 
<data>1400878800000</data> 
<kategorija>Kiti</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>135</ID> 
<data>1400878800000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>136</ID> 
<data>1400878800000</data> 
<kategorija>PrestaShop</kategorija> 
<BP_Lt>624</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>137</ID> 
<data>1400878800000</data> 
<kategorija>Eksportas</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>138</ID> 
<data>1400878800000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>139</ID> 
<data>1400878800000</data> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>140</ID> 
<data>1400878800000</data> 
<kategorija>Box</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
<detalizacija> 
<ID>141</ID> 
<data>1400878800000</data> 
<kategorija>Nuoma</kategorija> 
<BP_Lt>0</BP_Lt> 
</detalizacija> 
</dataroot>

HTML :

<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.js"></script> 
    <script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script> 
    <script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js"></script> 
    <script type="text/javascript"> hs.allowMultipleInstances = true; </script> 
    <link rel="stylesheet" type="text/css" href="http://www.highslide.com/highslide/highslide.css" /> 
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> 
    <script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script> 

<div id="container_1_BP" style="min-width: 700px; height: 180px; margin: 0 auto"></div>

출처

2014-07-23 oliao

당신은 아마 바이올린을 게시하고 지금 실제로이 XML의 같은 자바 스크립트 변수를 지정하기위한 수 있습니다. –

그래서 두 개의 xml을 얻은 다음 두 개의 구문을 모두 분석하여 하이 차트 용 양식을 수정하십시오. –

다음은

데모 찾고있는 무엇 : http://jsfiddle.net/robschmuecker/dEG7r/1/

$(document).ready(function() { 
    Highcharts.setOptions({ 
     global: { 
      useUTC: false, 
      timeZoneOffset: -180 
     }, 
     lang: { 
      shortMonths: ['Sau', 'Vas', 'Kov', 'Bal', 'Geg', 'Bir', 'Lie', 'Rgp', 'Rgs', 'Spa', 'Lap', 'Grd'], 
      loading: 'Krauna...', 
      drillUpText: ' < Atgal ' 
     } 
    }); 
    //var drill = []; 
    var options = { 
     credits: { 
      enabled: false 
     }, 
     xAxis: [{ 
      id: 0, 
      startOnTick: false, 
      labels: { 
       y: 15, 
       format: '{value:%e %b}', 
       zIndex: 0 
      }, 
      tickWidth: 0, 
      title: { 
       text: null 
      }, 
      type: 'datetime', 
      lineColor: '#BDBDBD' 
     }, { 
      id: 1, 
      startOnTick: false, 
      labels: { 
       y: 15, 
       style: { 
        color: '#A4A4A4' 
       }, 
       zIndex: 0 
      }, 
      tickWidth: 0, 
      title: { 
       text: null 
      }, 
      type: 'category', 
      lineWidth: 0, 
      lineColor: '#BDBDBD' 
     }], 
     yAxis: { 
      gridLineWidth: 0, 
      gridLineColor: '#e0e0e0', 
      labels: { 
       y: 0, 
       x: 0, 
       overflow: 'justify', 
       enabled: false, 
       maxStaggerLines: 0, 
       align: 'center' 
      }, 
      title: { 
       margin: 0, 
       text: null 
      }, 
      gridLineInterpolation: null, 
      lineColor: '#BDBDBD' 
     }, 
     tooltip: { 
      enabled: false, 
      shared: true, 
      xDateFormat: '%e %b', 
      valueSuffix: ' Lt', 
      borderColor: 'null', 
      borderRadius: 10 
     }, 
     plotOptions: { 
      areaspline: { 
       lineColor: '#c0c0c0', 
       marker: { 
        enabled: false, 
        fillColor: '#e0e0e0', 
        radius: 3, 
        lineWidth: 1, 
        lineColor: '#c0c0c0' 
       }, 
       lineWidth: 1, 
       states: { 
        hover: { 
         marker: { 
          radius: 3, 
          lineWidth: 1 
         } 
        } 
       } 
      }, 
      column: { 
       allowPointSelect: false, 
       cursor: 'pointer', 
       pointWidth: 35, 
       dataLabels: { 
        enabled: true, 
        inside: false, 
        crop: false, 
        overflow: 'none', 
        y: -10, 
        x: 0, 
        verticalAlign: 'middle', 
        padding: 0 
       } 
      }, 
      series: { 
       animation: { 
        duration: 700 
       } 
      } 
     }, 
     chart: { 
      animation: { 
       duration: 700 
      }, 
      renderTo: 'container_1_BP', 
      events: { 
       drilldown: function (e) { 
        UpdateTitle('BP s/f (' + Highcharts.dateFormat('%Y-%m-%d', e.point.category) + '): ', Highcharts.numberFormat(e.point.y, 0, '.', ',') + ' Lt'); 
       }, 
       drillup: function() { 
        UpdateTitle('Bendrasis pelnas, s/f', null); 
       } 
      }, 
      spacingBottom: 20, 
      type: 'column', 
      borderRadius: 2, 
      spacingTop: 0, 
      width: 1012, 
      marginLeft: 0, 
      spacingRight: 0, 
      marginBottom: 40, 
      marginRight: 0, 
      marginTop: 30, 
      height: 180, 
      spacingLeft: 0 
     }, 
     title: { 
      margin: 5, 
      y: 15, 
      text: 'Bendrasis pelnas, s/f', 
      x: 20, 
      align: 'left' 
     }, 
     subtitle: { 
      x: 220, 
      y: 15, 
      style: { 
       'color': '#a4a4a4', 
        'fontSize': '15px', 
        'fontWeight': 'bold' 
      }, 
      align: 'left' 
     }, 
     Exporting: { 
      scale: 1, 
      buttons: { 
       contextButton: { 
        enabled: false 
       } 
      }, 
      enabled: false 
     }, 
     legend: { 
      enabled: false, 
      symbolWidth: 12 
     }, 
     series: [{ 
      index: 1, 
      data: [] 
     }, { 
      index: 0, 
      data: [] 
     }], 

     drilldown: { 
      activeAxisLabelStyle: { 
       textDecoration: 'none', 
       fontWeight: 'regular', 
       color: 'A4A4A4' 
      }, 
      animation: { 
       duration: 700 
      }, 
      activeDataLabelStyle: { 
       textDecoration: 'none', 
       fontWeight: 'semi-bold', 
       color: '4c4c4c' 
      }, 
      drillUpButton: { 
       relativeTo: 'spacingBox', 
       position: { 
        align: 'right', 
        x: -5, 
        y: 0, 
        verticalAlign: 'top' 
       } 
      }, 
      series: [] 
     } 
    }; 

    function getDrilldown(id, xml){ 
     matches = $(xml).find('detalizacija data:contains("' + id + '")'); 
     if(matches.length != 0){ 
      var drilldownObj = {id:id, xAxis: 1, data:[]}; 
      matches.each(function(){ 
       var value = $(this).parent().find('BP_Lt').text(); 
       var category = $(this).parent().find('kategorija').text(); 
       drilldownObj.data.push([category, parseFloat(value, 10)]); 
      }); 
      options.drilldown.series.push(drilldownObj); 
      return id; 
     } else { 
      return null; 
     } 
    } 

    function parseData(xml1, xml2) { 

     // Split the lines 
     var $xml = $(xml1); 
     var cats = [], //x-axis categories 
      seriesDataMap = {}, 
      seriesDataMap1 = {}; //map of series name to data 

     //combine all processing into a single each callback, this will be faster 
     $xml.find('BP_plan').each(function() { 
      var $row = $(this), 
       category = $row.find('x').text(), 
       seriesName = $row.find('').text(), 
       dataValue = {'y':parseInt($row.find('y').text(), 10)}, 
       dataValue1 = parseInt($row.find('Planas').text(), 10); 
       dataValue.drilldown = getDrilldown($row.find('x').text(), xml2); 
      cats.push(category); 
      dataValue1.drilldown = getDrilldown($row.find('kategorija').text(), xml2); 


      if (seriesDataMap[seriesName] === undefined) { 
       //if we haven't seen this series before, add an empty array to our map 
       seriesDataMap[seriesName] = []; 
      } 
      if (seriesDataMap1[seriesName] === undefined) { 
       //if we haven't seen this series before, add an empty array to our map 
       seriesDataMap1[seriesName] = []; 
      } 
      //add this data point for this series to our map 
      seriesDataMap[seriesName].push(dataValue); 
      seriesDataMap1[seriesName].push(dataValue1); 

     }); 

     //add categories 
     options.xAxis[0].categories = cats; 

     //add series data 
     for (var seriesName in seriesDataMap) { 
      options.series.push({ 
       xAxis: 0, 
       index: 1, 
       name: seriesName, 
       data: seriesDataMap[seriesName], 
       type: 'column', 
       color: '#30bf09' 
      }); 
     } 
     //add series data 
     for (var seriesName1 in seriesDataMap1) { 
      options.series.push({ 
       xAxis: 0, 
       index: 0, 
       name: seriesName1, 
       data: seriesDataMap1[seriesName1], 
       type: 'areaspline', 
       color: '#e0e0e0' 
      }); 
     } 
     chart_1 = new Highcharts.Chart(options); 
     /* 
    $(xml2).find('detalizacija').each(function() { 
       var Data = $(this).find('data').text(), 
        Kategorija = $(this).find('kategorija').text(), 
        BP_Lt = parseInt($(this).find('BP_Lt').text(), 10); 
       var dataOptions = { 
        y: e.point.category, 
        drilldown: { 
         xAxis: 1, 
         id: 'pirmas', 
         categories: [], 
         data: [] 
        } 
       }; 
       if (Data == e.point.category) { 
        dataOptions.drilldown.categories.push(Kategorija); 
        dataOptions.drilldown.data.push(BP_Lt); 
       } 
      }); 
      //drill.push(dataOptions); 
      options.drilldown.push(dataOptions); 
      */ 
    } 

    // Load the data from the XML file 
    $.get('BP_plan.xml', function (xml) { 
     xml1 = xml; 
     $.ajax({ 
      type: 'GET', 
      url: 'detalizacija.xml', 
      dataType: "xml", 
      success: function (duom) { 
       xml2 = duom; 
       parseData(xml1, xml2); 
      } 
     }); 
    }); 
}); 

function UpdateTitle(argument1, argument2) { 
    chart_1.setTitle({ 
     text: argument1 
    }, { 
     text: argument2 
    }); 
}

출처

2014-07-24 08:59:15

Rob Schmuecker, 정말 고마워요! 제안 된 솔루션에 몇 가지 매우 작은 수정/추가 사항을 적용하여 원하는 결과를 얻었습니다. – oliao

드릴 다운이있는 하이 차트 주 차트 및 드릴 다운 차트의 데이터가 다른 xml 파일에있는 경우

답변

관련 문제