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/