docs: Add the description of the radar、histogram and scatter chart (#21)

antvis · Nov 21, 2024 · d0ac612 · d0ac612
1 parent 4b5e847
commit d0ac612
Show file tree

Hide file tree

Showing 3 changed files with 320 additions and 0 deletions.
diff --git a/knowledges/散点图 - Scatter Chart.md b/knowledges/散点图 - Scatter Chart.md
@@ -0,0 +1,69 @@
+## 图表属性
+
+- 名称：散点图
+- 别名：散点图，英文名：Scatter Chart
+- 形状：散点
+- 图表类别：统计图表
+- 图表功能：比较、分别、趋势
+
+## 基础概念
+
+散点图是一种显示两个变量之间关系的图表。通过将每个数据点表示为图上的一个点，散点图能够展示两个变量（通常是数值变量）之间的相关性或分布趋势。每个点的水平和垂直位置由该数据点的两个数值变量决定，X 轴和 Y 轴分别代表两个变量。
+
+## 适用场景
+
+- 发现两个变量之间的关系或趋势，例如相关性强度。
+- 显示数据的分布模式，检测异常值。
+- 数据点数量较大时，散点图能够有效呈现整体分布情况。
+
+## 不适用场景
+
+- 只有一个变量的情况，因为散点图需要两个数值变量来显示数据点的位置。
+- 分类数据或需要明确分段的情况，散点图更适合连续型变量。
+
+## 图表用法
+
+### 图表属性
+
+```typescript
+type Scatter = {
+  type: 'scatter';
+  data: { x: number; value: number }[];
+};
+```
+
+### 数据要求
+
+- type：图表的类型，必填，文本类型，值必须为 "scatter"。
+- data：图表的数据，必填，数组对象类型：
+  - x：X 轴上的数值变量，必填，数值类型。
+  - y：Y 轴上的数值变量，必填，数值类型。
+
+## 使用示例
+
+1. 研究广告支出与销售额之间的关系，广告支出（单位：千元）为 10, 20, 30, 40，销售额（单位：万元）分别为 15, 25, 35, 45。用散点图可视化我的数据。
+
+```json
+{
+  "type": "scatter",
+  "data": [
+    { "x": 10, "y": 15 },
+    { "x": 20, "y": 25 },
+    { "x": 30, "y": 35 },
+    { "x": 40, "y": 45 }
+  ]
+}
+```
+
+2. 用散点图可视化我的数据 [{ "age": 25, "income": 5000, "size": 55 }, { "age": 35, "income": 7000, "size": 65 }, { "age": 45, "income": 10000, "size": 64 }]。
+
+```json
+{
+  "type": "scatter",
+  "data": [
+    { "x": 25, "y": 5000 },
+    { "x": 35, "y": 7000 },
+    { "x": 45, "y": 10000 }
+  ]
+}
+```
diff --git a/knowledges/直方图 - Histogram Chart.md b/knowledges/直方图 - Histogram Chart.md
@@ -0,0 +1,70 @@
+## 图表属性
+
+- 名称：直方图
+- 别名：质量分布图，柱状分布图，英文名：Histogram Chart
+- 形状：柱形
+- 图表类别：统计图表
+- 图表功能：分布
+
+## 基础概念
+
+直方图是一种显示数据分布的图表，它通过柱形条表示某个范围内数据点的频率。每个柱形条的高度（或长度）表示数据点在特定区间内出现的次数，X 轴表示数据的取值范围，Y 轴表示频率或数量。直方图主要用于表示连续型变量的数据分布，并帮助分析数据的集中趋势、离散程度和形态。
+
+直方图与柱状图的区别，直方图反映数据分布情况，柱状图只能对数值进行比较。从数据结构来说，柱状图需要一个分类变量，是离散的（如一班、二班、三班），因此柱子间有空隙。但直方图的数据均为连续的数值变量（如成绩），因此柱子间是没有空隙的。
+
+## 适用场景
+
+- 观察数据的分布情况，例如正态分布、偏态分布等。
+- 识别数据的集中区域和极值点，帮助分析数据的变异性和集中性。
+- 处理连续型数据，将其划分为多个区间，并对每个区间的频率进行统计。
+
+## 不适用场景
+
+- 分类数据，因为它针对的是连续型数值数据。
+- 变量数值较少且分布不均时，可能会导致图形失真。
+
+## 图表用法
+
+### 图表属性
+
+```typescript
+type Histogram = {
+  type: 'histogram';
+  data: { value: number }[];
+  binNumber?: number;
+};
+```
+
+### 数据要求
+
+- type：图表的类型，必填，文本类型，值必须为 "histogram"。
+- data：图表的数据，必填，数组对象类型；
+  - value：数据频率，必填，数值类型；
+- binNumber：区间个数，可选，数值类型，用于定义直方图的区间数量。
+
+## 使用示例
+
+1. 用直方图展示考试成绩的分布，成绩在 0-100 之间，将其划分为 5 个区间，数据如下：[78 , 88, 60, 100, 95]。
+
+```json
+{
+  "type": "histogram",
+  "data": [
+    { "value": 78 },
+    { "value": 88 },
+    { "value": 60 },
+    { "value": 100 },
+    { "value": 95 }
+  ],
+  "binNumber": 5
+}
+```
+
+2. 用直方图可视化我的数据：[{ "value": 20 }, { "value": 25 }, { "value": 30 }, { "value": 35 }]
+
+```json
+{
+  "type": "histogram",
+  "data": [{ "value": 20 }, { "value": 25 }, { "value": 30 }, { "value": 35 }]
+}
+```
diff --git a/knowledges/雷达图 - Radar Chart.md b/knowledges/雷达图 - Radar Chart.md
@@ -0,0 +1,181 @@
+## 图表属性
+
+- 名称：雷达图
+- 别名：雷达图，英文名：Radar Chart
+- 形状：圆形
+- 图表类别：统计图表
+- 图表功能：比较
+
+## 基础概念
+
+雷达图是一种显示多变量数据的图。通常从表同一中心点开始等角度间隔地射出三个以上的轴，每个轴代表一个定量变量，各轴上的点依次连接成线或几何图形。雷达图可以用来在变量间进行对比，或者查看变量中有没有异常值。另外，多幅雷达图之间或者雷达图的多层数据线之间，还可以进行总体数值情况的对比。
+
+## 适用场景
+
+- 某一数据对象由多个特征类别构成，比如食品的营养成分（糖、维生素、矿物质、脂肪、水）。
+- 数据特征类别是有限的，并且都可以进行归一化或者能被离散化。
+
+## 不适用场景
+
+- 数据对象中的分类过多，或者不可在统一程度上标准化的情况。
+- 雷达图中层叠的多边形过多的情况。
+
+## 图表用法
+
+### 图表属性
+
+```typescript
+type Radar = {
+  type: 'radar';
+  data: { name: number; value: number; group?: string }[];
+};
+```
+
+### 数据要求
+
+- type：图表的类型，必填，文本类型，值必须为 "radar"。
+- data：图表的数据，必填，数组对象类型；
+  - name：数据分类名称，必填，文本类型；
+  - value：分类的数值大小，必填，数值类型；
+  - group：数据分组名称，选填，文本类型；
+
+## 使用示例
+
+1. 小明对自己进行能力评估：沟通能力 2 分、协作能力 3 分、领导能力 2 分、学习能力 5 分、创新能力 6 分、技术能力 9 分，用雷达图可视化：
+
+```json
+{
+  "type": "radar",
+  "data": [
+    { "name": "沟通能力", "value": 2 },
+    { "name": "协作能力", "value": 3 },
+    { "name": "领导能力", "value": 2 },
+    { "name": "学习能力", "value": 5 },
+    { "name": "创新能力", "value": 6 },
+    { "name": "技术能力", "value": 9 }
+  ]
+}
+```
+
+2. 某中学进行了第一次模拟考，三年级中 3 个班级的平均成绩为，一班语文 95，数学 96，外语 85，物理 63，化学 91；二班语文 75，数学 93，外语 66，物理 85，化学 88；三班语文 86，数学 76，外语 96，物理 93，化学 67。要对这三个班级的整体成绩做出评估，为接下来的教学计划做出指导，用雷达图可视化：
+
+```json
+{
+  "type": "radar",
+  "data": [
+    {
+      "name": "语文",
+      "value": 95,
+      "group": "一班"
+    },
+    {
+      "name": "数学",
+      "value": 96,
+      "group": "一班"
+    },
+    {
+      "name": "外语",
+      "value": 85,
+      "group": "一班"
+    },
+    {
+      "name": "物理",
+      "value": 63,
+      "group": "一班"
+    },
+    {
+      "name": "化学",
+      "value": 91,
+      "group": "一班"
+    },
+    {
+      "name": "语文",
+      "value": 75,
+      "group": "二班"
+    },
+    {
+      "name": "数学",
+      "value": 93,
+      "group": "二班"
+    },
+    {
+      "name": "外语",
+      "value": 66,
+      "group": "二班"
+    },
+    {
+      "name": "物理",
+      "value": 85,
+      "group": "二班"
+    },
+    {
+      "name": "化学",
+      "value": 88,
+      "group": "二班"
+    },
+    {
+      "name": "语文",
+      "value": 86,
+      "group": "三班"
+    },
+    {
+      "name": "数学",
+      "value": 76,
+      "group": "三班"
+    },
+    {
+      "name": "外语",
+      "value": 96,
+      "group": "三班"
+    },
+    {
+      "name": "物理",
+      "value": 93,
+      "group": "三班"
+    },
+    {
+      "name": "化学",
+      "value": 67,
+      "group": "三班"
+    }
+  ]
+}
+```
+
+3. 用雷达图可视化我的数据 `[ { "nutrient": "Vitamin C", "score": 7 }, { "nutrient": "Fiber", "score": 6 }, { "nutrient": "Sugar", "score": 5 }, { "nutrient": "Protein", "score": 4 }, { "nutrient": "Iron", "score": 3 }, { "nutrient": "Calcium", "score": 2 } ]`
+
+```json
+{
+  "type": "radar",
+  "data": [
+    { "name": "Vitamin C", "value": 7 },
+    { "name": "Fiber", "value": 6 },
+    { "name": "Sugar", "value": 5 },
+    { "name": "Protein", "value": 4 },
+    { "name": "Iron", "value": 3 },
+    { "name": "Calcium", "value": 2 }
+  ]
+}
+```
+
+4. 用雷达图可视化我的数据 `[ { "fruit": "Apple", "nutrient": "Vitamin C", "score": 5 }, { "fruit": "Apple", "nutrient": "Fiber", "score": 7 }, { "fruit": "Apple", "nutrient": "Sugar", "score": 6 }, { "fruit": "Apple", "nutrient": "Protein", "score": 2 }, { "fruit": "Apple", "nutrient": "Iron", "score": 3 }, { "fruit": "Apple", "nutrient": "Calcium", "score": 2 }, { "fruit": "Banana", "nutrient": "Vitamin C", "score": 4 }, { "fruit": "Banana", "nutrient": "Fiber", "score": 5 }, { "fruit": "Banana", "nutrient": "Sugar", "score": 7 }, { "fruit": "Banana", "nutrient": "Protein", "score": 3 }, { "fruit": "Banana", "nutrient": "Iron", "score": 2 }, { "fruit": "Banana", "nutrient": "Calcium", "score": 3 } ]`
+
+```json
+{
+  "type": "radar",
+  "data": [
+    { "group": "Apple", "name": "Vitamin C", "value": 5 },
+    { "group": "Apple", "name": "Fiber", "value": 7 },
+    { "group": "Apple", "name": "Sugar", "value": 6 },
+    { "group": "Apple", "name": "Protein", "value": 2 },
+    { "group": "Apple", "name": "Iron", "value": 3 },
+    { "group": "Apple", "name": "Calcium", "value": 2 },
+    { "group": "Banana", "name": "Vitamin C", "value": 4 },
+    { "group": "Banana", "name": "Fiber", "value": 5 },
+    { "group": "Banana", "name": "Sugar", "value": 7 },
+    { "group": "Banana", "name": "Protein", "value": 3 },
+    { "group": "Banana", "name": "Iron", "value": 2 },
+    { "group": "Banana", "name": "Calcium", "value": 3 }
+  ]
+}
+```