How to use the @antv/data-set.DataSet function in @antv/data-set
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.
alibaba / ice / blocks / VisitorsLocationChart / src / MapChart.jsx View on Github 
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 ({ month: 'Jan', Tokyo: 7.0, London: 3.9 },
{ month: 'Feb', Tokyo: 6.9, London: 4.2 },
{ month: 'Mar', Tokyo: 9.5, London: 5.7 },
{ month: 'Apr', Tokyo: 14.5, London: 8.5 },
{ month: 'May', Tokyo: 18.4, London: 11.9 },
{ month: 'Jun', Tokyo: 21.5, London: 15.2 },
{ month: 'Jul', Tokyo: 25.2, London: 17.0 },
{ month: 'Aug', Tokyo: 26.5, London: 16.6 },
{ month: 'Sep', Tokyo: 23.3, London: 14.2 },
{ month: 'Oct', Tokyo: 18.3, London: 10.3 },
{ month: 'Nov', Tokyo: 13.9, London: 6.6 },
{ month: 'Dec', Tokyo: 9.6, London: 4.8 },
];
// DataSet https://github.com/alibaba/BizCharts/blob/master/doc/tutorial/dataset.md#dataset
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'fold',
fields: ['Tokyo', 'London'],
key: 'city',
value: 'temperature',
});
// 定义度量
const cols = {
month: {
range: [0, 1],
},
};
return ('Aug.': 35.6,
},
{
name: 'Berlin',
'Jan.': 12.4,
'Feb.': 23.2,
'Mar.': 34.5,
'Apr.': 99.7,
May: 52.6,
'Jun.': 35.5,
'Jul.': 37.4,
'Aug.': 42.4,
},
];
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'fold',
fields: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'], // 展开字段集
key: '月份', // key字段
value: '月均降雨量', // value字段
});
return (
<div>
<h4 style="{styles.title}">柱状图</h4>
<legend></legend></div>'Aug.': 35.6,
},
{
name: 'Berlin',
'Jan.': 12.4,
'Feb.': 23.2,
'Mar.': 34.5,
'Apr.': 99.7,
May: 52.6,
'Jun.': 35.5,
'Jul.': 37.4,
'Aug.': 42.4,
},
];
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'fold',
fields: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'], // 展开字段集
key: '月份', // key字段
value: '月均降雨量', // value字段
});
return (
<div>
<h4 style="{styles.title}">柱状图</h4>
<legend></legend></div>render() {
const data = [
{ month: '01/01', SiteA: 7000, SiteB: 3900 },
{ month: '02/01', SiteA: 6900, SiteB: 4200 },
{ month: '03/01', SiteA: 9500, SiteB: 5700 },
{ month: '04/01', SiteA: 14500, SiteB: 8500 },
{ month: '05/01', SiteA: 18400, SiteB: 11900 },
{ month: '06/01', SiteA: 21500, SiteB: 15200 },
{ month: '07/01', SiteA: 25200, SiteB: 17000 },
{ month: '08/01', SiteA: 26500, SiteB: 16600 },
{ month: '09/01', SiteA: 23300, SiteB: 14200 },
{ month: '10/01', SiteA: 18300, SiteB: 10300 },
{ month: '11/01', SiteA: 13900, SiteB: 6600 },
{ month: '12/01', SiteA: 9600, SiteB: 4800 },
];
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'fold',
fields: ['SiteA', 'SiteB'], // 展开字段集
key: 'city', // key字段
value: 'temperature', // value字段
});
const cols = {
month: {
range: [0, 1],
},
};
return (_chart2() {
const ds = new DataSet()
const dv = ds.createView().source(this.data)
dv.transform({
type: 'fold',
fields: ['Tokyo', 'London'], // 展开字段集
key: 'city', // key字段
value: 'temperature' // value字段
})
this.chart2 = new G2.Chart({
container: this.id,
forceFit: true,
padding: [20, 20, 95, 40], // 上，右，下，左
height: 350
})
this.chart2.source(dv, {
month: {
range: [0, 1]{ month: 'Jan', Tokyo: 7.0, London: 3.9 },
{ month: 'Feb', Tokyo: 6.9, London: 4.2 },
{ month: 'Mar', Tokyo: 9.5, London: 5.7 },
{ month: 'Apr', Tokyo: 14.5, London: 8.5 },
{ month: 'May', Tokyo: 18.4, London: 11.9 },
{ month: 'Jun', Tokyo: 21.5, London: 15.2 },
{ month: 'Jul', Tokyo: 25.2, London: 17.0 },
{ month: 'Aug', Tokyo: 26.5, London: 16.6 },
{ month: 'Sep', Tokyo: 23.3, London: 14.2 },
{ month: 'Oct', Tokyo: 18.3, London: 10.3 },
{ month: 'Nov', Tokyo: 13.9, London: 6.6 },
{ month: 'Dec', Tokyo: 9.6, London: 4.8 },
];
// DataSet https://github.com/alibaba/BizCharts/blob/master/doc/tutorial/dataset.md#dataset
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'fold',
fields: ['Tokyo', 'London'],
key: 'city',
value: 'temperature',
});
// 定义度量
const cols = {
month: {
range: [0, 1],
},
};
return (_chart2() {
const ds = new DataSet()
const dv = ds.createView().source(this.data)
dv.transform({
type: 'fold',
fields: ['Tokyo', 'London'], // 展开字段集
key: 'city', // key字段
value: 'temperature' // value字段
})
this.chart2 = new G2.Chart({
container: this.id,
forceFit: true,
padding: [0, 0, 0, 0], // 上，右，下，左
height: 100
})
this.chart2.source(dv, {
month: {
range: [0, 1]}
const { autoHideXLabels } = this.state;
const scale = {
x: {
type: 'cat',
tickCount: 5,
range: [0, 1],
},
y: {
min: 0,
},
};
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'map',
callback(row) {
return row.d ? row : { ...row, d: 'default'};
},
});
return (
<div height="" style="{{">
<div>
{title && <h4 style="{{">{title}</h4>}
</div></div>
