javascript - 将 CSV 数据解析为 JS 对象以在图表中使用。 Uncaught ReferenceError : data is not defined(jsfiddle included)

标签 javascript jquery csv highcharts papaparse

这就是我正在尝试做的事情:

  1. 使用 papa parse 解析 CSV 文件。

  2. 使用解析后的数据创建两个 JS 对象(ohlc 和volume)。

  3. 然后该数据用于创建高股票图表。

使用 papa 解析示例进行解析:

function doStuff(data) {
    //do stuff here
    console.log(data);
}

function parseData(url, callBack) {
    Papa.parse(url, {
        download: true,
        dynamicTyping: true,
        complete: function(results) {
            callBack(results.data);
        }
    });
}

parseData("https://www.quandl.com/api/v3/datasets/WIKI/AAPL.csv", doStuff);

一个有效的 Highchart 示例:jsfiddle

我尝试将前两个示例结合起来:jsfiddle

$(function () {

    var ohlc = [],
    volume = [],
    dataLength = data.length,
    // set the allowed units for data grouping
    groupingUnits = [[
        'week',                         // unit name
        [1]                             // allowed multiples
    ], [
        'month',
        [1, 2, 3, 4, 6]
    ]],

    i = 1;

    function parseData(url, callBack) {
        Papa.parse(url, {
            download: true,
            dynamicTyping: true,
            complete: function(results) {
                callBack(results.data);
            }
        });
    }

    function setObjects(data) {
        console.log(data[i][0]);

        for (i; i < dataLength; i += 1) {
            ohlc.push([
                data[i][0], // the date
                data[i][1], // open
                data[i][2], // high
                data[i][3], // low
                data[i][4] // close
            ]);

            volume.push([
                data[i][0], // the date
                data[i][5] // the volume
            ]);
        }
    }

    parseData("https://www.quandl.com/api/v3/datasets/WIKI/AAPL.csv", setObjects);

    // create the chart
    $('#container').highcharts('StockChart', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Historical'
        },

        yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'OHLC'
            },
            height: '60%',
            lineWidth: 2
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'Volume'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
        }],

        series: [{
            type: 'candlestick',
            name: 'AAPL',
            data: ohlc,
            dataGrouping: {
                units: groupingUnits
            }
        }, {
            type: 'column',
            name: 'Volume',
            data: volume,
            yAxis: 1,
            dataGrouping: {
            units: groupingUnits
            }
        }]
    });
});

任何人都可以帮我解决我做错的事情吗?我知道有两件事还没有完成。数据需要反转,以便按日期升序排列。并且日期需要转换为毫秒。但是,它将帮助我获取当前数据,至少首先插入到对象中,然后从那里开始。

最佳答案

这一点

var i = 1;
dataLength = data.length;

应位于 setObjects 函数 的第一行,其中存在数据并且实际使用值 dataLength

关于javascript - 将 CSV 数据解析为 JS 对象以在图表中使用。 Uncaught ReferenceError : data is not defined(jsfiddle included),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31920307/

相关文章:

javascript - 将默认日期转换为另一个日期(用户的本地时区)

javascript - 幻灯片 - 返回第一张图片

javascript - 使用 AJAX 实现分页后,添加到购物车不起作用

python - csv 模块因逗号作为分隔符而中断

python - 使用 PyE 的 block 中的 Elasticsearch 批量索引

javascript - 在任何表单更改上启用按钮

javascript - 如何从图像路径中删除字符串

javascript - ExtJS 方法 load() 不起作用

javascript - 我怎样才能专注于 selectize 选择框?

php - 通过csv文件问题将日期导入mysql