Looker 集成第三方图表框架

Looker

Looker (http://www.looker.com/)是一个谷歌收购的,收费的,做大数据报表的一个平台。它最主要的特色是:

  • 可以集成各种数据源/数据库,比如PostgresSQL,BigQuery,MySQL等等
  • 可以轻松制作各种图表报表,比如饼状图,柱状图,区域图,圈图,折线图,地图,点状图等等
  • 可以自动预测未来趋势
  • 做好的图表,可以分享到各种平台,项目,或者集成到自己代码里
  • 图表可以继承第三方图表框架,自定义功能,插入自定义html/css/image等等

Looker 本身的使用非常简单,配置好数据源,定义好图表显示的字段,然后各种UI上的操作就能快速建立一个报表。

今天我们这里重点讲一个 Looker 如何集成第三方图表框架,基础的入门就不再赘述。

集成第三方图表框架

这里我们以fusion chart为例子。

步骤一:

在 Looker 浏览器 IDE 根目录中添加 mainifest.lkml 文件(UI上有按钮自动创建),然后创建一个自定义的视图:

visualization: {
  id: "test_dashboard"
  label: "Test Dashboard"
  file: "visualization/test_dashboard.js"
  dependencies: [
    "http://code.jquery.com/jquery-2.2.4.min.js",
    "http://cdnjs.cloudflare.com/ajax/libs/fusioncharts/3.19.0/fusioncharts.min.js",
    "http://cdnjs.cloudflare.com/ajax/libs/fusioncharts/3.19.0/fusioncharts.charts.min.js"
    ]
}

这里 id 就是自定义视图的id,label是名字,它会显示在创建Looker visulization的type列表里,file就是我们自己第三方图表js的文件,可以拖拽到Looker工程里,然后是依赖。

步骤二:

创建一个本地的js项目。或者anglar/react的都行,重点是用第三方图表框架画一个报表出来,然后用比如npm打成一个js文件,就是test_dashboard.js

步骤三:

利用 Looker 图表构造器 调试图表。

这里最主要的是 create 和 updateAsync 两个方法,前者负责创建html虚拟节点,后者能接受Looker的数据/配置等信息,然后每次更新后都会调用,我们渲染图表的实际代码就要写在这里

步骤四:

创建我们的图表,在Looker中调试最终结果即可

参考文献:

  • Looker 自定义图表Hello Word(链接
  • Looker 自定义图表配置(链接

 

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Scroll to Top