@risklab / charts-vanilla

@risklab/charts-vanilla 推荐的无框架图表表面是什么 RiskLab。

当你需要的时候使用它：

• 静态站点或混合堆栈图表
• 对安装和生命周期的显式控制
• 一个安装表面，可以与html， Alpine, Astro islands， 经典的服务器渲染应用程序和自定义shell

安装

npm install @risklab/charts @risklab/charts-vanilla

快速启动

import { mount } from "@risklab/charts-vanilla";

const host = document.getElementById("chart-root");

if (host) {
  mount(host, {
    title: "CPU saturation",
    series: [
      {
        id: "cpu",
        name: "CPU %",
        type: "area",
        data: [
          { x: "09:00", y: 42 },
          { x: "10:00", y: 55 },
          { x: "11:00", y: 61 },
        ],
      },
    ],
    yAxis: { title: { text: "Percent" } },
  });
}

设计系统配合

使用 @risklab/charts/css-vars 当您希望主机级图表令牌可用时 到纯CSS、顺风、CSS模块或其他设计标记管道。