How to use @antv/data-set - 10 common examples

it('Axis grid `alternateColor` has gaps when field is `category`', () => {
    const div = document.createElement('div');
    document.body.appendChild(div);
    const data = [
      { country: '中国', population: 131744 },
      { country: '印度', population: 104970 },
      { country: '美国', population: 29034 },
      { country: '印尼', population: 23489 },
      { country: '巴西', population: 18203 }
    ];
    const dv = new DataSet.View().source(data);
    dv.transform({
      type: 'sort',
      callback(a, b) { // 排序依据，和原生js的排序callback一致
        return a.population - b.population;
      }
    });
    const chart = new G2.Chart({
      container: div,
      padding: 80
    });
    chart.source(dv);
    // chart.coord('polar').reflect();
    // chart.coord('polar');
    // chart.coord().transpose();
    chart.axis('country', {
      label: {

month: 'Oct',
        Tokyo: 18.3,
        London: 10.3,
      },
      {
        month: 'Nov',
        Tokyo: 13.9,
        London: 6.6,
      },
      {
        month: 'Dec',
        Tokyo: 9.6,
        London: 4.8,
      },
    ];
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: 'fold',
      fields: ['Tokyo', 'London'],
      // 展开字段集
      key: 'city',
      // key字段
      value: 'temperature', // value字段
    });
    console.log(dv);
    const cols = {
      month: {
        range: [0, 1],
      },
    };
    const {

const cols = {
      x: { sync: true, nice: false },
      y: { sync: true, nice: false },
    };
    console.log(this.state.data);
    const { features = [] } = this.state.data;
    const userData = [];
    for (let i = 0; i < features.length; i++) {
      const name = features[i].properties.name;
      userData.push({
        name,
        value: Math.round(Math.random() * 1000),
      });
    }
    // data set
    const ds = new DataSet();
    // geo data
    const dvGeo = ds.createView().source(data, {
      type: 'GeoJSON',
    });
    // user data
    const dvData = ds.createView().source(userData);
    // assign centroid point (x, y) to user data
    dvData.transform({
      type: 'geo.region',
      field: 'name',
      geoDataView: dvGeo,
      as: ['longitude', 'latitude'],
    });

    return (

render() {
    const data = [
      { month: '01/01', online: 7000, offline: 3900 },
      { month: '02/01', online: 6900, offline: 4200 },
      { month: '03/01', online: 9500, offline: 5700 },
      { month: '04/01', online: 14500, offline: 8500 },
      { month: '05/01', online: 18400, offline: 11900 },
      { month: '06/01', online: 21500, offline: 15200 },
      { month: '07/01', online: 25200, offline: 17000 },
      { month: '08/01', online: 26500, offline: 16600 },
      { month: '09/01', online: 23300, offline: 14200 },
      { month: '10/01', online: 18300, offline: 10300 },
      { month: '11/01', online: 13900, offline: 6600 },
      { month: '12/01', online: 9600, offline: 4800 },
    ];
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: 'fold',
      fields: ['online', 'offline'], // 展开字段集
      key: 'city', // key字段
      value: 'temperature', // value字段
    });
    console.log(dv);
    const cols = {
      month: {
        range: [0, 1],
      },
    };
    return (

createRadarChart(containerId: string, data: any[]) {
        let _DataSet = new DataSet();
        let DataView = _DataSet.DataSet.DataView;
        this.radarDv = new DataView().source(data);
        this.radarDv.transform({
            type: 'fold',
            fields: ['a', 'b'], // 展开字段集
            key: 'user', // key字段
            value: 'score' // value字段
        });
        this.chartRadar = new G2.Chart({
            container: containerId,
            forceFit: true,
            height: window.innerHeight,
            padding: [20, 20, 95, 20]
        });
        this.chartRadar.source(this.radarDv, {
            score: {

import React,  { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } from 'bizcharts';
import DataSet from '@antv/data-set';
import data from '../../data/diamond.json'

const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
    type: 'bin.histogram',
    field: 'depth',
    binWidth: 1,
    // offset: -0.3,
    groupBy: [ 'cut' ],
    as: [ 'depth', 'count' ]
});

export default class IntervalC extends Component {
  
  render() {
    return (

drawChart: function (data) {
      // 如果图形存在则销毁后再创建
      if (this.chart) {
        this.chart.destroy()
      }
      this.chart = new G2.Chart({
        container: this.id,
        forceFit: true,
        height: this.height,
        padding: this.padding
      })
      const ds = new DataSet()
      const dv = ds.createView()
        .source(data)
        .transform({
          type: 'percent',
          field: 'value',
          dimension: 'name',
          as: 'percent'
        })

      // 设置数据的显示别名
      let _this = this
      let scaleConfig = (function () {
        let obj = {}
        for (const key in _this.axisName) {
          if (_this.axisName.hasOwnProperty(key)) {
            obj[key] = {}

title: "交易 24小时",
    dataIndex: 'transperday',
    key: 'transperday',
    sorter: (a, b) => parseInt(a.transperday, 10) - parseInt(b.transperday, 10),
}, {
    title: "交易 7天",
    dataIndex: 'transperweek',
    key: 'transperweek',
    sorter: (a, b) => parseInt(a.transperweek, 10) - parseInt(b.transperweek, 10),
}, {
    title: "活动 7天",
    // dataIndex: 'transperweek',
    // key: 'transperweek',
    render: (text, record) =&gt; (<img src="/165.png" alt="actimg">),
}];
const ds = new DataSet({
    state: {
        start: '2015-04-07',
        end: '2015-07-28'
    }
});
const dv = ds.createView();
dv.source(data)
    .transform({
        type: 'filter',
        callback: obj =&gt; {
            const date = obj.time;
            return date &lt;= ds.state.end &amp;&amp; date &gt;= ds.state.start;
        }
    })
    .transform({
        type: 'map',

render() {
    const {data}=this.props;
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: "fold",
      fields: ["avrageElapsed"],
      // 展开字段集
      key: "time",
      // key字段
      value: "avrageElapsed" // value字段
    });
    const cols = {
      day:{
        tickCount: 10, // 定义坐标轴刻度线的条数，默认为 5
      }
    };

    return (

render() {
    // 参考：https://alibaba.github.io/BizCharts/
    const data = [
      { item: 'Design', a: 70, b: 30 },
      { item: 'Development', a: 60, b: 70 },
      { item: 'Marketing', a: 50, b: 60 },
      { item: 'Users', a: 40, b: 50 },
      { item: 'Test', a: 60, b: 70 },
      { item: 'Language', a: 70, b: 50 },
      { item: 'Technology', a: 50, b: 40 },
      { item: 'Support', a: 30, b: 40 },
      { item: 'Sales', a: 60, b: 40 },
      { item: 'UX', a: 50, b: 60 },
    ];

    const dv = new DataView().source(data);
    dv.transform({
      type: 'fold',
      fields: ['a', 'b'], // 展开字段集
      key: 'user', // key字段
      value: 'score', // value字段
    });

    const cols = {
      score: {
        min: 0,
        max: 80,
      },
    };

    return (
      <div></div>