学习 如何

如何建立一个动画时间线图与MongoDB的图表嵌入SDK188金宝搏手机客户端安卓下载

发布时间:2020年9月2日

  • 图表
  • JavaScript的
  • 数据可视化
  • ...

通过克里斯蒂娜斯特凡诺

分享

在应用程序中嵌入图表SDK允许您将数据可视化费力,给用户和开发者的控制权嵌入图表。当绑定到用户的操作它可以是一个强大的工具,尤其是。我今天的目标是向您展示嵌入SDK在行动。

这只是皮毛,你可以用SDK建立什么表面,我希望这有助于火花想法,它的应用程序中使用。如果您想了解更多关于什么是SDK是或见如何使用验证的嵌入很好的例子,请访问我的同事们的精彩博客文章。

阅读这篇博客文章会给你如何建立在使用嵌入SDK应用程序中的时间图的实际例子。

时间线图表改变作为用户的屏幕记录更新时间

什么是时间线图?

时间线图表是可视化按时间顺序的处理或事件的有效方式。一个很好的例子可能是表示从IOT装置每秒超过时间人口增长,或温度读数。

在写这个的时刻,我们支持23种图表类型188金宝搏手机客户端安卓下载MongoDB的图表和时间轴图表不是它们中的一个。得益于图表嵌入SDK和一些代码,我们可以在我们自己建立类似的行为,我认为这是的SDK是很灵活的一个很好的例子。它使我们能够使用过滤器和设置不同的配置,编程方式更改的嵌入的图表。

我们将分三步建立一个时间轴图:

  1. 创建MongoDB中图表的静态图188金宝搏手机客户端安卓下载
  2. 嵌入在图表中你的应用程序
  3. 以编程方式管理图表的行为与嵌入SDK来显示一段时间内的数据变化

我做的是展示奥运的时间表一小示例应用程序这三个步骤,它显示了从采购奥运会(数据的整个历史中,每个国家的奥运奖牌Kaggle)。我用两个图表 - 一个地理空间和条形图。他们给的数据如何随时间变化,看看那里的奖牌分布不同的观点,并胜的幅度。滑块允许用户通过一次移动。

看着时间的推移,你可以看到,你不会注意到,如果这是一个静态的图表中的数据的一些见解。这里有一些意见:

  • 希腊得到了大部分奖牌在第一次参加奥运会(雅典,1896年)和法国的确在的第二个奥运会(巴黎,1900年)是相同的,所以它看起来就像是一台主机提升你的表现。
  • 1924年对大多数北欧国家非常不错的一年 - 我们在瑞典第三名,挪威(第6名),丹麦(第7)和芬兰(第8)。如果你看瑞典观察,你会看到,它是前5名的大部分时间。
  • 俄罗斯(包括前苏联在这个数据集)中,第一次几乎在1960年8强了,但很快就赶上了,是在总体统计第三名。
  • 澳大利亚在2008年达到了8强,并一直保持,由于位置。
  • 美国是一个领导者几乎时间轴的全部时间。

这是我如何建立它的更多详细信息:

步骤1:创建MongoDB中图表的图表188金宝搏手机客户端安卓下载

你必须创建你打算成为你正在建设的时间表的一部分图表。要做到这一点,最简单的方法是使用188金宝搏手机客户端安卓下载MongoDB的阿特拉斯与自由层集群。一旦你的数据被加载到您的集群,您就可以激活你的项目图表和图表开始。如果你以前没有使用过图表,你可以检查的步骤在这个博客帖子创建图表这里或者您也可以按照教程在我们的综合文档。

下面是我在我的仪表盘创建的两个图表,我会在我的示例应用程序中嵌入:

截图包含两个图表仪表盘

我们有一个条形图,显示前8个国家下令他们在奥运会历史上夺得奖牌的累计总和。

而且还有一个地理空间的图表,显示了相同的数据,但在地图上。

因此,我们有这两个图表,以及所提供的整体数据,没有任何过滤器一个很好的观点。这将是更令人印象深刻,看看这些数字是如何进展奥运会的时间表。为此,我在我的应用程序,在这里感谢嵌入SDK,我会以编程方式使用控制自己的行为嵌入这两个图表过滤上的数据。

第2步:嵌入图表

