javascript - 在 Highcharts 中结合预处理数据和下钻

Question

这个问题困扰我很久了。我是 highcharts 和 javascript 的初学者，我遇到了这个问题，我不知道如何解决它，非常感谢任何帮助。

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

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

但出于某种原因，当我循环遍历我的代码时，我无法为每一行设置向下钻取。我的 javascript 代码也没有错误，所以我被卡住了。 我在网上看到了很多其他的例子，但这对我没有帮助，所以如果可能的话，如果你不能只链接一些代码而不解释，那会很有帮助。这是我的代码，特别是这部分是我认为的问题所在。如何为每一行分配 series.name 到 series.data.drilldown。？

链接到我的代码: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;;;;;;;

Answer 1

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

    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 属性，以链接到 drilldown 系列，如下所示:

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

仅此而已。您只需确定哪个点向下钻取到哪个系列。