How to use @antv/data-set - 10 common examples
To help you get started, we’ve selected a few @antv/data-set examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
antvis / G2 / test / bugs / issue-243-spec.js View on Github 
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) => (<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 => {
const date = obj.time;
return date <= ds.state.end && date >= 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>