你还必须允许嵌入的数据和图表。要做到这一点一次,打开图表上的菜单(...),然后选择“嵌入图表”:

嵌入图表选项的屏幕截图

由于该数据是不敏感的,我启用了我的每两个图表的未经验证的嵌入与下面的图片中显示此切换。对于更敏感的数据,你应该选择身份验证选项来限制谁可以查看嵌入图表。

使用JavaScript SDK选项嵌入图表对话框中选择截图

接下来,你必须明确地允许将在过滤器中使用的字段。你这样做,在这上面显示的相同的嵌入对话框。过滤嵌入图表只允许您指定的这些都提前设定字段。即使你使用未经认证的嵌入,你仍然控制您的数据的安全性,所以你可以决定什么可以被过滤。在我而言,这仅仅是一个领域 - “年”字段,因为我在不同的奥运年设置过滤器,这一切我需要我的演示。

用户指定的过滤器选项的屏幕截图

第3步:由程序来控制图表在你的应用

这是包括我上面提到的代码几行的步骤。

示例应用程序是一个小阵营的应用程序,有两个嵌入式图表,你前面看到的位置并排侧。

截图示例应用程序的

目前在排行榜上的滑块。该滑块通过时间轴和表演动作奖牌的总和的国家已经由相关年年获胜。在应用中,你可以通过自己多年使用滑块导航,但是也有在右上角播放按钮,这一切呈现在延时的方式。如何滑块工作原理是,每次改变位置时,我使用SDK方法的过滤器设置为嵌入图表使用setfilter。例如,如果滑块是在2016年,这意味着有一个过滤器,获取从年初上涨开始,直到2016年的所有数据。

              
1
2
3
4
6
7
8
9
10
11
12
13
14
//该函数创建将在数据上执行的过滤器。常量getDataFromAllPreviousYears =endYear)=>{过滤器= {$和:[{:{$ GTE:firstOlympicsYear}},{:{$ LTE:endYear}},]};返回诺言以上的通过率([geoChart.setFilter(过滤器),barChart.setFilter(过滤器),]);};

对于玩游戏功能,我在做同样的事情 - 使用JavaScript函数的setInterval安排一个函数调用改变滤波器每2秒更换滤芯每2秒。

              
1
2
3
4
6
7
8
9
//此功能调度的滤波器呼叫以指定的时间间隔常量setTimelineInterval =()=>{如果(播放){播放();timerIdRef.current = setInterval的(播放,timelineInterval);}其他{clearInterval(timerIdRef.current);}};

在地理空间地图,可以放大感兴趣的区域。欧洲将是一个很好的例子,因为它有很多国家,这让地理空间图表看起来更有活力。您还可以暂停在任何时候自动转发和恢复,甚至点击向前或向后感兴趣的特定点。

结论

使这个应用程序的想法是为了显示嵌入SDK可以如何图表,您可以交互添加到您的图表。这样做时间轴图表不嵌入SDK的功能,但它完美地展现,随着代码一点点,你可以做不同的事情与你的图表。我希望你喜欢的例子,并得到的SDK是多么强大的想法。

整个代码示例中可以看到此回购。所有你需要做的运行它是克隆回购,跑NPM安装NPM启动。这样做将用我的嵌入图表打开与时间轴浏览器,所以你会看到一个工作示例,立竿见影。如果你想尝试这种使用您的数据和图表,我已经把一些亮点在什么要改变的示例代码。

通过注册,您可以快速启动您的想法188金宝搏手机客户端安卓下载MongoDB的云,部署免费阿特拉斯集群,并启动MongoDB的图表。188金宝搏手机客户端安卓下载随时检查我们的文件并探索更多例如嵌入应用程序包括如果你想控制谁可以看到你的嵌入图表认证的例子。

我们也希望能看到你是如何使用嵌入SDK。如果您对如何改进图表任何建议,请188金宝搏手机客户端安卓下载MongoDB的反馈引擎。我们使用这种反馈,以帮助改善图表,并找出哪些功能构建下一代。

快乐图表!

有关

与MongoDB的图表和新188金宝搏手机客户端安卓下载的JavaScript SDK工作
188金宝搏手机客户端安卓下载MongoDB的图标
  • 开发者中心
  • 文档
  • 大学
  • 社区论坛

©M188金宝搏手机客户端安卓下载188博金宝app网站ongoDB的公司