javascript - 我可以从多个数据源(本例中为多个 GoogleSheets)创建单个 HighCharts 图表吗

Question

我正在尝试使用多个 GoogleSheet 中的数据来生成单个 HighChart 图表。我希望在不将所有数据移至单个电子表格的一个区域的情况下执行此操作，特别是当我想使用向下钻取选项时，这将很难将所有数据收集在一起。我认为我可以将列作为数组传递，然后在图表的 data 属性中引用该数组，但我很难做到这一点，即使是一张纸上的一列。

我在网上搜索了答案，但没有找到任何与 highcharts 从多个来源获取数据相关的内容。先前的研究:在创建图表之前使用 GoogleSheets 数据作为数组:(已删除链接)- 问题是我只能在此处使用一个 GoogleSheets 引用，因为图表对象位于数据对象内部。

API 文档 -(已删除链接)- 告诉我可以访问这些列，但这不是我遇到问题的部分

查询图表:(已删除链接)-我实际上考虑过制作隐藏图表，然后询问数据并从中制作新图表，但这似乎是一个很长的路要走，我仍然不确定我是否可以捕获我需要的所有数据。

在同一页面上使用两个 GoogleSheet 来制作单独的图表:(已删除链接)我已经这样做了。

请您帮助我了解如何在对象本身之外访问该对象的属性和方法？

谢谢。

我的代码:

        //Function to produce a data array ***Not Working - Cannot extract array from object method***
    function getData(){

    Highcharts.data({
        googleSpreadsheetKey: '12x66_QEkTKg_UzvpHEygdTmfnu7oH81pSQYn78Hxt80',
        googleSpreadsheetWorksheet: 4,
        startColumn: 16,
        endColumn: 22,
        startRow: 63,
        endRow: 76,

        parsed: function (columns) {
            var dataTest2 = [];
            var columnLength = columns[1].length;
            for (i = 0; i < columnLength; i = i + 1) { 
                dataTest2.push(columns[1][i]);

            }

            alert(dataTest2); //This works here, but not if I move it outside of the method, even if I return it.
            var testReturn = this.googleSpreadsheetKey; //trying to return any property using "this" - I've also tried this.googleSpreadsheetKey.value but still undefined
            return testReturn; //returns "Undefined" 
        }

    });


    }

Answer 1

您可以使用 Google 表格 webQuery。基本上，这是一种将电子表格的数据导出为给定格式(例如 csv、json 等)的方法。在您的情况下，链接应如下所示:

• https://docs.google.com/spreadsheet/tq?key=12x66_QEkTKg_UzvpHEygdTmfnu7oH81pSQYn78Hxt80&gid=4&tq=select%20A,%20B&tqx=reqId:1;out:csv;%20responseHandler:webQuery

请注意，此处“tg?key”是您的 Google 表格的键，“&gid=”不是4，这仅告诉 Highcharts 选定的工作表 4，但对于 Google 表格，请查看源链接并复制“&gid=”后面的数字。此外，“&tq=”用于选择 Google 表格的列，在上面的链接中选择“Column A”和“Column B” em>”。要了解有关如何选择列和查询输出的更多信息，请参阅:

• https://developers.google.com/chart/interactive/docs/querylanguage?csw=1#Setting_the_Query_in_the_Data_Source_URL

最后，“&tqx=”用于以您想要的格式输出数据。上面的链接使用“out:csv”，它将数据输出为逗号分隔值。如果您愿意，也可以是 Json。看一下这个文档:

• https://developers.google.com/chart/interactive/docs/dev/implementing_data_source#requestformat

为了将此输出实现到您的 JavaScript 代码中(然后用于构建图表)，您可以使用外部 Javascript 库来处理这些输出。如果您将数据输出为 CSV，则可以使用“papaparse.js”将 CSV 解析为 Json，然后 Highcharts 可以读取该 Json 并允许您构建图表。引用这个文档:

• http://papaparse.com/docs#remote-files

另一种方法是直接将 Google 表格输出为 Json，然后使用 jquery 进行 Ajax 调用并将 JSON 编码的数据加载到 Javascript 代码中。准确地说，您也许可以使用 jQuery.getJSON() 来获取数据。有关如何获取 Json 的更多详细信息，请查看此链接:

• http://api.jquery.com/jquery.getjson/

最后，由您选择输出数据的格式，我更喜欢使用 Json，因为它可以节省您将 CSV 转换为 Json 的额外步骤。最适合您并且更容易理解的方式。

获得数据后，您可能需要使用 Json.parse() 解析 Json 对象，然后使用 .push() 将数据组织到数组中>。正如 @jlbriggs 所说，在构建图表之前先组织数据。之后，您可以进行两个、三个或更多 Ajax 调用以从不同源导入数据。我不会使用很多，因为这会影响您的加载并减慢数据传输速度。

注意:相应地设置数据格式对于 Highcharts 识别数据非常重要，因此请使用 parseFloat() 将字符串转换为数字，Date。 UTC() 将字符串转换为日期等

希望这对您有帮助。