javascript - 通过 Ajax 加载 CSV 数据以在 Highcharts 中显示

Question

我在通过 Ajax 将一些外部 CSV 数据加载到 Highcharts 时遇到问题。特别是将返回值传递到 Highcharts 的步骤，我没有得到...

第一个函数加载数据:

function requestData() {
    $.ajax({
        type: "GET",
        url: "xxx",
        dataType: "text",
        success: function(data) 
        {
            var series_return = processData(data);

            // like this???
            //chart.addSeries({
            //  name: "NPP",
            //  data: series_return
            //});                       
        }
    });
};          

这里正在处理数据，因为前几行仅包含文本:

function processData(allText) 
{
    var allTextLines = allText.split(/\r\n|\n/);
    var lines = []; var n = 0; var series_return = [];

    for (var i=1; i<allText.length; i++) 
    {
        if (allTextLines[i])
        {
            if ((allTextLines[i].substring(0,2) == "19") || (allTextLines[i].substring(0,2) == "20"))
            {
                n++;
                series_return[n] = allTextLines[i];
            }
        }                   
    }

    return series_return;
}

数据看起来像这样:

[1: "2015/12/01,15.0,-90.0,0.11532234042553188", 2: "2015/11/01,15.0,-90.0,0.10756382978723407"]

Highcharts 脚本:

// ---------------------------------------------------
// ---------------      Highcharts     ---------------
// ---------------------------------------------------

$(document).ready(function() 
{
    chart = new Highcharts.Chart(
    {
        chart: 
        {
            renderTo: 'div_graph',
            defaultSeriesType: 'spline',
            marginLeft: 120,
            marginTop: 100,
            events: {
                load: requestData
            }
        },
        xAxis: 
        {
            gridLineWidth: 1,
            gridLineDashStyle: 'Dot',
            tickWidth: 0,
            type: 'datetime'
        },
        yAxis: 
        {
            gridLineWidth: 1,
            gridLineDashStyle: 'Dot'
        },
        plotOptions: 
        {
            series: 
            {
                connectNulls: false,
                shadow: false,
                lineWidth: 2,
                color: '#3f9aff',
                marker: 
                {
                    enabled: false
                }
            }
        },  
        series: [{
            name: 'NPP',
            data: []
        }]
    });
});     

那么，将数据传递到 Highcharts 的正确方法是什么？我环顾四周，到处测试，但都没有成功。

感谢任何提示!

Answer 1

最简单的方法是更改​​您的 processData 函数，使其以数组数组结束。您的日期字符串应该是日期或时间戳，您的数字字符串应该是真正的 float ，如下所示:

data = [
    [new Date("2015/12/01,15.0").getTime(), parseFloat(-90.0)],
    // ...
];

然后，您可以将数据传递给 highcharts。

此外，highcharts 似乎提供了 a module to deal with csv data .你看过了吗？