Question

这是一个类似于一个问题的问题（Highcharts解析钻取没有在页面上显示但在控制台中显示）但是尝试做的事情略有不同（那个有效（感谢Pawel / Salman），所以我要求一个新的题）。我正在创建一个包含多个系列的柱形图，并带有向下钻取。数据来自CSV文件（jsFiddle使用模型，感谢Pawel如何做到这一点）。

我需要使用[name：x，data [{name：Y，y：Z，drilldown：id}]]在Highcharts API中设置系列。我遇到的问题是该系列在日志中显示为一组正确的数组，其数据格式为所需格式，但数据未被推送到实际的系列[]。我修改了下面的代码，它位于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看起来格式不正确。系列数据必须是数组，而不是对象。 load事件中的系列是一个包含数组数组的数组 - 松散的顶部数组嵌套，因为它不需要（例如使用series = seriesData;而不是series = [seriesData];）。你在哪里添加系列图表？钻取系列也没有添加。看起来最好先加载和解析数据，然后在指定图表的选项结构中创建包含数据集的图表。

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

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

1 个答案: