Question

我正在尝试使用drilldown构建列高图，其中主图表和向下钻取的图表的数据来自不同的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>

Answer 1

这就是你要找的东西

演示：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文件

1 个答案: