@risklab / charts-react

RiskLab图表的一流React适配器包。

这是React应用程序推荐的图表入口点。它保留了核心图表 引擎 @risklab/charts 并给产品团队一个清晰的React安装界面 这在复习时很容易解释。

安装

npm install @risklab/charts @risklab/charts-react

快速启动

import { Chart } from "@risklab/charts-react";

const series = [
  {
    id: "latency",
    name: "P95 latency",
    type: "line",
    data: [
      { x: "Mon", y: 112 },
      { x: "Tue", y: 96 },
      { x: "Wed", y: 104 },
      { x: "Thu", y: 88 },
    ],
  },
];

export function LatencyChart() {
  return (
    <Chart
      title="Service latency"
      height={320}
      series={series}
      yAxis={{ title: { text: "Milliseconds" } }}
    />
  );
}

主题

RiskLab图表可以遵循主机设计系统，而无需特定于react的包装器 包:

import { createTheme } from "@risklab/charts";
import { applyThemeCSSVars } from "@risklab/charts/css-vars";

使用 @risklab/charts/theme-object 当主机应用程序已经有主题时 对象，并且需要一个直接令牌桥接。