fix: histogram data type change to numebr array (#74)

* fix: histogram data type change to number[]

* docs: update histogram knowledge

* fix: type define error

* chore: add title for histogram knowledge

Author: hustcc

knowledges/直方图 - Histogram Chart.md

@@ -30,27 +30,33 @@
 ```typescript
 type Histogram = {
   type: 'histogram';
-  data: { value: number }[];
+  data: number[];
   binNumber?: number;
+  title?: string;
+  axisXTitle?: string;
+  axisYTitle?: string;
 };
 ```
 
 ### 数据要求
 
 - type：图表的类型，必填，文本类型，值必须为 "histogram"。
-- data：图表的数据，必填，数组对象类型；
-  - value：数据频率，必填，数值类型；
+- data：图表的数据，必填，数值类型的数组。
 - binNumber：区间个数，可选，数值类型，用于定义直方图的区间数量。
+- title：图表的标题，可选，文本类型，用于定义直方图的图表标题。
+- axisXTitle：X 轴的轴标题文本，可选，文本类型。
+- axisXTitle：Y 轴的轴标题文本，可选，文本类型。
 
 ## 使用示例
 
-1. 用直方图展示考试成绩的分布，成绩在 0-100 之间，将其划分为 5 个区间，数据如下：[78 , 88, 60, 100, 95]。
+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
+  "data": [78, 88, 60, 100, 95],
+  "binNumber": 5,
+  "title": "成绩分布"
 }
 ```
 
@@ -59,6 +65,25 @@ type Histogram = {
 ```json
 {
   "type": "histogram",
-  "data": [{ "value": 20 }, { "value": 25 }, { "value": 30 }, { "value": 35 }]
+  "data": [20, 25, 30, 35]
+}
+```
+
+3. 用直方图展示花瓣大小的分布情况，并显示 x 轴标题为“花瓣大小分布”，y 轴标题为“花瓣分布数量”数据如下：[
+   1.2, 3.4, 3.7, 4.3, 5.2, 5.8, 6.1, 6.5, 6.8, 7.1, 7.3, 7.7, 8.3, 8.6, 8.8, 9.1, 9.2, 9.4, 9.5,
+   9.7, 10.5, 10.7, 10.8, 11, 11, 11.1, 11.2, 11.3, 11.4, 11.4, 11.7, 12, 12.9, 12.9, 13.3, 13.7,
+   13.8, 13.9, 14, 14.2, 14.5, 15, 15.2, 15.6, 16, 16.3, 17.3, 17.5, 17.9, 18, 18, 20.6, 21, 23.4,
+   ]
+
+```json
+{
+  "type": "histogram",
+  "data": [
+    1.2, 3.4, 3.7, 4.3, 5.2, 5.8, 6.1, 6.5, 6.8, 7.1, 7.3, 7.7, 8.3, 8.6, 8.8, 9.1, 9.2, 9.4, 9.5,
+    9.7, 10.5, 10.7, 10.8, 11, 11, 11.1, 11.2, 11.3, 11.4, 11.4, 11.7, 12, 12.9, 12.9, 13.3, 13.7,
+    13.8, 13.9, 14, 14.2, 14.5, 15, 15.2, 15.6, 16, 16.3, 17.3, 17.5, 17.9, 18, 18, 20.6, 21, 23.4
+  ],
+  "axisXTitle": "花瓣大小分布",
+  "axisYTitle": "花瓣分布数量"
 }
 ```

src/Histogram/demos/common.tsx

@@ -2,65 +2,15 @@ import { Histogram } from '@antv/gpt-vis';
 import React from 'react';
 
 const data = [
-  { value: 1.2 },
-  { value: 3.4 },
-  { value: 3.7 },
-  { value: 4.3 },
-  { value: 5.2 },
-  { value: 5.8 },
-  { value: 6.1 },
-  { value: 6.5 },
-  { value: 6.8 },
-  { value: 7.1 },
-  { value: 7.3 },
-  { value: 7.7 },
-  { value: 8.3 },
-  { value: 8.6 },
-  { value: 8.8 },
-  { value: 9.1 },
-  { value: 9.2 },
-  { value: 9.4 },
-  { value: 9.5 },
-  { value: 9.7 },
-  { value: 10.5 },
-  { value: 10.7 },
-  { value: 10.8 },
-  { value: 11.0 },
-  { value: 11.0 },
-  { value: 11.1 },
-  { value: 11.2 },
-  { value: 11.3 },
-  { value: 11.4 },
-  { value: 11.4 },
-  { value: 11.7 },
-  { value: 12.0 },
-  { value: 12.9 },
-  { value: 12.9 },
-  { value: 13.3 },
-  { value: 13.7 },
-  { value: 13.8 },
-  { value: 13.9 },
-  { value: 14.0 },
-  { value: 14.2 },
-  { value: 14.5 },
-  { value: 15 },
-  { value: 15.2 },
-  { value: 15.6 },
-  { value: 16.0 },
-  { value: 16.3 },
-  { value: 17.3 },
-  { value: 17.5 },
-  { value: 17.9 },
-  { value: 18.0 },
-  { value: 18.0 },
-  { value: 20.6 },
-  { value: 21 },
-  { value: 23.4 },
+  1.2, 3.4, 3.7, 4.3, 5.2, 5.8, 6.1, 6.5, 6.8, 7.1, 7.3, 7.7, 8.3, 8.6, 8.8, 9.1, 9.2, 9.4, 9.5,
+  9.7, 10.5, 10.7, 10.8, 11, 11, 11.1, 11.2, 11.3, 11.4, 11.4, 11.7, 12, 12.9, 12.9, 13.3, 13.7,
+  13.8, 13.9, 14, 14.2, 14.5, 15, 15.2, 15.6, 16, 16.3, 17.3, 17.5, 17.9, 18, 18, 20.6, 21, 23.4,
 ];
 
 export default () => {
   return (
     <Histogram
+      title="一些列数据的直方图分布"
       data={data}
       binNumber={10}
       axisXTitle="range"