Javascript 已解析的Highcharts向下展开未显示在页面上，但在控制台中显示

我在Highcharts 4中使用jQuery1.9.1设置了一个简单的柱状图，在这里我解析了一个CSV文件。我得到了柱形图显示的正常页面，但当我点击一个条形图时，什么也没有发生。我确实看到了在控制台（IE11）中创建的数组，它们似乎正是我所需要的，它们的语法正确，ID匹配

JS提琴[是.....://jsfiddle.net/tjxwty3y/…我在底部的编辑中更改了这个]。我举了一个我使用的CSV示例，但不知道如何将外部CSV链接到JS Fiddle中。我尝试过代码中嵌入CSV/TSV的示例，它们都很有效，因此我认为这与我如何推送数据有关，因此与外部引用有关

CSV非常简单。我在第一列中有3个类别，它们的值在前面的图表中，后面是第3列中的ID，最后是第4列和第5列中的向下钻取值

CSV looks like this
AREA,VALUE,TYPE,SHIFT1,SHIFT2
Blog1,50000,Blog1_Shift,5,6
Blog2,60000,Blog2_Shift,2,3
Blog3,40000,Blog3_Shift,7,8

我看过多篇文章（和一些视频），其中CSV或TSV在JS Fiddle和Highcharts网站上，但我完全没有看到我哪里出了错（我知道我出了错）

以防万一，这里是来自js fiddle的原始数据，其中包含库（我通常使用Higcharts 4和JQuery 1.11，但这里我修改了一些使用JQuery 1.9.1的旧代码）：

-JSFIDLE演示
//0&&lineNo<4）{
var items=line.split（'，'）；
var seriesname=String（项[0]）；//这是区域
var area_cost=parseFloat（items[1]）；//这是汇总的数据
var drill_id=String（项[2]）；//这将是向下钻取的id
var shift_one_value=parseFloat（项[3]）；//shift1值
var shift_two_value=parseFloat（项[4]）；//shift2值
series.data.push({
名称：seriesname，
y：面积成本，
向下钻取：钻取id
});
向下钻取.series.push({
id:drill_id，
数据：[[“移位1”，移位1值]，“移位2”，移位2值]]
});
}
});
console.log（系列数据）；
console.log（drilldown.series）；
options.series.push（{data:series.data}）；
options.drilldown.push（{series:drilldown.series}）；
var图表=新的Highcharts.图表（选项）；
});
});
});

我感谢任何帮助/建议。 谢谢

编辑： 现在我已经添加了Salman和Pawell的编辑，包括将CSV添加到JSFIDLE（请参阅Pawell的JSFIDLE了解它现在的样子），我遇到了一个额外的问题，但它现在正在工作

我意识到我忘记了系列的“名称”，并在中添加了它，调整了“var系列”并将“series.data.push”更改为“series.push”，并观看了Salman提到的日志。现在没有显示任何内容，但控制台日志显示了包含名称、ID和数据的数据，但没有图表（也没有错误）

---

js小提琴是：。您知道为什么更改“series.data.push”会导致初始图表无法呈现吗？

代码中存在错误；如果您记录

选项

，您将检测到它<代码>向下展开配置应该有一个

系列

键。但在您的情况下，钥匙在

向下钻取[0]

中；可能是因为使用了

push

功能

代码在我更改后生效

options.drilldown.push({ series: drilldown.series });

到

还有另一个bug-应该在highcharts之后加载深入库

---

编辑：更新的fiddle:

代码中有一个bug；如果您记录

选项

，您将检测到它<代码>向下展开配置应该有一个

系列

键。但在您的情况下，钥匙在

向下钻取[0]

中；可能是因为使用了

push

功能

代码在我更改后生效

options.drilldown.push({ series: drilldown.series });

到

还有另一个bug-应该在highcharts之后加载深入库

---

编辑：更新的小提琴：

正如@Salman所注意到的，有几个问题：

• 首先加载Highcahrts，然后是drilldown.js（仅在JSFIDLE中发布）
• 您不应该推送到向下展开数组，而是分配创建的序列
• 您有

  drilldown:[]

  ，而应该是

  drilldown:{}

• 对于系列，您有

  options.series.push（{data:series.data}）

  ，而只需使用

  options.series.push（series）

  或

  options.series=[series]

额外注意：我建议检查那些不是NaN的值——有时编辑器会在文件末尾创建额外的空新行

在完成所有修复后，以下是完整的工作代码：

最小化示例：

var options = {
    chart: {
        renderTo: 'container'
    },
    series: [],
    drilldown: {}

};

var csvData = document.getElementById("data").innerHTML; // like $.get()
var lines = csvData.split('\n');

var series = {
    data: [],
    visible: true,
    type: 'column',
    colorByPoint: true,
    drilldown: true
};

var drilldown = {
    series: []
};
// I know with the below I get an extra line so can deal with that when I get the rest of the data sorted

$.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]); // this is the data for the area rollup
        var drill_id = String(items[2]); // this will be the 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))  {
            series.data.push({
                name: seriesname,
                y: area_cost,
                drilldown: drill_id
            });
            drilldown.series.push({
                id: drill_id,
                data: [
                    ["shift1", shift_one_value],
                    ["shift2", shift_two_value]
                ]
            });
        }
    }
});
options.series = [series];
options.drilldown = drilldown;

var chart = new Highcharts.Chart(options);

var选项={
图表：{
renderTo:“容器”
},
系列：[]，
向下展开：{}
};
var csvData=document.getElementById（“数据”）.innerHTML；//比如$.get（）
var line=csvData.split（'\n'）；
变量系列={
数据：[]，
可见：对，
键入：“列”，
colorByPoint：对，
深入调查：正确
};
变量向下展开={
系列：[]
};
//我知道下面我得到了一个额外的行，所以当我得到剩余的数据排序时可以处理它
$.each（行，函数）（行号，行）{
如果（lineNo>0&&lineNo<4）{
var items=line.split（'，'）；
var seriesname=String（项[0]）；//这是区域名称
var area_cost=parseFloat（items[1]）；//这是该区域的数据
var options = {
    chart: {
        renderTo: 'container'
    },
    series: [],
    drilldown: {}

};

var csvData = document.getElementById("data").innerHTML; // like $.get()
var lines = csvData.split('\n');

var series = {
    data: [],
    visible: true,
    type: 'column',
    colorByPoint: true,
    drilldown: true
};

var drilldown = {
    series: []
};
// I know with the below I get an extra line so can deal with that when I get the rest of the data sorted

$.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]); // this is the data for the area rollup
        var drill_id = String(items[2]); // this will be the 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))  {
            series.data.push({
                name: seriesname,
                y: area_cost,
                drilldown: drill_id
            });
            drilldown.series.push({
                id: drill_id,
                data: [
                    ["shift1", shift_one_value],
                    ["shift2", shift_two_value]
                ]
            });
        }
    }
});
options.series = [series];
options.drilldown = drilldown;

var chart = new Highcharts.Chart(options);