Title: Chartlet
Author: vlty
Published: <strong>2026 年 3 月 23 日</strong>
Last modified: 2026 年 4 月 26 日

---

搜尋外掛

![](https://ps.w.org/chartlet/assets/banner-772x250.jpg?rev=3488957)

![](https://ps.w.org/chartlet/assets/icon-256x256.jpg?rev=3488722)

# Chartlet

 由 [vlty](https://profiles.wordpress.org/vlty/) 開發

[下載](https://downloads.wordpress.org/plugin/chartlet.1.1.0.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/chartlet/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/chartlet/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/chartlet/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/chartlet/#developers)

 [技術支援](https://wordpress.org/support/plugin/chartlet/)

## 外掛說明

**Chartlet** is a lightweight, performance-focused plugin for creating beautiful,
interactive charts and graphs via shortcodes.

Stop bloating your database! Unlike other chart plugins that store every graph as
a custom post type, Chartlet stores all configurations directly within the shortcode.
This makes your site faster and your data easier to manage.

Using the power of **Chart.js** (loaded locally for maximum privacy and GDPR compliance),
Chartlet allows you to visualize data in seconds. Perfect for data journalism, financial
reports, or simply adding a professional touch to your blog posts.

### Key Benefits:

 * **Zero Database Bloat:** No per-chart database entries. Everything lives in your
   content.
 * **Ultra Lightweight:** Optimized for Core Web Vitals and speed.
 * **GDPR Compliant:** No external CDNs. Chart.js is served directly from your server.
 * **Intuitive Builder:** Create charts visually in your admin settings and get 
   a shortcode instantly.
 * **Native Gutenberg Block:** Insert charts directly from the block inserter with
   a live server-side preview.

### Features

 * **8 Chart Types:** Bar, Line, Pie, Doughnut, Radar, Polar area, Scatter, and 
   Bubble charts.
 * **Gutenberg Block:** Native `chartlet/chart` block with real-time server-side
   preview in the editor.
 * **Live Shortcode Builder:** Configure labels, data points, colors, and dimensions
   with a real-time generator.
 * **Fully Responsive:** Charts automatically scale to fit any screen size (mobile,
   tablet, desktop).
 * **Smart Defaults:** Set global brand colors and heights in the settings to keep
   your charts consistent.
 * **Custom Units:** Add prefixes (e.g., $) or suffixes (e.g., %) to your data tooltips.
 * **Translation Ready:** Fully compatible with multilingual sites.

### Usage

**Gutenberg block:** Open the block inserter and search for “Chartlet”. Insert the
block, enter data, and the chart preview updates live in the editor.

**Shortcode builder:** Go to **Chartlet  Generate**. Use the visual builder to:

1. Select your chart type. 2. Input labels and data (separated by `,`). 3. Customize
colors, title, and height. 4. Add a value suffix (e.g., %) or prefix (e.g., $). 
5. Click **Generate Shortcode**, copy it, and paste it anywhere!

**Shortcode examples:**

    ```
    [chartlet type="bar" labels="Jan,Feb,Mar" data="10,20,15" colors="#3366cc,#dc3912" title="Revenue" height="300" prefix="$"]

    [chartlet type="scatter" data="1:5, 2:10, 3:8"]

    [chartlet type="bubble" data="1:5:3, 2:10:5, 3:8:10"]
    ```

## 螢幕擷圖

 * [[
 * **The Core Web Vitals Report** – An example of a Bar Chart showing performance
   improvements.
 * [[
 * **AI Tokens Usage** – A sleek, modern Line Chart with custom neon colors.
 * [[
 * **Traffic Sources 2026** – A clean Doughnut Chart visualizing modern web traffic.
 * [[
 * **Carbon Footprint** – A Pie Chart example showing how to use the suffix feature
   for percentages.
 * [[
 * **The Chartlet Builder** – Our intuitive admin interface where you generate your
   shortcodes in seconds.
 * [[
 * **Shortcode in Action** – How the shortcode looks inside a standard WordPress
   post before rendering.

## 適用於區塊編輯器

這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。

 *   Chartlet Insert a responsive Chart.js chart.

## 安裝方式

 1. Upload the `chartlet` folder to the `/wp-content/plugins/` directory.
 2. Activate the plugin through the ‘Plugins’ menu in WordPress.
 3. Navigate to **Chartlet  Settings** to configure your default styles.
 4. Use the **Chart Builder** to generate a shortcode and paste it into any post or
    page.

## 常見問題集

### Does this plugin affect site speed?

Hardly! We use a single, minified JS library and only load it when a shortcode is
present. No database queries are required to render your charts.

### Is it compatible with Block Editor (Gutenberg)?

Yes! Chartlet includes a native Gutenberg block (`chartlet/chart`) with a live server-
side preview directly in the editor. You can also use the generated shortcode inside
a “Shortcode” block.

### Can I use it for free for commercial sites?

Absolutely. Chartlet is licensed under GPLv2, so you can use it on any personal 
or commercial project.

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈Chartlet〉的開發相關工作。

參與者

 *   [ vlty ](https://profiles.wordpress.org/vlty/)

[將〈Chartlet〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/chartlet)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/chartlet/)、查看
[SVN 存放庫](https://plugins.svn.wordpress.org/chartlet/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/chartlet/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/chartlet/)。

## 變更記錄

#### 1.1.0

 * Added Radar, Polar area, Scatter, and Bubble chart types (8 total).
 * Added native Gutenberg block `chartlet/chart` with server-side preview in the
   editor.
 * Scatter data format: `x:y` pairs (e.g. `1:5, 2:10`).
 * Bubble data format: `x:y:radius` triples (e.g. `1:5:3, 2:10:5`).
 * Labels field is hidden in the block editor for Scatter and Bubble types.
 * Fixed double JSON encoding in renderer.

#### 1.0.1

 * Updated bundled Chart.js to 4.5.1.
 * Improved JSON output escaping in renderer.
 * Corrected readme contributors username.

#### 1.0.0

 * Initial release.
 * Bar, Line, Pie, Doughnut support.
 * Visual Shortcode Builder.
 * Local Chart.js integration.

## 中繼資料

 *  版本 **1.1.0**
 *  最後更新 **4 週前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 5.9 或更新版本 **
 *  已測試相容的 WordPress 版本 **6.9.4**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/chartlet/)
 * 標籤:
 * [chart](https://tw.wordpress.org/plugins/tags/chart/)[charts](https://tw.wordpress.org/plugins/tags/charts/)
   [graph](https://tw.wordpress.org/plugins/tags/graph/)[shortcode](https://tw.wordpress.org/plugins/tags/shortcode/)
   [visualization](https://tw.wordpress.org/plugins/tags/visualization/)
 *  [進階檢視](https://tw.wordpress.org/plugins/chartlet/advanced/)

## 評分

這個項目尚無任何評論記錄。

[Your review](https://wordpress.org/support/plugin/chartlet/reviews/#new-post)

[查看全部使用者評論](https://wordpress.org/support/plugin/chartlet/reviews/)

## 參與者

 *   [ vlty ](https://profiles.wordpress.org/vlty/)

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/chartlet/)