# nashorn-vega

**Repository Path**: DLX4/nashorn-vega-test

## Basic Information

- **Project Name**: nashorn-vega
- **Description**: 在jdk8内置的nashorn搜索引擎上实现了图表的服务端渲染（SVG模式）。

- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-17
- **Last Updated**: 2022-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# nashorn-vega-test

#### 介绍
在jdk8内置的nashorn搜索引擎上实现了图表的服务端渲染（SVG模式）。

#### 软件架构

图表渲染使用[vega](https://github.com/vega/vega)。
另外为了能在nashorn上成功运行SVG模式的图表渲染，还需要一些必要的polyfill：
- [nashorn-polyfill](https://github.com/shendepu/nashorn-polyfill)


最新版本（5.21.0）的vega使用ES6写法可以编译成ES5，但是仍需要一些polyfill：
- babel-polyfill
- regenerator-runtime

#### 运行示例

```
        String vegaSpec = "{\n" +
                "             \"$schema\": \"https://vega.github.io/schema/vega/v5.json\",\n" +
                "             \"description\": \"A basic line chart example.\",\n" +
                "             \"width\": 500,\n" +
                "             \"height\": 200,\n" +
                "             \"padding\": 5,\n" +
                "\n" +
                "             \"signals\": [\n" +
                "               {\n" +
                "                 \"name\": \"interpolate\",\n" +
                "                 \"value\": \"linear\",\n" +
                "                 \"bind\": {\n" +
                "                   \"input\": \"select\",\n" +
                "                   \"options\": [\n" +
                "                     \"basis\",\n" +
                "                     \"cardinal\",\n" +
                "                     \"catmull-rom\",\n" +
                "                     \"linear\",\n" +
                "                     \"monotone\",\n" +
                "                     \"natural\",\n" +
                "                     \"step\",\n" +
                "                     \"step-after\",\n" +
                "                     \"step-before\"\n" +
                "                   ]\n" +
                "                 }\n" +
                "               }\n" +
                "             ],\n" +
                "\n" +
                "             \"data\": [\n" +
                "               {\n" +
                "                 \"name\": \"table\",\n" +
                "                 \"values\": [\n" +
                "                   {\"x\": \"中0\", \"y\": 28, \"c\":0}, {\"x\": \"中0\", \"y\": 20, \"c\":1},\n" +
                "                   {\"x\": \"中1\", \"y\": 43, \"c\":0}, {\"x\": \"中1\", \"y\": 35, \"c\":1},\n" +
                "                   {\"x\": \"中2\", \"y\": 81, \"c\":0}, {\"x\": \"中2\", \"y\": 10, \"c\":1},\n" +
                "                   {\"x\": \"中3\", \"y\": 19, \"c\":0}, {\"x\": \"中3\", \"y\": 15, \"c\":1},\n" +
                "                   {\"x\": \"中4\", \"y\": 52, \"c\":0}, {\"x\": \"中4\", \"y\": 48, \"c\":1},\n" +
                "                   {\"x\": \"中5\", \"y\": 24, \"c\":0}, {\"x\": \"中5\", \"y\": 28, \"c\":1},\n" +
                "                   {\"x\": \"中6\", \"y\": 87, \"c\":0}, {\"x\": \"中6\", \"y\": 66, \"c\":1},\n" +
                "                   {\"x\": \"中7\", \"y\": 17, \"c\":0}, {\"x\": \"中7\", \"y\": 27, \"c\":1},\n" +
                "                   {\"x\": \"中8\", \"y\": 68, \"c\":0}, {\"x\": \"中8\", \"y\": 16, \"c\":1},\n" +
                "                   {\"x\": \"中9\", \"y\": 49, \"c\":0}, {\"x\": \"中9\", \"y\": 25, \"c\":1}\n" +
                "                 ]\n" +
                "               }\n" +
                "             ],\n" +
                "\n" +
                "             \"scales\": [\n" +
                "               {\n" +
                "                 \"name\": \"x\",\n" +
                "                 \"type\": \"point\",\n" +
                "                 \"range\": \"width\",\n" +
                "                 \"domain\": {\"data\": \"table\", \"field\": \"x\"}\n" +
                "               },\n" +
                "               {\n" +
                "                 \"name\": \"y\",\n" +
                "                 \"type\": \"linear\",\n" +
                "                 \"range\": \"height\",\n" +
                "                 \"nice\": true,\n" +
                "                 \"zero\": true,\n" +
                "                 \"domain\": {\"data\": \"table\", \"field\": \"y\"}\n" +
                "               },\n" +
                "               {\n" +
                "                 \"name\": \"color\",\n" +
                "                 \"type\": \"ordinal\",\n" +
                "                 \"range\": \"category\",\n" +
                "                 \"domain\": {\"data\": \"table\", \"field\": \"c\"}\n" +
                "               }\n" +
                "             ],\n" +
                "\n" +
                "             \"axes\": [\n" +
                "               {\"orient\": \"bottom\", \"scale\": \"x\"},\n" +
                "               {\"orient\": \"left\", \"scale\": \"y\"}\n" +
                "             ],\n" +
                "\n" +
                "             \"marks\": [\n" +
                "               {\n" +
                "                 \"type\": \"group\",\n" +
                "                 \"from\": {\n" +
                "                   \"facet\": {\n" +
                "                     \"name\": \"series\",\n" +
                "                     \"data\": \"table\",\n" +
                "                     \"groupby\": \"c\"\n" +
                "                   }\n" +
                "                 },\n" +
                "                 \"marks\": [\n" +
                "                   {\n" +
                "                     \"type\": \"line\",\n" +
                "                     \"from\": {\"data\": \"series\"},\n" +
                "                     \"encode\": {\n" +
                "                       \"enter\": {\n" +
                "                         \"x\": {\"scale\": \"x\", \"field\": \"x\"},\n" +
                "                         \"y\": {\"scale\": \"y\", \"field\": \"y\"},\n" +
                "                         \"stroke\": {\"scale\": \"color\", \"field\": \"c\"},\n" +
                "                         \"strokeWidth\": {\"value\": 2}\n" +
                "                       },\n" +
                "                       \"update\": {\n" +
                "                         \"interpolate\": {\"signal\": \"interpolate\"},\n" +
                "                         \"strokeOpacity\": {\"value\": 1}\n" +
                "                       },\n" +
                "                       \"hover\": {\n" +
                "                         \"strokeOpacity\": {\"value\": 0.5}\n" +
                "                       }\n" +
                "                     }\n" +
                "                   }\n" +
                "                 ]\n" +
                "               }\n" +
                "             ]\n" +
                "           }";

        System.out.println(renderVegaSVG(vegaSpec));
```
输出：

```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="541" height="232" viewBox="0 0 541 232"><g fill="none" stroke-miterlimit="10" transform="translate(28,10)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h500v200h-500Z"/><g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="X-axis for a discrete scale with 10 values: 中0, 中1, 中2, 中3, 中4, ending with 中9"><g transform="translate(0.5,200.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(56,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(111,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(167,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(222,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(278,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(333,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(389,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(444,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(500,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="middle" transform="translate(0,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">中0</text><text text-anchor="middle" transform="translate(55.55555555555556,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">中1</text><text text-anchor="middle" transform="translate(111.11111111111111,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">中2</text><text text-anchor="middle" transform="translate(166.66666666666669,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">中3</text><text text-anchor="middle" transform="translate(222.22222222222223,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">中4</text><text text-anchor="middle" transform="translate(277.77777777777777,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">中5</text><text text-anchor="middle" transform="translate(333.33333333333337,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">中6</text><text text-anchor="middle" transform="translate(388.8888888888889,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">中7</text><text text-anchor="middle" transform="translate(444.44444444444446,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">中8</text><text text-anchor="middle" transform="translate(500,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">中9</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="500" y2="0" stroke="#888" stroke-width="1" opacity="1"/></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="Y-axis for a linear scale with values from 0 to 90"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,200)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,178)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,156)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,133)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,111)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,89)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,67)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,44)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,22)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,0)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(-7,203)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">0</text><text text-anchor="end" transform="translate(-7,180.77777777777777)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">10</text><text text-anchor="end" transform="translate(-7,158.55555555555557)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">20</text><text text-anchor="end" transform="translate(-7,136.33333333333334)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">30</text><text text-anchor="end" transform="translate(-7,114.11111111111111)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">40</text><text text-anchor="end" transform="translate(-7,91.88888888888889)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">50</text><text text-anchor="end" transform="translate(-7,69.66666666666667)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">60</text><text text-anchor="end" transform="translate(-7,47.44444444444444)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">70</text><text text-anchor="end" transform="translate(-7,25.222222222222232)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">80</text><text text-anchor="end" transform="translate(-7,3)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">90</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,200)" x2="0" y2="-200" stroke="#888" stroke-width="1" opacity="1"/></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-scope" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z"/><g><g class="mark-line role-mark" role="graphics-symbol" aria-roledescription="line mark container"><path d="M0,137.77777777777777L55.55555555555556,104.44444444444443L111.11111111111111,19.999999999999996L166.66666666666669,157.77777777777777L222.22222222222223,84.44444444444446L277.77777777777777,146.66666666666669L333.33333333333337,6.666666666666665L388.8888888888889,162.22222222222223L444.44444444444446,48.88888888888889L500,91.11111111111111" stroke="#4c78a8" stroke-opacity="1" stroke-width="2"/></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z"/><g><g class="mark-line role-mark" role="graphics-symbol" aria-roledescription="line mark container"><path d="M0,155.55555555555557L55.55555555555556,122.22222222222223L111.11111111111111,177.77777777777777L166.66666666666669,166.66666666666669L222.22222222222223,93.33333333333333L277.77777777777777,137.77777777777777L333.33333333333337,53.33333333333334L388.8888888888889,140L444.44444444444446,164.44444444444443L500,144.44444444444443" stroke="#f58518" stroke-opacity="1" stroke-width="2"/></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg>
```


#### 扩展资料

1.  [各种JS引擎对比介绍](https://hllvm-group.iteye.com/group/topic/37596)
2.  [bestofjs对vega polyfill的介绍](https://bestofjs.org/projects/vega)
3.  [vega使用示例](https://vega.github.io/vega/examples/line-chart/)
4.  [vega的一个issue提供了本项目的思路](https://github.com/vega/vega/issues/601)