外掛說明

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.

安裝方式

Upload the chartlet folder to the /wp-content/plugins/ directory.
Activate the plugin through the ‘Plugins’ menu in WordPress.
Navigate to Chartlet Settings to configure your default styles.
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

將〈Chartlet〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣？

任何人均可瀏覽程式碼、查看 SVN 存放庫，或透過 RSS 訂閱開發記錄。

變更記錄

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.