带下钻的高图，其中主图和下钻图的数据来自不同的XML文件
highchart with drilldown where data for main chart and drilled down chart are from different xml files
我试图构建列高图与钻下，其中主图表和钻下图表的数据来自不同的xml文件。这可能吗?我找不到任何例子。我的代码不能正常工作(我得到主图表，但与点击列没有发生)。在我看来，我无法将钻取选项传递给highchart。当然，问题可能比我想象的要严重得多。
任何帮助都是感激不尽的。
代码:$(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>
<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>
这是你要找的
演示: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
});
}
相关文章：
- 我应该如何从xml文件构建一个javascript页面
- 如何使用javascript或jquery mobile从url读取和显示XML文件
- 如何使用JQUERY解析大型XML文件并将其可视化为HTML格式
- Javascript/JQuery.本地缓存xml文件
- xml文件在js项目目录结构中的位置
- 使用jquery动态解析XML文件
- 指定单击链接时要加载的xml文件
- 使用javascript读取本地XML文件并在html页面中显示
- 将xml文件导入pdf(Acrobat）
- 使用AJAX传递的数据编辑XML文件-正在删除XML数据
- 在HTML文档中使用XML文件中的数据
- 可以't从xml文件中提取数据
- 通过JS/AAJAX在XML文件中搜索1个数据
- 搜索XML文件并使用javascript显示结果
- Windows 8市场应用程序JS，访问远程XML文件
- 将Xml文件链接到HTML
- 如何将 XML 文件包含在摩卡测试用例中
- 无法在 jsTree 中通过 HTTP 加载 XML 文件
- 在 XML 文件中搜索 TestComplete 中的特定属性值
- 如何使用Iron Router在Meteor中生成XML文件
