javascript - Y 轴系列在 Highcharts 中重复

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

虽然图表绘制正确，但类别重复。这是基于这个 example但是它在 Y 轴上只有一个系列，所以我修改了它但遇到了这个问题。

图片如下:

Here's the fiddle .

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/