How to use the @antv/data-set 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 / react-materials / scaffolds / ice-design-pro / src / pages / BaiscCharts / components / BizchartsLineCurved / index.js View on Github 
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 {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 (七月: 237,
八月: 242,
},
{
name: '已回绝',
一月: 12,
二月: 13,
三月: 24,
四月: 129,
五月: 122,
六月: 225,
七月: 117,
八月: 22,
},
];
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'fold',
fields: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月'],
key: '月份',
value: '数量',
});
export default function ReviewDataChart() {
return (
<div>近一月</div>
<div>
<div>
<div>135</div>
<div>
</div></div></div>17.5,
17.9,
18.0,
18.0,
20.6,
21,
23.4,
];
const data = [];
for (let i = 0; i < values.length; i++) {
const obj = {};
obj.value = values[i];
data.push(obj);
}
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.data(dv.rows);
chart.scale({七月: 237,
八月: 242,
},
{
name: '已回绝',
一月: 12,
二月: 13,
三月: 24,
四月: 129,
五月: 122,
六月: 225,
七月: 117,
八月: 22,
},
];
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'fold',
fields: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月'],
key: '月份',
value: '数量',
});
export default class ReviewDataChart extends Component {
static displayName = 'ReviewDataChart';
render() {
return (
<div style="{styles.coreDataTitle}">近一月</div>
<div style="{styles.coreDataWrapper}"></div>import React, { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } from 'bizcharts';
import DataSet from '@antv/data-set';
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 = [];
for (let i = 0; i < values.length; i++) {
const obj = {};
obj.value = values[i];
data.push(obj);
}
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'bin.histogram',
field: 'value',
binWidth: 2,
as: ['value', 'count'],
});
const cols = {
value: {
nice: false,
min: 0,
tickInterval: 1
},
count: {
max: 14
}
