在Highcharts中组合预处理数据和向下钻取

时间:2014-07-07 12:55:28

标签: javascript jquery charts highcharts

我一直在努力解决这个问题。我是一个初学者与highcharts和javascript我已经遇到了这个问题,我不知道如何解决它,任何帮助是非常感谢。

我有一个highcharts图表,它读取.csv文件并获取数据并使用yAxis和xAxis名称和类别自动创建图表等。我想要完成的是向此图表添加向下钻取功能。深入分析图表也有预处理数据,但目前我正试图在数据中设置下钻,如http://jsfiddle.net/yw4Vh/

series: [{data: [{ name: 'Fruits', y: 10, drilldown: 'fruits'

但由于某些原因,当我遍历我的代码时,它就像我不能为每一行设置明细。我的javascript代码也没有错误,所以我被卡住了。 我在网上看过很多其他的例子,但这对我没有帮助,所以如果你不能直接链接一些代码而不解释,请尽可能地帮助我。这是我的代码,特别是这部分是我认为的问题所在。如何为每一行的series.data.drilldown分配series.name。

链接到我的代码:http://jsfiddle.net/vF5C8/1/

$.get('prof2.csv', function(data) {
            // Split the lines
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(';');


                // header line containes categories
                if (lineNo == 0) {
                    $.each(items, function(itemNo, item) {
                        if (itemNo > 0) options.xAxis.categories.push(item);

                    });
                }

                // the rest of the lines contain data with their name in the first position
                else {
                    var series = { 
                        data: [],
                        visible:false,
                        type: 'column'

                    }
                    $.each(items, function(itemNo, item) {
                        if (itemNo == 0) {
                            series.name = item;
                            series.data.drilldown = 'item';

                        } else {
                            series.data.push(parseFloat(item));
                        }

                    });


                    options.series.push(series);

                }

            });

            var chart = new Highcharts.Chart(options);
        });

我的.CSV档案中的示例代码

1995;1996;1997;1998;1999;2000;2001;2002;2003;2004;2005;2006;2007;2008
Ál;18461;27588;20862;25185;27946;20323;22082;;;;;;;
Bles;3237;2947;3185;3245;3319;3563;3710;;;;;;;
Díl;2550;2980;2762;1894;1657;2161;3352;;;;;;;
Dugg;101;173;232;86;183;204;238;;;;;;;
Fýll;8059;8920;10093;9037;7739;10495;10323;;;;;;;
Gr;35350;37657;41240;38017;35038;32510;35692;;;;;;;
Háv;2022;1860;1556;1496;1843;1949;1924;;;;;;;
Heið;10695;12182;14674;15396;13903;14271;12557;;;;;;;
Hel;1876;1619;2629;2283;1376;1412;1409;;;;;;;
Hett;2958;2696;2854;2306;1910;1527;1274;;;;;;;
Hra;7119;6653;5987;5564;4555;3087;3884;;;;;;;
Hreir;329;361;260;300;406;359;462;;;;;;;
Hvít;3942;4546;3771;3187;5496;4251;3111;;;;;;;
Kj;2617;2292;1993;1752;1302;1293;1183;;;;;;;
Lan;52867;65179;59529;65612;59797;66567;52839;;;;;;;

1 个答案:

答案 0 :(得分:2)

问题是你如何链接点和系列(下钻)。你现在有:

    drilldown: {
        series: [{
            id: '1994',
            data: [
                ['AU', 14],
                ['NE', 21],
                ['NV', 12],
                ['SU', 15],
                ['VE', 16],
                ['VF', 34]
            ]
        } ... ]

因此系列的ID为1994。现在,当你在第一级系列中获得积分时:

            $.each(items, function (itemNo, item) {
                if (itemNo == 0) {
                    series.name = item;
                    series.data.drilldown = 'apple'; // remove that - it's just wrong

                } else {
                    series.data.push(parseFloat(item)); //adding points to series
                }
            });

您应为每个点添加drilldown属性,以便与下钻系列相关联,如下所示:

                    series.data.push({
                        y: parseFloat(item),
                        drilldown: '1994' // must match with `id` in drilldown.series
                    }); //adding points to series with drilldown

就是这样。您只需要确定哪个系列的钻取位置。