How to use g2 - 10 common examples

To help you get started, we’ve selected a few g2 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 ant-design / ant-design-pro-site / scaffold / src / components / Charts / Radar / index.js View on Github external
renderChart(data) {
    const { height = 0,
      hasLegend = true,
      fit = true,
      tickCount = 4,
      margin = [16, 0, 16, 0] } = this.props;

    if (!data || (data && data.length < 1)) {
      return;
    }

    // clean
    this.node.innerHTML = '';

    const chart = new G2.Chart({
      container: this.node,
      forceFit: fit,
      height: height - 22,
      plotCfg: {
        margin,
      },
    });

    this.chart = chart;

    chart.source(data, {
      value: {
        min: 0,
        tickCount,
      },
    });
github apache / skywalking-ui / src / main / frontend / src / components / Charts / Line / index.js View on Github external
const {
      height = 0,
      fit = true,
      margin = [32, 60, 32, 60],
      borderColor,
      color,
    } = this.props;

    if (!data || (data && data.length < 1)) {
      return;
    }

    // clean
    this.node.innerHTML = '';

    const chart = new G2.Chart({
      container: this.node,
      forceFit: fit,
      height: height - 22,
      plotCfg: {
        margin,
      },
      legend: false,
    });
    chart.legend(false);
    chart.axis('x', {
      title: false,
    });
    chart.axis('y', {
      title: false,
    });
    chart.tooltip({
github uiwjs / uiw-admin / src / components / Charts / Bar / index.js View on Github external
fit = true,
      color = 'rgba(24, 144, 255, 0.85)',
      margin = [32, 0, (autoHideXLables ? 8 : 32), 40],
    } = this.props;

    if (!data || (data && data.length < 1)) {
      return;
    }

    // clean
    this.node.innerHTML = '';

    const { Frame } = G2;
    const frame = new Frame(data);

    const chart = new G2.Chart({
      container: this.node,
      forceFit: fit,
      height: height - 22,
      legend: null,
      plotCfg: { margin },
    });

    if (autoHideXLables) {
      chart.axis('x', {
        title: false,
        tickLine: false,
        labels: false,
      });
    } else {
      chart.axis('x', { title: false });
    }
github ant-design / ant-design-pro-site / scaffold / src / components / Charts / Pie / index.js View on Github external
m = [24, 240, 24, 0];
      } else if (percent) {
        m = [0, 0, 0, 0];
      } else {
        m = [24, 0, 24, 0];
      }
    }

    const h = title ? (height + m[0] + m[2] + (-46)) : (height + m[0] + m[2]);

    // clean
    this.node.innerHTML = '';

    const Stat = G2.Stat;

    const chart = new G2.Chart({
      container: this.node,
      forceFit: fit,
      height: h,
      plotCfg: {
        margin: m,
      },
      animate,
    });

    if (!tooltip) {
      chart.tooltip(false);
    } else {
      chart.tooltip({
        title: null,
      });
    }
github canisminor1990 / ffxiv-cmskin / src / components / PieChart / index.js View on Github external
const Chart = createG2(chart => {
    const Stat = G2.Stat;
    chart.coord('theta', {
      radius: 0.4, // 设置饼图的大小
    });
    chart.legend('name', {
      position: 'bottom',
      itemWrap: true,
      word: {
        fill: 'rgba(255,255,255,.5)',
      },
      formatter: name => `${name}: ${desc[name].percent} - ${desc[name].ps}`,
    });
    chart
      .intervalStack()
      .position(Stat.summary.percent('data'))
      .color('name', color)
      .label('name');
github ant-design / ant-design-pro-site / scaffold / src / components / Charts / Pie / index.js View on Github external
if (!margin) {
      if (hasLegend) {
        m = [24, 240, 24, 0];
      } else if (percent) {
        m = [0, 0, 0, 0];
      } else {
        m = [24, 0, 24, 0];
      }
    }

    const h = title ? (height + m[0] + m[2] + (-46)) : (height + m[0] + m[2]);

    // clean
    this.node.innerHTML = '';

    const Stat = G2.Stat;

    const chart = new G2.Chart({
      container: this.node,
      forceFit: fit,
      height: h,
      plotCfg: {
        margin: m,
      },
      animate,
    });

    if (!tooltip) {
      chart.tooltip(false);
    } else {
      chart.tooltip({
        title: null,
github Sioxas / data-screen / src / config / G2.conf.js View on Github external
}
    },
    html: {
      align: 'cc'
    }
  },
  tooltipMarker: {
    fill: '#fff',
    symbol: 'circle',
    lineWidth: 2,
    stroke: DEFAULT_COLOR,
    radius: 4
  } // 提示信息在折线图、区域图上形成点的样式
};
// let theme = G2.Util.mix(true, {}, G2.Theme, Theme);
G2.Global.setTheme(Theme); // 将主题设置为用户自定义的主题

export default G2
github ant-design / ant-design-pro-site / scaffold / src / components / Charts / Gauge / index.js View on Github external
import React, { PureComponent } from 'react';
import G2 from 'g2';

const Shape = G2.Shape;

/* eslint no-underscore-dangle: 0 */
class Gauge extends PureComponent {
  componentDidMount() {
    this.renderChart();
  }

  componentWillReceiveProps(nextProps) {
    this.renderChart(nextProps);
  }

  handleRef = (n) => {
    this.node = n;
  }

  initChart(nextProps) {
github ant-design / ant-design-pro-site / scaffold / src / components / Charts / Gauge / index.js View on Github external
renderChart(nextProps) {
    const { height, color = '#00b1f8', bgColor = '#d3f3fe', title, percent } = nextProps || this.props;
    const data = [{ name: title, value: percent }];

    if (this.chart) {
      this.chart.clear();
    }
    if (this.node) {
      this.node.innerHTML = '';
    }

    this.initChart(nextProps);

    const chart = new G2.Chart({
      container: this.node,
      forceFit: true,
      height,
      animate: false,
      plotCfg: {
        margin: [10, 0, 30, 0],
      },
    });

    chart.source(data);

    chart.tooltip(false);

    chart.coord('gauge', {
      startAngle: -1.2 * Math.PI,
      endAngle: 0.20 * Math.PI,
github gxchain / gxchain-wallet / src / components / RealtimeQuotations.vue View on Github external
renderLine () {
                const chart = new G2.Chart({
                    container: 'line',
                    forceFit: true,
                    height: 400,
                    animate: true
                });
                chart.source(this.lineData);
                chart.scale({
                    time: {
                        tickCount: 5,
                        range: [0, 1]
                    }
                });
                chart.tooltip({
                    crosshairs: {
                        type: 'line'
                    }

g2

An implementation of the Grammar of Graphics in javascript

MIT
Latest version published 6 years ago

Package Health Score

70 / 100
Full package analysis