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.

github alibaba / ice / blocks / VisitorsLocationChart / src / MapChart.jsx View on Github external
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 (
github alibaba / ice / react-materials / scaffolds / ice-design-ecommerce / src / pages / Dashboard / components / PerformanceChart / LineChart.jsx View on Github external
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 (
github ice-lab / react-materials / blocks / ChartTypeLine / src / index.jsx View on Github external
{ 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 (
github alibaba / ice / official-material / blocks / ChartBar / src / ChartBar.jsx View on Github external
'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>
github alibaba / ice / scaffords / ice-design-pro / src / pages / Charts / components / ChartBar / ChartBar.jsx View on Github external
'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>
github alibaba / ice / scaffolds / ice-design-analytical / src / pages / Dashboard / components / FlowStatistics / LineChart.jsx View on Github external
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 (
github artiely / element-admin / src / views / chart / Line.vue View on Github external
_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]
github alibaba / ice / scaffords / ice-design-pro / src / pages / Charts / components / ChartTypeLine / ChartTypeLine.jsx View on Github external
{ 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 (
github artiely / element-admin / src / views / chart / _Line.vue View on Github external
_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]
github apache / skywalking-ui / src / components / Charts / Line / index.js View on Github external
}

    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 &amp;&amp; <h4 style="{{">{title}</h4>}
          </div></div>

@antv/data-set

data set with state management

MIT
Latest version published 4 years ago

Package Health Score

59 / 100
Full package analysis