首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >我可以从多个数据源(本例中为多个HighCharts )创建一个单一的GoogleSheets图吗?

我可以从多个数据源(本例中为多个HighCharts )创建一个单一的GoogleSheets图吗?
EN

Stack Overflow用户
提问于 2015-05-12 11:35:38
回答 1查看 868关注 0票数 1

我试图使用来自多个GoogleSheets的数据来生成一个HighChart图。我希望在不将所有数据移动到单个电子表格的一个区域的情况下这样做,特别是因为我希望使用drilldown选项,这将使收集所有数据变得困难。我以为可以将列作为数组传递,然后在图表的data属性中引用数组,但我很难用一个工作表中的一个列来完成这个任务。

我在网上搜索过答案,但我没有发现任何与从多个来源获取数据的图表有关的信息。以前的研究:在创建图表之前使用GoogleSheets数据作为数组:(删除链接)-问题是我只能在这里使用一个GoogleSheets引用,因为图表对象位于数据对象中。

API文档--(删除链接)--告诉我可以访问列,但这不是我遇到问题的地方

查询图表:(删除链接)-我实际上已经考虑过制作隐藏的图表,然后询问数据并从中生成新的图表,但这似乎是很长的一段路,我仍然不确定我是否能够获取我所需要的所有数据。

在相同的页面上使用两个GoogleSheets对不同的图表:(删除链接)我已经这样做了。

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

谢谢。

我的守则:

代码语言:javascript
复制
        //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" 
        }

    });


    }
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-05-12 20:46:16

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

请注意,这里的"tg? key“是您的Google的键,而"&gid=”是而不是 4,这只会告诉选定的工作表4的高级图表,但是对于Google来说,请查看源链接并复制"&gid=“后面的数字。此外,"&tq=“用于选择Google工作表的列,在上面的链接中选择”列A“和”列B“。要了解有关如何选择列和查询输出的更多信息,请参阅:

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

为了将此输出实现到您的javascript代码中,然后使用它来构建图表,您可以使用外部Javascript库来处理这些输出。如果您以CSV的形式输出数据,您可以使用"papaparse.js“将CSV解析为Json,然后您可以通过高级图表读取该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调用,从不同的源导入数据。我不会使用很多,因为这将影响您的加载和减缓数据传输。

NB:对数据进行相应的格式化是非常重要的,因此使用parseFloat()将字符串转换为数字,使用Date.UTC()将字符串转换为日期等等。

希望这能帮到你。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30189684

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档