Y轴系列在高图中重复

Question

这是我的代码的片段：

$.get('https://dl.dropboxusercontent.com/u/75734877/data.csv', function (data) {
    var lines = data.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        if (lineNo === 0) {
            $.each(items, function (itemNo, item) {
                if (itemNo > 1) { // "DateTime" word in first line
                    options.series.push({
                        name: "Rainfall Intensity",
                        data: [],
                        tooltip: {
                            valueSuffix: "  mm/hr."
                        },
                        color: "#0000ff"
                    }, {
                        name: "Accumulated Rainfall",
                        data: [],
                        tooltip: {
                            valueSuffix: " mm"
                        },
                        yAxis: 1,
                        color: "#ff0000"
                    });
                }
            });
        } else {
            $.each(items, function (itemNo, item) {
                if (itemNo === 0) {
                    options.xAxis.categories.push(item);
                } else if (itemNo === 2) {
                    options.series[2].data.push(parseFloat(item));
                } else if (itemNo === 3) {
                    options.series[3].data.push(parseFloat(item));
                }
            });
        }
    });
    var chart = new Highcharts.Chart(options);
});

尽管该图已正确绘制，但类别是重复的。 这是基于此示例的，但它在Y轴上只有一个序列，因此，我对其进行了修改，但遇到了此问题。

这是图片：

这是小提琴 。

Answer 1

问题是由CSV的错误解析引起的，因为您多次推送了序列。 更好的方法是在循环之前初始化系列，然后引用特定的系列。 最后一步是添加点。

$.get('https://dl.dropboxusercontent.com/u/75734877/AGUSAN_DEL_NORTE-CABADBARAN-RAIN2-.csv', function (data) {
                var lines = data.split('\n');

                options.series.push({
                    name: "Rainfall Intensity",
                    data: [],
                    tooltip: {
                        valueSuffix: "  mm/hr."
                    },
                    color: "#0000ff"
                }, {
                    name: "Accumulated Rainfall",
                    data: [],
                    tooltip: {
                        valueSuffix: " mm"
                    },
                    yAxis: 1,
                    color: "#ff0000"
                });

                $.each(lines, function (lineNo, line) {
                    var items = line.split(',');
                    if (lineNo > 0) {
                        $.each(items, function (itemNo, item) {
                            if (itemNo === 0) {
                                options.xAxis.categories.push(item);
                            } else if (itemNo === 2) {
                                options.series[0].data.push(parseFloat(item));
                            } else if (itemNo === 3) {
                                options.series[1].data.push(parseFloat(item));
                            }
                        });
                    }
                });

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

示例： http ： //jsfiddle.net/tZayD/78/