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.

github alibaba / ice / react-materials / scaffolds / ice-design-pro / src / pages / BaiscCharts / components / BizchartsLineCurved / index.js View on Github external
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 {
github FE-free / fc-angular / src / fccomponents / fcg2radar / fcg2radar.component.ts View on Github external
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: {
github alibaba / BizCharts / demo / component / bar / histogramStack.js View on Github external
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 (
github wupeiwen / vue-g2 / src / components / g2Components / pie.vue View on Github external
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] = {}
github Dasdaq / Dasdaq-web / src / pages / DappStore / Dapp.jsx View on Github external
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',
github t880216t / IAT / src / components / Charts / Curved / index.js View on Github external
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 (
github ice-lab / react-materials / blocks / ReviewDataChart / src / index.jsx View on Github external
七月: 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>
github antvis / G2 / examples / column / histogram / demo / histogram.ts View on Github external
17.5,
  17.9,
  18.0,
  18.0,
  20.6,
  21,
  23.4,
];
const data = [];
for (let i = 0; i &lt; 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({
github alibaba / ice / react-materials / blocks / ReviewDataChart / src / ReviewDataChart.jsx View on Github external
七月: 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>
github alibaba / BizCharts / demo / component / bar / histogram.js View on Github external
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 &lt; 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
  }

@antv/data-set

data set with state management

MIT
Latest version published 4 years ago

Package Health Score

59 / 100
Full package analysis