@ 蓝印- 图表/ lib

蓝图图的核心库——一个由DSL驱动的以D3为主的绘图引擎.

安装

npm install @blueprint-chart/lib

快开始

节点 — 将 SVG 和 PNG 写入磁盘

import { render } from '@blueprint-chart/lib'
import { writeFile } from 'node:fs/promises'

const chart = await render(bpc)
await writeFile('chart.svg', await chart.toSvg())
await writeFile('chart.png', await chart.toPng({ width: 1200 }))

浏览器-挂载和步骤场景

const { mount, scene } = await render(bpc)
mount('#chart')   // element or selector
scene(2)          // advance to scene index 2

制作图表的最简单方式是IIFE运行时间,它自动扫描嵌入式图表定义的文档,并让每个文档内出一行(在脚本标记前插入一个沙盒内):

<script src="https://unpkg.com/@blueprint-chart/lib/dist/lib/lib.iife.js"></script>

<script type="application/blueprint-chart">
  chart MyChart {
    data { values = "[[0,1],[1,4],[2,2]]" }
    series "line" { color = "steelblue" }
  }
</script>

对于一个ES模块项目中的程序用途,lib暴露了基础原始: parse (DSL —— AST), (中文(简体) ), validateChart (AST ) —— (韩语) ValidationResult 并打出错误和警告, buildChartOptions (AST-提供选择), createFrame编号 :createCanvas,和图表登记(registerChart, (中文(简体) ), getChart) (中文(简体) ). 见 标准/指数.ts 完全公开API.

DSL 语法

图表 DSL 是由 PEG 语法定义的 src/dsl/grammar.peggy 并编入 src/dsl/grammar.js 使用 佩吉。 。 。 .

EBNF 概览

Chart       = "chart" Identifier "{" ChartMember* "}"
ChartMember = DataBlock | Colorize | AreaFill | Annotation | Series | Scene | Property

DataBlock   = "data" "{" Property* "}"
Colorize    = "colorize" String "{" Property* "}"
AreaFill    = "area-fill" String String "{" Property* "}"
Annotation  = "annotation" String "{" Property* "}"
Series      = "series" String "{" Property* "}"
Scene       = "scene" String "{" SceneMember* "}"
SceneMember = DataBlock | Colorize | AreaFill | Annotation | Property

Property    = PropertyKey "=" PropertyValue
PropertyKey = String | Identifier
PropertyValue = Number "%" | Number | String | Identifier

Identifier  = [a-zA-Z_#][a-zA-Z0-9_#-]*
Number      = [0-9]+("."[0-9]+)?
String      = '"' (EscapeSequence | [^"\\])* '"'

示例

chart horizontal-bar {
  title = "Revenue by Region"
  sort = descending

  data {
    "North America" = 75%
    "Europe" = 53.85%
    "Asia" = 44%
  }

  colorize "North America" {
    color = "#e53e3e"
    label = "Leader"
  }

  scene "Focus" {
    sort = ascending
    colorize "Asia" {
      color = "#38a169"
    }
  }
}

AST 节点类型

再生成解析器

生成的解析器( E)src/dsl/grammar.js) 被检查为 git ,所以下游包可以直接导入 lib 源而无需构建步骤 .

编辑后重生 grammar.peggy数字 :

pnpm --filter @blueprint-chart/lib run generate:parser

此功能也在前自动运行 build 财务报告和审定财务报表 test 通过 prebuild编号 :pretest 钩子.

颜色调色板

内置的调色板从 催眠药 由Joseph Music所收录,为数据可视化所收录的2700+彩色调色板. 根据麻省理工学院的许可.