开源图表库Highcharts教程:和WebDataRocks Pivot构建仪表板

翻译|使用教程|编辑:吴园园|2019-09-20 15:05:32.343|阅读 42 次

概述:Highcharts是一款纯JavaScript编写的图表库,本文将为你介绍使用Highcharts和WebDataRocks Pivot构建仪表板。

相关链接:

Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts现已更新至最新版本7.2.0,新版本添加了新的顶级选项-说明;几乎所有系列都增加了对多个色轴的支持;增加了高对比度光和高对比度 - 黑暗主题,与背景形成3:1对比度并修复了一些之前存在的BUG,赶快下载试用吧~

点击下载Highcharts最新版

如果您正在寻找基于Web的工具来切片,切块和分析数据以及可视化这些数据,那么组合Highcharts和WebDataRocks中的免费数据透视表工具可能正是您所寻找的。

它们共同允许您生成功能强大的基于Web的仪表板,可以满足多用途分析和报告需求,并与任何项目集成。
有了这种方法,您和您的用户将能够比以前更快更快地(并且更有可能,更便宜)提出数据驱动的决策。

为何选择仪表板

许多仪表板仅用于报告数据。但是,一旦将数据操作和可视化相结合,分析就会变得更加复杂。

不需要昂贵的BI(商业智能)。您只需要WebDataRocks Pivot Table和Highcharts。以下是它们如何协同工作:

通过将原始数据作为输入,数据透视表将其转换为可理解的表格报告。在我们的例子中,这也为Highcharts图表引擎准备数据,以便您可以直观地浏览数据。

开源图表库Highcharts教程:和WebDataRocks Pivot构建仪表板

数据透视表组件带有一组聚合函数,一个拖放界面,一个舒适的字段列表和自定义选项。在与图表库特别是Highcharts集成时,它非常灵活。

构建仪表板

构建任何仪表板都需要首先定义数据分析的目标,指定关键指标并收集相关数据。

我们不会参与本教程的准备工作。我们将扮演一个虚构的人力资源部门的角色,希望更好地可视化有关组织员工的数据。用一些虚构的人力资源数据,帮助我们开始实验。

那么,我们应该从哪里开始呢?

第1步:包含库

 与Highcharts一样,Pivot Table与大多数前端技术(包括React和Angular框架)顺利集成。对于本教程,我们不讨论框架,而只是使用静态HTML页面进行演示。

通过它的CDN将WebDataRocks链接到库,创建一个空的HTML页面并将WebDataRocks嵌入到我们的页面中。

打开您的HTML文件,其中包括带有一些示例数据的WebDataRocks。

第2步:添加数据

嵌入数据透视表后,我们就可以用数据填充数据透视表了。将其连接到数据源。

步骤3:建立报告

接下来,定义要在网格上显示的数据。

这是我们得到的:

1569382845.gif

步骤4:将数据发送到图表

 集成Highcharts很容易。如Highcharts文档中所述,一个整洁的JSON文件就是用默认设置来获取图表所需的全部内容。

对我们来说幸运的是,此步骤可以由脚本附带的WebDataRocks连接器处理。

要将数据发送到图表,我们可以使用一种特殊的方法– webdatarocks.highcharts.getData()。

顾名思义,该方法从枢轴请求并获取聚合数据。根据图表的类型,该方法会根据所需的结构对数据进行预处理。(这很容易!)一旦触发了方法的回调,便会根据接收到的数据生成图表。如果基础数据(即报告)已更改,则图表也会更新。

第5步:自定义外观

 现在,您可以将仪表板自定义为您选择的配色方案。

结果

通过将两个JavaScript库一起使用,您可以与数据透视表进行交互并立即查看图表中反映的更改。

=====================================================

想要购买Highcharts正版授权的朋友可以咨询慧都官方客服

更多精彩内容,敬请关注下方的微信公众号,及时获取产品最新资讯▼▼▼

图片2.jpg



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:Highcharts https://www.highcharts.com/blog/post/building-a-dashboard-with-highcharts-and-webdatarocks-pivot/

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Highcharts

纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表

购物车 在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat