From 1f50bc437a980ace72774038d119c854f3fdb8ed Mon Sep 17 00:00:00 2001 From: MOON KUN WOONG Date: Sun, 22 Dec 2024 20:54:16 +0900 Subject: [PATCH] [docs] add chinese on 000_introduction.mdx Add 000_introduction.mdx docs chinese version. --- .../zh-cn/00_get-started/000_introduction.mdx | 217 ++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 packages/docs/src/content/tutorial/zh-cn/00_get-started/000_introduction.mdx diff --git a/packages/docs/src/content/tutorial/zh-cn/00_get-started/000_introduction.mdx b/packages/docs/src/content/tutorial/zh-cn/00_get-started/000_introduction.mdx new file mode 100644 index 0000000..700d9dd --- /dev/null +++ b/packages/docs/src/content/tutorial/zh-cn/00_get-started/000_introduction.mdx @@ -0,0 +1,217 @@ +--- +nav_group: "Getting Started" +nav_order: 1 +title: "Introduction" +description: "对 Flitter 框架及其主要特性的介绍" +files: + App.js: | + import ReactWidget from "@meursyphus/flitter-react"; + import { BarChart } from "@meursyphus/flitter-chart"; + + export default function App() { + const chart = BarChart({ + data: { + title: "标题", + labels: ["标签1", "标签2", "标签3", "标签4", "标签5"], + datasets: [ + { + legend: "A", + data: [30, 40.5, 50.12, 30.5, 40], + }, + { + legend: "B", + data: [60, 20.5, 20.2, 22.5, 10], + }, + { + legend: "C", + data: [6, 10.5, 20.2, 12.5, 1], + }, + ], + }, + }); + + return ( +
+

基础 Flitter 柱状图

+ +
+ ); + } + +solved_files: + App.js: | + import ReactWidget from "@meursyphus/flitter-react"; + import { BarChart } from "@meursyphus/flitter-chart"; + import { Container, BoxDecoration, BoxShadow } from "@meursyphus/flitter"; + + export default function App() { + const customizedChart = BarChart({ + data: { + title: "标题", + labels: ["标签1", "标签2", "标签3", "标签4", "标签5"], + datasets: [ + { + legend: "A", + data: [30, 40.5, 50.12, 30.5, 40], + }, + { + legend: "B", + data: [60, 20.5, 20.2, 22.5, 10], + }, + { + legend: "C", + data: [6, 10.5, 20.2, 12.5, 1], + }, + ], + }, + custom: { + bar: { + type: "custom", + Custom(child, { legend, backgroundColor }) { + return Container({ + decoration: new BoxDecoration({ + color: backgroundColor, + boxShadow: + legend === "B" ? [new BoxShadow({ color: "black", blurRadius: 5 })] : [], + }), + width: legend === "B" ? 30 : 15, + }); + }, + }, + }, + }); + + return ( +
+

自定义 Flitter 柱状图

+ +
+ ); + } +--- + +# Introduction + +Flitter 是一个创新性的框架，可让您轻松地创建并自定义各种图表库。借助自动化的布局计算以及对 SVG 和 Canvas 的无缝支持，您无需再为构建复杂的数据可视化而烦恼。Flitter 还内置了可直接使用的交互和动画功能，让您能够将更多精力投入到呈现有吸引力的内容上，而无需担心底层机制。 + +## Key Features + +- **轻松创建图表和图示**：只需极少的代码，即可构建多种类型的图表与图示。 +- **自动布局计算**：Flitter 会自动为您处理布局细节，简化设计流程。 +- **双渲染器支持**：同时支持 SVG 和 Canvas，可根据项目需求灵活选择。 +- **内置交互与动画**：为图表提供丰富的交互元素和流畅的动画效果。 +- **便捷自定义**：通过 Flitter 小部件可直接定制图表的各个方面。 + +## Showcase + +### Basic Bar Chart + +下面演示如何使用 Flitter 创建一个基础柱状图： + +```jsx +import ReactWidget from "@meursyphus/flitter-react"; +import { BarChart } from "@meursyphus/flitter-chart"; + +export default function App() { + const chart = BarChart({ + data: { + title: "标题", + labels: ["标签1", "标签2", "标签3", "标签4", "标签5"], + datasets: [ + { + legend: "A", + data: [30, 40.5, 50.12, 30.5, 40], + }, + { + legend: "B", + data: [60, 20.5, 20.2, 22.5, 10], + }, + { + legend: "C", + data: [6, 10.5, 20.2, 12.5, 1], + }, + ], + }, + }); + + return ( +
+

基础 Flitter 柱状图

+ +
+ ); +} +``` + +这个示例展示了如何无需任何自定义操作，就能快速构建柱状图。 + +### Customized Bar Chart Using Flitter Widgets + +接下来，我们来看看如何使用 Flitter 强大的小部件系统，对图表进行更灵活的自定义： + +```jsx +import ReactWidget from "@meursyphus/flitter-react"; +import { BarChart } from "@meursyphus/flitter-chart"; +import { Container, BoxDecoration, BoxShadow } from "@meursyphus/flitter"; + +export default function App() { + const customizedChart = BarChart({ + data: { + title: "标题", + labels: ["标签1", "标签2", "标签3", "标签4", "标签5"], + datasets: [ + { + legend: "A", + data: [30, 40.5, 50.12, 30.5, 40], + }, + { + legend: "B", + data: [60, 20.5, 20.2, 22.5, 10], + }, + { + legend: "C", + data: [6, 10.5, 20.2, 12.5, 1], + }, + ], + }, + custom: { + bar: { + type: "custom", + Custom(child, { legend, backgroundColor }) { + return Container({ + decoration: new BoxDecoration({ + color: backgroundColor, + boxShadow: + legend === "B" + ? [new BoxShadow({ color: "black", blurRadius: 5 })] + : [], + }), + width: legend === "B" ? 30 : 15, + }); + }, + }, + }, + }); + + return ( +
+

自定义 Flitter 柱状图

+ +
+ ); +} +``` + +#### Highlights of Customization: + +- **自定义柱体外观**：对 legend 为 "B" 的柱体设置了更大的宽度并添加了阴影效果。 +- **便捷定制**：Flitter 小部件使您能够直接修改图表组件，简单高效。 +- **自动布局处理**：Flitter 会自动计算并更新布局，免去手动调整位置的麻烦。 + +## Advantages of Using Flitter + +- **简化开发**：快速创建并定制图表，节省大量开发时间与精力。 +- **灵活的定制能力**：可根据业务需求，对图表的各个部分进行深度修改。 +- **自动布局计算**：聚焦设计与功能实现，布局细节交由 Flitter 处理。 +- **丰富的交互与动画**：内置多种交互元素与平滑动画，提升用户体验。 +- **高性能**：在各类设备上都能顺畅渲染并保持良好性能。