docs: update histogram demo (#6706)

Author: hustcc

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

@@ -1,19 +1,8 @@
-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,
@@ -25,14 +14,15 @@ fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json')
       .encode('x', 'depth')
       .encode('y', 'count')
       .encode('color', 'cut')
-      .data(dv.rows)
-      .scale({
-        depth: {
-          tickInterval: 1,
-        },
-        count: {
-          nice: true,
-        },
+      .data(data)
+      .transform({
+        type: 'binX',
+        y: 'count',
+        thresholds: 25,
+      })
+      .style({
+        columnWidthRatio: 1,
+        inset: 0.5,
       });
 
     chart.render();

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

@@ -1,27 +1,12 @@
-import DataSet from '@antv/data-set';
 import { Chart } from '@antv/g2';
 
-const values = [
+const 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.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,
@@ -30,18 +15,17 @@ const chart = new Chart({
 
 chart
   .interval()
-  .encode('x', 'value')
+  .data(data)
+  .encode('x', (d) => d)
   .encode('y', 'count')
-  .data(dv.rows)
-  .scale({
-    value: {
-      min: 0,
-      tickInterval: 2,
-    },
-    count: {
-      max: 14,
-      nice: true,
-    },
+  .transform({
+    type: 'binX',
+    y: 'count',
+    thresholds: 10,
+  })
+  .style({
+    columnWidthRatio: 1,
+    inset: 0.5,
   });
 
 chart.render();