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函数更改为最终使用数组数组。你的日期字符串应该是一个日期或时间戳，你的数字字符串是一个真正的浮点数，如下所示：

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

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

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

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

1 个答案: