Demos

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="diagram">
  <link rel="stylesheet" href="./assets/common.css">
  <title>DataSet State</title>
</head>

<body>
<div id="canvas1"></div>
<div id="canvas2"></div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/data-set.min.js"></script>
<script src="./assets/g2.min.js"></script>
<script src="../build/g2-brush.js"></script>
<script>
  $.getJSON('./data/sp500.json', function(data) {
    const ds = new DataSet({
      state: {
        dates: null
      }
    });
    const totalDv = ds.createView().source(data);
    const dv = ds.createView();
    dv.source(data)
      .transform({
        type: 'filter',
        callback: obj => {
          if (ds.state.dates) {
            return ds.state.dates.indexOf(obj.date) > -1;
          }
          return obj;
        }
      });
    const chart1 = new G2.Chart({
      container: 'canvas1',
      forceFit: true,
      height: window.innerHeight * (4 / 5),
      animate: false,
      padding: [ 100, 40, 50, 80]
    });
    chart1.source(dv, {
      date: {
        tickCount: 10,
        type: 'time',
        mask: 'MMM D YYYY'
      },
      price: {
        min: totalDv.min('price'),
        max: totalDv.max('price')
      }
    });
    chart1.area().position('date*price').shape('smooth').opacity(0.85);
    chart1.render();

// second chart
    const chart2 = new G2.Chart({
      container: 'canvas2',
      forceFit: true,
      height: window.innerHeight * (1 / 5),
      padding: [ 5, 40, 60, 80]
    });
    chart2.source(data, {
      date: {
        tickCount: 10,
        type: 'time',
        mask: 'YYYY'
      }
    });
    chart2.tooltip(false);
    chart2.axis('price', false);
    chart2.area().position('date*price').active(false).shape('smooth').opacity(0.85);
    chart2.render();

new Brush({
      canvas: chart2.get('canvas'),
      chart: chart2,
      type: 'X',
      dragable: true,
      onBrushmove(ev) {
        const { date } = ev;
        ds.setState('dates', date);
      },
      onDragmove(ev) {
        const { date } = ev;
        ds.setState('dates', date);
      }
    });
  });
</script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<body>
<div id="canvas"></div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/data-set.min.js"></script>
<script src="./assets/g2.min.js"></script>
<script src="../build/g2-brush.js"></script>
<script>
  $.getJSON('./data/cars.json', function(data) {
    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight
    });

const view1 = chart.view({
      end: {
        x: 0.45,
        y: 1
      }
    });
    view1.source(data);
    view1.tooltip(false);
    view1.point().position('Horsepower*Miles_per_Gallon');

const view2 = chart.view({
      start: {
        x: 0.55,
        y: 0
      }
    });

view2.source(data);
    view2.point().position('Acceleration*Displacement');

chart.render();

new Brush({
      canvas: chart.get('canvas'),
      dragable: true,
      onBrushstart(ev) {
        const { x, y } = ev;
        const views = chart.getViewsByPoint({ x, y });
        if (views.length > 1) {
          this.chart = views[1];
          const coord = views[1].get('coord');
          this.plot = {
            start: coord.start,
            end: coord.end
          };
          this.xScale = views[1].getXScale();
          this.yScale = views[1].getYScales()[0];
        }
      },
      onBrushmove(ev) {
        const { data } = ev;
        view2.filterShape(obj => {
          return data.indexOf(obj) > -1;
        });
      },
      onDragmove(ev) {
        const { data } = ev;
        view2.filterShape(obj => {
          return data.indexOf(obj) > -1;
        });
      }
    });
  });
</script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

chart.source(data, {
      Species: {
        sync: true
      }
    });
    chart.legend({
      hoverable: false
    });
    chart.facet('matrix', {
      fields: [ 'SepalLength', 'SepalWidth', 'PetalLength', 'PetalWidth' ],
      eachView(view, facet) {
        view.axis(facet.colField, {
          label: null,
          line: {
            lineWidth: 1,
            stroke: '#000'
          },
          tickLine: {
            lineWidth: 1,
            stroke: '#000',
            length: 4
          }
        });
        view.axis(facet.rowField, {
          label: null,
          line: {
            lineWidth: 1,
            stroke: '#000'
          },
          tickLine: {
            lineWidth: 1,
            stroke: '#000',
            length: 4
          }
        });
        if (facet.rowIndex === facet.colIndex) {
          view.point()
            .position(facet.colField + '*' + facet.colField)
              .color('Species', [ '#880000', '#008800', '#000088' ])
              .opacity(0.5)
              .shape('circle')
              .size(3)
              .active(false);
        } else {
          view.point()
            .position([ facet.colField, facet.rowField ])
              .color('Species', [ '#880000', '#008800', '#000088' ])
              .opacity(0.5)
              .shape('circle')
              .size(3)
              .active(false);
        }
        if ([ 0, 1, 2, 3 ].indexOf(facet.rowIndex) > -1 && facet.colIndex === 0) {
          view.guide().text({
            position: [ 3.7, 'median' ],
            content: facet.rowValue,
            style: {
              rotate: -90,
              fontSize: 12,
              fill: '#999',
              textAlign: 'center'
            }
          });
        }
        if ([ 0, 1, 2, 3 ].indexOf(facet.colIndex) > -1 && facet.rowIndex === 3) {
          view.guide().text({
            position: [ 'median', 'min' ],
            content: facet.colValue,
            style: {
              fontSize: 12,
              fill: '#999',
              textAlign: 'center'
            },
            offsetY: 20
          });
        }
      }
    });
    chart.render();

let brush;
    function setBrushType(type) {
      if (!brush) {
        brush = new Brush({
          canvas: chart.get('canvas'),
          dragable: true,
          type,
          onBrushstart(ev) {
            chart.hideTooltip();
            const { x, y } = ev;
            const views = chart.getViewsByPoint({ x, y });
            if (views.length > 1) {
              this.chart = views[1];
              const coord = views[1].get('coord');
              this.plot = {
                start: coord.start,
                end: coord.end
              };
              this.xScale = views[1].getXScale();
              this.yScale = views[1].getYScales()[0];
            }
          },
          onBrushmove(ev) {
            chart.hideTooltip();

const { data } = ev;
            chart.eachShape((record, shape) => {
              if (!shape.get('_originAttrs')) {
                shape.set('_originAttrs', Util.cloneDeep(shape.__attrs)); // 缓存原来的属性
              }
              if (data.indexOf(record) === -1) {
                shape.attr('fill', '#ccc');
              } else {
                const originAttrs = shape.get('_originAttrs');
                shape.__attrs = Util.cloneDeep(originAttrs);
              }
            });
          },
          onDragmove(ev) {
            chart.hideTooltip();

const { data } = ev;
            chart.eachShape((record, shape) => {
              if (!shape.get('_originAttrs')) {
                shape.set('_originAttrs', Util.cloneDeep(shape.__attrs)); // 缓存原来的属性
              }
              if (data.indexOf(record) === -1) {
                shape.attr('fill', '#ccc');
              } else {
                const originAttrs = shape.get('_originAttrs');
                shape.__attrs = Util.cloneDeep(originAttrs);
              }
            });
          }
        });
      } else {
        if (type === 'clear') {
          brush.container.clear();
          // brush.canvas.draw();
        } else {
        brush.setType(type);

}
      }
    }

$('#XY').click(ev => {
      setBrushType('XY');
    });
    $('#Y').click(ev => {
      setBrushType('Y');
    });
    $('#X').click(ev => {
      setBrushType('X');
    });
    $('#POLYGON').click(ev => {
      setBrushType('POLYGON');
    });
    $('#clear').click(ev => {
      setBrushType('clear');

chart.eachShape((record, shape) => {
        if (shape.get('_originAttrs')) {
          const originAttrs = shape.get('_originAttrs');
          shape.__attrs = Util.cloneDeep(originAttrs);
        }
      });
    });
  });
