Javascript：如何从这个JSON数据集中绘制图表？

我正试图创建一个网页，在那里我可以从雅虎财经（Yahoo Finance）获取股票价格，并将数据显示在图表中。这是我正在进行的一个项目，作为我正在学习的课程的一部分

我设法找回了数据。我还可以用动态图制作一个基本图表。然而，我不知道如何将两者结合起来，即如何根据我从雅虎财经获得的数据绘制图表

问题是，我从Yahoo Finance检索的数据采用JSON格式，而Dygraphs接受csv格式的数据

我试图解析JSON数据集并创建一个csv格式的字符串，以便将其提供给动态图，但我还没有成功

我不熟悉HTML/CSS/Javascript，我正在努力。有人能建议一个方向吗？ -我可以使用哪些函数以动态图可以使用的格式解析数据？ -或者我应该尝试以不同的格式获取数据（这是我最初尝试的，但没有成功）？ -或者我应该切换到另一个使用JSON的图表库吗

以下是我必须从雅虎财经检索数据的代码（主要来自www.fincluster.com）：

Javascript:

(function($) {
    function getStock(type, complete) {
        var defs = {
            desc: false,
            baseURL: 'http://query.yahooapis.com/v1/public/yql?q=',
            query: {
                quotes: 'select * from yahoo.finance.quotes where symbol = "{stock}" | sort(field="{sortBy}", descending="{desc}")',
                historicaldata: 'select * from yahoo.finance.historicaldata where symbol = "{stock}" and startDate = "{startDate}" and endDate = "{endDate}"'
            },
            suffixURL: {
                quotes: '&env=store://datatables.org/alltableswithkeys&format=json&callback=?',
                historicaldata: '&env=store://datatables.org/alltableswithkeys&format=json&callback=?'
            }
        };

        var query = defs.query[type]
        .replace('{stock}', $("#inputSymbol").val())
        .replace('{sortBy}', defs.sortBy)
        .replace('{desc}', defs.desc)
        .replace('{startDate}', $("#startDate").val())
        .replace('{endDate}', $("#endDate").val())

        var url = defs.baseURL + query + (defs.suffixURL[type] || '');
        $.getJSON(url, function(data) {
            var err = null;
            if (!data || !data.query) {
                err = true;
            }
            complete(err, !err && data.query.results);
            alert(data.query.results);
        });
    }
    window.getStock = getStock;
})(jQuery);

HTML:

检索股票信息
（数据由雅虎财经提供）
输入股票代码列表（例如苹果公司的“AAPL”），以逗号分隔

输入开始日期，格式为“YYYY-DD-MM”

输入结束日期，格式为“YYYY-DD-MM”

单击按钮以启动查询

将标记添加到表中

根据文档，您可以传递一个返回数据的函数：

{String | Function}文件 包含CSV数据的文件或返回此数据的函数。每行最基本的预期格式是“YYYY/MM/DD，val1，val2，…”。有关详细信息，请参阅

点击链接并查找他们提到的“功能”：
他们留下的唯一提示是：

函数可以返回字符串、数组、数据表、URL或任何其他数据类型

---

我建议尝试传入与csv文件类似的各种类型的数据，以查看图表的工作方式。

我成功地格式化了动态图的数据：

(function($) {
    function getStock(type, complete) {
        var defs = {
            desc: false,
            baseURL: 'http://query.yahooapis.com/v1/public/yql?q=',
            query: {
                quotes: 'select * from yahoo.finance.quotes where symbol = "{stock}" | sort(field="{sortBy}", descending="{desc}")',
                historicaldata: 'select * from yahoo.finance.historicaldata where symbol = "{stock}" and startDate = "{startDate}" and endDate = "{endDate}"'
            },
            suffixURL: {
                quotes: '&env=store://datatables.org/alltableswithkeys&format=json&callback=?',
                historicaldata: '&env=store://datatables.org/alltableswithkeys&format=json&callback=?'
            }
        };

        var query = defs.query[type]
        .replace('{stock}', $("#inputSymbol").val())
        .replace('{sortBy}', defs.sortBy)
        .replace('{desc}', defs.desc)
        .replace('{startDate}', $("#startDate").val())
        .replace('{endDate}', $("#endDate").val())

        var url = defs.baseURL + query + (defs.suffixURL[type] || '');
        $.getJSON(url, function(data) {
            var err = null;
            if (!data || !data.query) {
                err = true;
            }
            complete(err, !err && data.query.results);
            //alert(data.query.results);

            //loop object by keys
            var textCsv = "";
            var tempData = data.query.results.quote;
            var dataCsv = "Date,Close\n"
            for (var key in tempData) {
                dataCsv += tempData[key].Date;
                dataCsv += ",";
                dataCsv += tempData[key].Close;
                dataCsv += "\n";
            }
            g = new Dygraph(document.getElementById("graphdiv"), dataCsv);

        });
    }

    window.getStock = getStock;
})(jQuery);

---

谢谢我终于设法以csv格式向有向图提供数据。这其实并不难，但我对Javascript非常陌生，我有很多东西要学。有关详细信息，请参见下面的答案。

(function($) {
    function getStock(type, complete) {
        var defs = {
            desc: false,
            baseURL: 'http://query.yahooapis.com/v1/public/yql?q=',
            query: {
                quotes: 'select * from yahoo.finance.quotes where symbol = "{stock}" | sort(field="{sortBy}", descending="{desc}")',
                historicaldata: 'select * from yahoo.finance.historicaldata where symbol = "{stock}" and startDate = "{startDate}" and endDate = "{endDate}"'
            },
            suffixURL: {
                quotes: '&env=store://datatables.org/alltableswithkeys&format=json&callback=?',
                historicaldata: '&env=store://datatables.org/alltableswithkeys&format=json&callback=?'
            }
        };

        var query = defs.query[type]
        .replace('{stock}', $("#inputSymbol").val())
        .replace('{sortBy}', defs.sortBy)
        .replace('{desc}', defs.desc)
        .replace('{startDate}', $("#startDate").val())
        .replace('{endDate}', $("#endDate").val())

        var url = defs.baseURL + query + (defs.suffixURL[type] || '');
        $.getJSON(url, function(data) {
            var err = null;
            if (!data || !data.query) {
                err = true;
            }
            complete(err, !err && data.query.results);
            //alert(data.query.results);

            //loop object by keys
            var textCsv = "";
            var tempData = data.query.results.quote;
            var dataCsv = "Date,Close\n"
            for (var key in tempData) {
                dataCsv += tempData[key].Date;
                dataCsv += ",";
                dataCsv += tempData[key].Close;
                dataCsv += "\n";
            }
            g = new Dygraph(document.getElementById("graphdiv"), dataCsv);

        });
    }

    window.getStock = getStock;
})(jQuery);