@casoon/图
在 Astro 构建过程中构建静态,可访问的 SVG 或 HTML 图表 。 组件仅运行于 服务器和运入浏览器时没有图表 JavaScript .
软件包将编译的渲染器带入了WebAssembly,所以这是你安装的全部. 这需要 节点.js 22.12或更新.
npm install @casoon/chartlet
---
import Chart from '@casoon/chartlet/astro';
import chart from '../data/monthly-revenue.json';
---
<Chart id="monthly-revenue" spec={chart} />
id 在页面中必须是稳定和独特的。 它防止在下列情况下的可访问性ID相撞:
相同的规格被嵌入不止一次.
使用 format="svg" 仅用于图形或 format="html" 默认数字,标题,
源和数据表输出。 HTML 表格默认使用本地披露; 设置
table="visible" 以永久显示.
调色器 API
import { renderChart } from '@casoon/chartlet';
const { content, warnings } = renderChart(spec, { format: 'svg', idPrefix: 'revenue' });
选项 : format, (中文(简体) ), table, (中文(简体) ), idPrefix, (中文(简体) ), variant (单位:千美元)mobile 使移动变体单独成为
SVG , (英语), print 图表为 SVG,带有PDF 和打印渲染器的字面颜色, social 图表
在1200×630画布上,用于打开图形图像, strict 财务报告和审定财务报表 manifest (单位:千美元)true 添加出处 manifest 图表
标准规格的SHA-256和 content,格式、变体、ID前缀和
警告,没有时间戳. warnings 持有 CLI 写入的行; 无效的规格
丢与 CLI 的信息。 输出与 chartlet CLI(英语:CLI).
renderChartDetailed(spec, options) 使用相同的参数,但不会丢入无效的
规格: 它返回 { ok, error?, warnings } 与 { code, path, message } 诊断,
加号 content, (中文(简体) ), styleHashes 财务报告和审定财务报表 manifest 当渲染成功时. spec 也许是JSON
语句.
inspectChart(spec, { disable }) 运行 检查
一种模型,不做它,因为 chartlet inspect 是否为: { ok: true, findings } 与
{ code, severity, path, message, hint } 每项调查结果(severity 实值 gap 或者说 hint),或
{ ok: false, error } 无效的规格,不检查或未知类型
代码在 disable。 。 。 .
要使用已安装的 CLI 而不是 Web Assembly, 设置 CHARTLET_BIN 走向它的绝对路径
或通过 binary。 。 。 .
内容安全政策
内含图表样式 <style> 要素. styleHashes 列出他们的CSP来源
表达式 ('sha256-…'),按初次出现顺序排列
style-src 完全允许:
const { content, styleHashes } = renderChart(spec, { idPrefix: 'revenue' });
headers.set('Content-Security-Policy', `style-src 'self' ${styleHashes.join(' ')}`);
Astro 在无引文的情况下采取散列:每页通过
Astro.csp?.insertStyleHash(hash.slice(1, -1)),或用于所有页
security.csp.styleDirective.hashes。 。 。 . createRenderer 返回同一字段.
互动模块
@casoon/chartlet/interactive 是一个不依赖图表的可选浏览器模块
执行 hooks: true: 有值(指针和键盘) 的横线, 系列切换, 滚动
电台和回放。 仅导入页面所用的特性 :
import { enhance, crosshair, toggle } from '@casoon/chartlet/interactive';
enhance(document.querySelector('figure.chartlet-figure'), { crosshair, toggle });
它从数据表读取值,从几何学读取值 data-* 钩子,不需要内含脚本和
仅通过 CSSOM 设置样式。 见
互动。 。 。 .
建筑建造器
@casoon/chartlet/builder 在代码中组装一个架构规格并返回为
普通对象用于 renderChart。ID是明确的或与 id(...); 构件为
平面函数; fanOut 财务报告和审定财务报表 fanIn 用列表连接一个组件。 注射过两次
提及未申报的内容.
import { architecture } from '@casoon/chartlet/builder';
const a = architecture();
const api = a.component('api', 'API');
const db = a.component('db', 'Orders', { kind: 'database' });
a.connect(api, db, { label: 'reads, writes' });
const spec = a.spec({ title: 'Orders' });
flow() 以同样的方式构建流程图,其中 lane, (中文(简体) ), node, (中文(简体) ), group同样的边缘呼叫,
mainPath 财务报告和审定财务报表 sameRank。见 Java 脚本运行时间。 。 。 .
云浮工人与维特
无法从字节编译 WebAssembly 的运行时间, 如工作字节, 导入模块并传递
给 createRenderer 从 @casoon/chartlet/wasm,它没有节点.js导入:
import wasm from '@casoon/chartlet/chartlet.wasm';
import { createRenderer } from '@casoon/chartlet/wasm';
const { renderChart } = createRenderer(wasm);
在 Vite 浏览器的构建中, 从释放的 URL 中编译 :
import wasmUrl from '@casoon/chartlet/chartlet.wasm?url';
import { createRenderer } from '@casoon/chartlet/wasm';
const { renderChart } = createRenderer(
await WebAssembly.compileStreaming(fetch(wasmUrl)),
);
发展
src/chartlet.wasm 没有承诺. npm run build:wasm 盖起它 wasm/ 货箱
仓库(目标) wasm32-unknown-unknown,优化为 wasm-opt 当它被安装的时候;
npm pack 财务报告和审定财务报表 npm publish 先运行它.