Question

我在Highcharts 4中使用jQuery 1.9.1设置了一个简单的柱形图，我解析了一个CSV文件。我用柱形图显示正常页面，但是当我点击一个条形图时没有任何反应。我确实看到在控制台（IE11）中创建的数组，它们似乎正是我需要的，它们使用正确的语法并且ID匹配。

JS小提琴[是...：//jsfiddle.net/tjxwty3y/ ...我在底部的编辑中改变了这一点]。我举了一个我使用的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网站上的多个帖子（和一些视频），但我完全没有看到我出错的地方（我知道我有）。< / p>

以防万一，这里是来自js小提琴的原始数据，它有库（我通常使用Higcharts 4和JQuery 1.11，但在这里我修改了一些使用JQuery 1.9.1的旧代码）：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>

    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type='text/javascript' src="http://code.highcharts.com/highcharts.js"></script>
    <script type='text/javascript' src="http://code.highcharts.com/modules/data.js"></script>
    <script type='text/javascript' src="http://code.highcharts.com/modules/drilldown.js"></script>
    <style type='text/css'></style>

    <script type='text/javascript'>
        //<![CDATA[
        $(window).load(function () {
            $(document).ready(function () {
                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'column'
                    },
                    title: {
                        text: 'My Title Here'
                    },
                    xAxis: {
                        categories: [],
                        name: []
                    },
                    yAxis: {
                        title: {
                            text: 'Value Here'
                        }
                    },
                    legend: {

                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        y: 15,
                        borderWidth: 0,
                        itemStyle: {

                            color: '#333',
                            fontSize: '15px',

                        },
                        navigation: {
                            activeColor: '#3E576F',
                            animation: true,
                            arrowSize: 12,
                            inactiveColor: '#CCC',

                            style: {
                                fontWeight: 'bold',
                                color: '#333',
                                fontSize: '15px',

                            }
                        }
                    },
                    tooltip: {
                        shared: true,
                        crosshairs: true
                    },

                    plotOptions: {
                        series: {

                            marker: {
                                lineWidth: 1
                            }
                        }
                    },

                    series: [],
                    drilldown: []

                };

                $.get("http://my/csv/notvalid/dev_drilldown4.csv", function (csvData) {

                    var lines = csvData.split('\n');

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

                    var drilldown = {
                        series: []
                    };

                    $.each(lines, function (lineNo, line) {

                        if (lineNo > 0 && lineNo < 4) {

                            var items = line.split(',');
                            var seriesname = String(items[0]); // this is the area
                            var area_cost = parseFloat(items[1]); // this is the data for the rollup
                            var drill_id = String(items[2]); // this will be the id of the drilldown
                            var shift_one_value = parseFloat(items[3]); // shift1 value
                            var shift_two_value = parseFloat(items[4]); // shift2 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]]
                            });

                        }


                    });
                    console.log(series.data);
                    console.log(drilldown.series);

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

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

    </script>

</head>

<body>
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>

</html>

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

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

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

js小提琴是：http://jsfiddle.net/5jzb8hzb/1/。你知道为什么更改'series.data.push'会导致初始图表无法渲染吗？

Answer 1

代码中存在错误;如果您记录options，您将检测到它。 drilldown配置应该具有series密钥。但在你的情况下，密钥在drilldown[0]内;可能是因为使用了push函数。

我改变后的代码工作

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

到

options.drilldown.series = drilldown.series;

在 highcharts之后还应该加载另一个bug-drilldown库。

修改：更新了小提琴：http://jsfiddle.net/dxann41x/1/

Answer 2

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

首先加载Highcahrts然后加载drilldown.js（仅在jsFiddle中发布）
您不应该推送到向下钻取阵列，而是分配已创建的系列
您有drilldown: []，而drilldown: {}
对于系列options.series.push({ data: series.data })，只需使用options.series.push(series)或options.series = [series]

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

完成所有修复后，这里有完整的代码：http://jsfiddle.net/tjxwty3y/7/

最小化的例子：

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);

Highcharts解析的钻取不显示在页面上，但在控制台中显示

2 个答案: