# @flowbite-svelte-plugins/chart 中文文档

规范地址：https://npmcn.com/package/%40flowbite-svelte-plugins/chart/

版本：0\.2\.4
npm 元数据更新时间：2025-06-21T04:37:20.652Z
中文译文更新时间：2026-11-15T00:10:02.452Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40flowbite-svelte-plugins/chart
原文对照：https://npmcn.com/package/%40flowbite-svelte-plugins/chart/?lang=original
项目主页：https://flowbite-svelte.com/docs/plugins/charts
源码仓库：https://github.com/shinokada/flowbite-svelte-plugins

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：13.9 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：svelte ^5\.0\.0，tailwindcss ^4\.1\.4
- 首次发布：2025-06-17T18:40:52.745Z
- 最新版本发布：2025-06-21T04:37:20.464Z
- 近 30 天下载量：17333（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

Flowbite Svelte 的图表和数据可视化组件

## 安装

```sh
npm install @flowbite-svelte-plugins/chart
```

也可以使用：`pnpm add @flowbite-svelte-plugins/chart`、`yarn add @flowbite-svelte-plugins/chart`、`bun add @flowbite-svelte-plugins/chart`

## README

# @flowbite-svelte-plugins/图

[文档](https://flowbite-svelte.com/docs/plugins/charts)

使用由 Tailwind CSS 和 Apex Charts 所建的流纹图和图表组件从行、区域、栏、列、派和光圈图中选择

## 安装

```bash
pnpm i -D @flowbite-svelte-plugins/chart
```

更新 `app.css`数字 :

```css
@source "../node_modules/@flowbite-svelte-plugins/chart/dist";
```

## 示例

### 区域图

```svelte
<script lang="ts">
  import type { ApexOptions } from 'apexcharts';
  import { Chart } from '@flowbite-svelte-plugins/chart';
  import { Card, A, Button, Dropdown, DropdownItem } from 'flowbite-svelte';
  import { ChevronRightOutline, ChevronDownOutline } from 'flowbite-svelte-icons';

  let options: ApexOptions = {
    chart: {
      height: '400px',
      type: 'area',
      fontFamily: 'Inter, sans-serif',
      dropShadow: {
        enabled: false
      },
      toolbar: {
        show: false
      }
    },
    tooltip: {
      enabled: true,
      x: {
        show: false
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        opacityFrom: 0.55,
        opacityTo: 0,
        shade: '#1C64F2',
        gradientToColors: ['#1C64F2']
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      width: 6
    },
    grid: {
      show: false,
      strokeDashArray: 4,
      padding: {
        left: 2,
        right: 2,
        top: 0
      }
    },
    series: [
      {
        name: 'New users',
        data: [6500, 6418, 6456, 6526, 6356, 6456],
        color: '#1A56DB'
      }
    ],
    xaxis: {
      categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
      labels: {
        show: false
      },
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      }
    },
    yaxis: {
      show: false
    }
  };
</script>

<Card class="p-4 md:p-6">
  <div class="flex justify-between">
    <div>
      <h5 class="pb-2 text-3xl leading-none font-bold text-gray-900 dark:text-white">32.4k</h5>
      <p class="text-base font-normal text-gray-500 dark:text-gray-400">Users this week</p>
    </div>
    <div class="flex items-center px-2.5 py-0.5 text-center text-base font-semibold text-green-500 dark:text-green-500">
      12%
      <ChevronRightOutline class="ms-1 h-6 w-6" />
    </div>
  </div>
  <Chart {options} />
  <div class="grid grid-cols-1 items-center justify-between border-t border-gray-200 dark:border-gray-700">
    <div class="flex items-center justify-between pt-5">
      <Button
        class="inline-flex items-center bg-transparent py-0 text-center text-sm font-medium text-gray-500 hover:bg-transparent hover:text-gray-900 focus:ring-transparent dark:bg-transparent dark:text-gray-400 dark:hover:bg-transparent dark:hover:text-white dark:focus:ring-transparent"
        >Last 7 days<ChevronDownOutline class="m-2.5 ms-1.5 w-2.5" /></Button
      >
      <Dropdown simple class="w-40" offset={-6}>
        <DropdownItem>Yesterday</DropdownItem>
        <DropdownItem>Today</DropdownItem>
        <DropdownItem>Last 7 days</DropdownItem>
        <DropdownItem>Last 30 days</DropdownItem>
        <DropdownItem>Last 90 days</DropdownItem>
      </Dropdown>
      <A
        href="/"
        class="hover:text-primary-700 dark:hover:text-primary-500 rounded-lg px-3 py-2 text-sm font-semibold uppercase hover:bg-gray-100 hover:no-underline dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
      >
        Users Report
        <ChevronRightOutline class="ms-1.5 h-2.5 w-2.5" />
      </A>
    </div>
  </div>
</Card>
```

## 常见问题

### @flowbite-svelte-plugins/chart 是什么？

Flowbite Svelte 的图表和数据可视化组件

### 如何安装 @flowbite-svelte-plugins/chart？

在项目目录运行 npm install @flowbite-svelte-plugins/chart，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（^5\.0\.0）、tailwindcss（^4\.1\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @flowbite-svelte-plugins/chart 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @flowbite-svelte-plugins/chart 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @flowbite-svelte-plugins/chart 可以商用吗？

@flowbite-svelte-plugins/chart 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @flowbite-svelte-plugins/chart 的下载量有多少？

根据 npm 官方下载统计，@flowbite-svelte-plugins/chart 在 2026/10/15 – 2026/11/13 这 30 天内被下载 17,333 次，日均约 578 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @flowbite-svelte-plugins/chart 还在维护吗？

最新版本 0\.2\.4 发布于 2025/06/21（1\.4 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/06/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。