Highcharts：如何将完整数据添加到图表中的多个系列

Question

这是一个类似于一个问题（Highcharts parsed Drilldown 未显示在页面上但在控制台中显示）但试图做一些稍微不同的事情（那个工作（感谢 Pawel/Salman），所以我问的是一个新的题）。我正在创建一个具有多个系列的柱形图，其中包含向下钻取。数据来自一个 CSV 文件（jsFiddle 使用了一个模型，感谢 Pawel 如何做到这一点）。

我需要在 Highcharts API 中使用 [name: x, data[{name: Y, y: Z, Drilldown: id}]] 设置系列。我遇到的问题是该系列在日志中显示为正确的数组系列，其中数据采用所需格式，但数据没有被推送到实际的系列 []。我修改了下面的代码，它在 jsFiddle 中：https://jsfiddle.net/49jLf4xo/1/。

$('#container').highcharts({
   chart: {
          type: 'column',
          events: {
          load: function () {

              var csvData = document.getElementById("data").innerHTML;
              var lines = csvData.split('\n');
              var drilldown = {
                      series: []
                };
                var seriesData = [];
                   $.each(lines, function (lineNo, line) {

                       if (lineNo > 0 && lineNo < 4) {
                               var items = line.split(',');
                               var seriesname = String(items[0]); // this is the area name
                               var area_cost = parseFloat(items[1]); // area rollup
                               var drill_id = String(items[2]); // id of the drilldown
                               var shift_one_value = parseFloat(items[3]); // drilldown shift1 value
                               var shift_two_value = parseFloat(items[4]); // drilldown shift2 value

                      if (!isNaN(area_cost) && !isNaN(shift_one_value) && !isNaN(shift_two_value)) {

                                        seriesData.push({
                                            name: seriesname,
                                            data: ({
                                                name: seriesname,
                                                y: area_cost,
                                                drilldown: drill_id
                                            })
                                        });

                                        drilldown.series.push({
                                            id: drill_id,
                                            data: [
                                                ["shift1", shift_one_value],
                                                ["shift2", shift_two_value]
                                            ]
                                        });
                                    }
                                }

                            });

                            drilldown = drilldown;
                            series = [seriesData];
                            console.log(series);
                    }
                },

                title: {
                    text: 'My Title Here'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: 'Value Here'
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    shared: true,
                    crosshairs: true
                },

                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true
                        },
                        colorByPoint: true
                    }
                },

                series: [],

                drilldown: {
                    drillUpButton: {
                        relativeTo: 'spacingBox',
                        position: {
                            y: 0,
                            x: 0
                        },
                        theme: {
                            fill: 'white',
                            'stroke-width': 1,
                            stroke: 'silver',
                            r: 0,
                            states: {
                                hover: {
                                    fill: '#bada55'
                                },
                                select: {
                                    stroke: '#039',
                                    fill: '#bada55'
                                }
                            }
                        }

                    },
                    allowPointDrilldown: false,
                    activeAxisLabelStyle: {
                        textDecoration: 'underline',
                        fontStyle: 'italic'
                    },
                    activeDataLabelStyle: {
                        textDecoration: 'none',
                        fontStyle: 'italic'
                    }
                }
            }
        });

数据的格式在哪里

<div id="data">AREA,VALUE,TYPE,SHIFT1,SHIFT2
    Blog1,50000,Blog1_Shift,5,6
    Blog2,60000,Blog2_Shift,2,3
    Blog3,40000,Blog3_Shift,7,8
</div>

我没有足够的代表来发布控制台的图像，但它看起来像这样： 我没有足够的代表来发布控制台的图像，但“系列”看起来像下面的数据。

Overall it shows:
[object Array]  [Array[3]]
  0
  1
  2

第一个 (0) 扩展如下：

[object Array]                      [Array[3]]
  0                                 [object Array][...]
    0                               [object Object] {...}
      [functions]
        __proto__                   [object Object] {...}
        data                        [object Object] {...}
           [functions]
           __proto__                [object Object] {...}
           drilldown                "Blog1_Shift"
           name                     "Blog1"
           y                        50000
         name                       "Blog1"

其他2个数组也一样。

除了屏幕上的标题，我什么也没有看到。

我已尝试放入 .addSeries，以及一些类似帖子中的一些内容，但这些内容让我无法继续。有人知道我在哪里出错了吗？任何帮助表示赞赏。

谢谢

Answer 1

Div 的数据看起来格式不正确。系列的数据必须是一个数组，而不是一个对象。加载事件中的系列是一个带有数组数组的数组 - 不需要的顶部数组嵌套松散（例如，使用 series = seriesData; 而不是 series = [seriesData];）。您在哪里将系列添加到图表？也没有添加下钻系列。看起来最好先加载和解析数据，然后使用指定图表的选项结构中的数据集创建图表。

工作示例：http://jsfiddle.net/jqmjwb8z/