docs: migrate 4.0 Simple Histogram

site/examples/general/histogram/demo/histogram-binwidth.ts

@@ -0,0 +1,37 @@
+import DataSet from '@antv/data-set';
+import { Chart } from '@antv/g2';
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const ds = new DataSet();
+    const dv = ds.createView('diamond').source(data);
+    dv.transform({
+      type: 'bin.histogram',
+      field: 'depth',
+      binWidth: 4, // 在此修改矩形的宽度，代表真实数值的大小
+      as: ['depth', 'count'],
+    });
+
+    const chart = new Chart({
+      container: 'container',
+      autoFit: true,
+      height: 500,
+    });
+
+    chart
+      .interval()
+      .encode('x', 'depth')
+      .encode('y', 'count')
+      .data(dv.rows)
+      .scale({
+        depth: {
+          tickInterval: 4,
+        },
+        count: {
+          nice: true,
+        },
+      });
+
+    chart.render();
+  });

site/examples/general/histogram/demo/histogram-stacked.ts

@@ -0,0 +1,39 @@
+import DataSet from '@antv/data-set';
+import { Chart } from '@antv/g2';
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const ds = new DataSet();
+    const dv = ds.createView().source(data);
+    dv.transform({
+      type: 'bin.histogram',
+      field: 'depth',
+      binWidth: 1,
+      groupBy: ['cut'],
+      as: ['depth', 'count'],
+    });
+
+    const chart = new Chart({
+      container: 'container',
+      autoFit: true,
+      height: 500,
+    });
+
+    chart
+      .interval()
+      .encode('x', 'depth')
+      .encode('y', 'count')
+      .encode('color', 'cut')
+      .data(dv.rows)
+      .scale({
+        depth: {
+          tickInterval: 1,
+        },
+        count: {
+          nice: true,
+        },
+      });
+
+    chart.render();
+  });

site/examples/general/histogram/demo/histogram.ts

@@ -0,0 +1,47 @@
+import DataSet from '@antv/data-set';
+import { Chart } from '@antv/g2';
+
+const values = [
+  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.0, 11.0, 11.1, 11.2, 11.3, 11.4,
+  11.4, 11.7, 12.0, 12.9, 12.9, 13.3, 13.7, 13.8, 13.9, 14.0, 14.2, 14.5, 15,
+  15.2, 15.6, 16.0, 16.3, 17.3, 17.5, 17.9, 18.0, 18.0, 20.6, 21, 23.4,
+];
+
+const data = values.map((value) => {
+  return {
+    value,
+  };
+});
+const ds = new DataSet();
+const dv = ds.createView().source(data);
+dv.transform({
+  type: 'bin.histogram',
+  field: 'value',
+  binWidth: 2,
+  as: ['value', 'count'],
+});
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+  height: 500,
+});
+
+chart
+  .interval()
+  .encode('x', 'value')
+  .encode('y', 'count')
+  .data(dv.rows)
+  .scale({
+    value: {
+      min: 0,
+      tickInterval: 2,
+    },
+    count: {
+      max: 14,
+      nice: true,
+    },
+  });
+
+chart.render();

site/examples/general/histogram/demo/meta.json

@@ -0,0 +1,32 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "histogram.ts",
+      "title": {
+        "zh": "直方图",
+        "en": "Histogram"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Tq2YSbmmRcUAAAAAAAAAAAAADmJ7AQ/fmt.webp"
+    },
+    {
+      "filename": "histogram-binwidth.ts",
+      "title": {
+        "zh": "直方图范围刻度",
+        "en": "Histogram with range tick"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EfmuR67lL24AAAAAAAAAAAAADmJ7AQ/fmt.webp"
+    },
+    {
+      "filename": "histogram-stacked.ts",
+      "title": {
+        "zh": "层叠直方图",
+        "en": "Stacked histogram"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Z873S5jGYD0AAAAAAAAAAAAADmJ7AQ/fmt.webp"
+    }
+  ]
+}

site/examples/general/histogram/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Histogram
+order: 4
+---

site/examples/general/histogram/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 直方图
+order: 4
+---