本方演示如何使用ClojureScript实现交互式数据展示。本文结尾处有Demo，可使用本文自带的数据或使用你输入的数据测试。

创建ClojureScript项目

使用figwheel-main模板创建ClojureScript项目：

lein new figwheel-main cljsozplot.core -- --reagent

修改project.clj，添加我们将用到的库：

[testdouble/clojurescript.csv "0.4.5"]
[metasoarous/oz "1.6.0-alpha6"]
[alandipert/storage-atom "2.0.1"]

使用lein fig或在Emacs中使用cider-jack-in-cljs，选择figwheel-main进入REPL。

使用oz绘制图表

oz的绘图语句是：

[:div [oz/vega-lite plot-data]]

我们只需为oz生成用于绘图的结构数据即可。oz支持vega与vega-lite，后者封 装于前者上，语法更简洁。

vega-lite绘图的输入为Json数据。oz将我们的Clojure格式的输入，即上面的 plot-data转换为Json格式后交给vega-lite处理。由于Clojure数据结构可轻易转换 为Json数据，我们可以参考vega-lite的文档进行参数设定。

plot-data的格式如下。

{:data {:values data}
 :encoding {:x {:field x-field-name
                :type x-field-type}
            :y {:field y-field-name :type y-field-type}
            :color {:value "black"}}
 :mark "line"}

其中这几项需要关注：

• data由CSV文本转换而来，是map组成的列表
• x-field-name与y-field-name 分别为X轴与Y轴的字段名，可以是字符串也可以是Clojure keyword。若带有-，建议使用字符串，避免oz/vega-lite转换时出错。
• x-field-type与y-field-type 分别为X轴与Y轴的类型。这里指的是vega-lite定义类型，常用的是quantitative（数字）与temporal（时间序列）。vega-lite通常会自动转换数据格式，也就是说，声明格式为quantitative时，我们不用写代码将字符串"122"转换为数字122。 注意：使用时间序列时，输入必须是带有年月日的字符串，若只有时和分，如HH:mm格式的数据将无法自动按时间序列解析。

Demo

源码及参考

• 本文源码地址
• oz
• vega-lite doc