</script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<body>
<div id="canvas"></div>
<div style="width: 100%;text-align: center;">
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/data-set.min.js"></script>
<script src="./assets/g2.min.js"></script>
<script src="../build/g2-brush.js"></script>
<script>
  $.getJSON('./data/top2000.json', data => {
    const ds = new DataSet();
    const dv = ds.createView('test')
      .source(data)
      .transform({
        as: [ 'count' ],
        groupBy: [ 'release' ],
        operations: [ 'count' ],
        type: 'aggregate'
      });

chart.render();

new Brush({
      canvas: chart.get('canvas'),
      chart,
      type: 'X',
      onBrushstart() {
        chart.hideTooltip();
      },
      onBrushmove() {
        chart.hideTooltip();
      }
    });
    chart.on('plotdblclick', () => {
      chart.get('options').filters = {};
      chart.repaint();
    });

});
</script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<body>
<div id="canvas"></div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/data-set.min.js"></script>
<script src="./assets/g2.min.js"></script>
<script src="../build/g2-brush.js"></script>
<script>
  $.getJSON('./data/avg-temp.json', function(data) {
    const { DataView } = DataSet;
    const dv = new DataView();
    dv.source(data)
      .transform({
        type: 'fold',
        key: 'city',
        value: 'value',
        fields: [ 'New York', 'San Francisco', 'Austin' ]
      });
    const chart = new G2.Chart({
      id: 'canvas',
      forceFit: true,
      height: 400,
      padding: [ 60, 30, 30 ]
    });
    chart.source(dv, {
      date: {
        type: 'time'
      },
      value: {
        alias: 'Temperature, ºF'
      }
    });
    chart.legend({
      position: 'top'
    });
    chart.axis('date', {
      line: {
        stroke: '#000'
      },
      tickLine: {
        stroke: '#000',
        value: 6 // 刻度线长度
      },
      label: {
        textStyle: {
          textAlign: 'start'
        }
      }
    });
    chart.axis('value', {
      tickLine: {
        stroke: '#000',
        value: 6 // 刻度线长度
      },
      label: {
        textStyle: {
          fill: '#000'
        }
      },
      line: {
        stroke: '#000'
      },
      grid: null
    });
    chart.line()
      .position('date*value')
      .color('city')
      .shape('spline')
      .size(2);
    chart.render();

<!DOCTYPE html>
<html lang="en">

<body>
<div id="canvas"></div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/data-set.min.js"></script>
<script src="./assets/g2.min.js"></script>
<script src="../build/g2-brush.js"></script>
<script>
  const data = [[ 0, 0, 10 ], [ 0, 1, 19 ], [ 0, 2, 8 ], [ 0, 3, 24 ], [ 0, 4, 67 ], [ 1, 0, 92 ], [ 1, 1, 58 ], [ 1, 2, 78 ], [ 1, 3, 117 ], [ 1, 4, 48 ], [ 2, 0, 35 ], [ 2, 1, 15 ], [ 2, 2, 123 ], [ 2, 3, 64 ], [ 2, 4, 52 ], [ 3, 0, 72 ], [ 3, 1, 132 ], [ 3, 2, 114 ], [ 3, 3, 19 ], [ 3, 4, 16 ], [ 4, 0, 38 ], [ 4, 1, 5 ], [ 4, 2, 8 ], [ 4, 3, 117 ], [ 4, 4, 115 ], [ 5, 0, 88 ], [ 5, 1, 32 ], [ 5, 2, 12 ], [ 5, 3, 6 ], [ 5, 4, 120 ], [ 6, 0, 13 ], [ 6, 1, 44 ], [ 6, 2, 88 ], [ 6, 3, 98 ], [ 6, 4, 96 ], [ 7, 0, 31 ], [ 7, 1, 1 ], [ 7, 2, 82 ], [ 7, 3, 32 ], [ 7, 4, 30 ], [ 8, 0, 85 ], [ 8, 1, 97 ], [ 8, 2, 123 ], [ 8, 3, 64 ], [ 8, 4, 84 ], [ 9, 0, 47 ], [ 9, 1, 114 ], [ 9, 2, 31 ], [ 9, 3, 48 ], [ 9, 4, 91 ]];
  const source = [];
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    const obj = {};
    obj.name = item[0];
    obj.day = item[1];
    obj.sales = item[2];
    source.push(obj);
  }
  const chart = new G2.Chart({
    id: 'canvas',
    width: 800,
    height: 600,
    padding: 80
  });
  chart.source(source, {
    name: {
      type: 'cat',
      values: [ 'Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura' ]
    },
    day: {
      type: 'cat',
      values: [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday' ]
    }
  });
  chart.axis('name', {
    tickLine: null,
    grid: {
      align: 'center',
      lineStyle: {
        lineWidth: 1,
        lineDash: null,
        stroke: '#f0f0f0'
      }
    }
  });
  chart.axis('day', {
    title: null,
    grid: {
      align: 'center',
      lineStyle: {
        lineWidth: 1,
        lineDash: null,
        stroke: '#f0f0f0'
      },
      showFirstLine: true
    }
  });
  chart.legend(false);
  chart.polygon()
    .position('name*day')
    .color('sales', '#BAE7FF-#1890FF-#0050B3')
    .label('sales', {
      offset: -2,
      textStyle: {
        fill: '#fff',
        shadowBlur: 2,
        shadowColor: 'rgba(0, 0, 0, .45)'
      }
    })
    .style({
      lineWidth: 1,
      stroke: '#fff'
    });
  chart.render();

new Brush({
    chart,
    canvas: chart.get('canvas'),
    style: {
      lineWidth: 1,
      stroke: '#999',
      fill: '#999',
      fillOpacity: 0.3
    },
    onBrushmove() {
      chart.hideTooltip();
    }
  });
  chart.on('plotdblclick', () => {
    chart.get('options').filters = {};
    chart.repaint();
  });
</script>
</body>

</html>

ds-state

filter-shape

highlight

interval

line

polygon