How to use the @antv/my-f2.Global function in @antv/my-f2

To help you get started, we’ve selected a few @antv/my-f2 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 antvis / mini-program-f2-demos / pages / charts / stack-bar / index.js View on Github external
chart.source(data, {
    '人口数量': {
      tickCount: 5
    }
  });
  chart.coord({
    transposed: true
  });
  chart.axis('State', {
    line: F2.Global._defaultAxis.line,
    grid: null
  });
  chart.axis('人口数量', {
    line: null,
    grid: F2.Global._defaultAxis.grid,
    label: function(text, index, total) {
      var textCfg = {
        text: text / 1000 + ' k'
      };
      if (index === 0) {
        textCfg.textAlign = 'left';
      } else if (index === total - 1) {
        textCfg.textAlign = 'right';
      }
      return textCfg;
    }
  });
  chart.tooltip({
    custom: true, // 自定义 tooltip 内容框
    onChange: function(obj) {
      var legend = chart.get('legendController').legends.top[0];
github antvis / mini-program-f2-demos / pages / charts / dodge-bar / index.js View on Github external
tooltipItems.map(function(item) {
        var name = item.name;
        var value = item.value;
        if (map[name]) {
          map[name].value = (value);
        }
      });
      legend.setItems(Object.values(map));
    },
    onHide: function() {
      var legend = chart.get('legendController').legends.top[0];
      legend.setItems(chart.getLegendItems().country);
    }
  });
  chart.axis('label', {
    line: F2.Global._defaultAxis.line,
    grid: null
  });
  chart.axis('value', {
    line: null,
    grid: F2.Global._defaultAxis.grid,
    label: function(text, index, total) {
      var textCfg = {};
      if (index === 0) {
        textCfg.textAlign = 'left';
      } else if (index === total - 1) {
        textCfg.textAlign = 'right';
      }
      return textCfg;
    }
  });
  chart.interval().position('label*value').color('type').adjust({
github antvis / mini-program-f2-demos / pages / charts / stack-bar / index.js View on Github external
var chart = new F2.Chart({
    el: canvas,
    width,
    height
  });

  chart.source(data, {
    '人口数量': {
      tickCount: 5
    }
  });
  chart.coord({
    transposed: true
  });
  chart.axis('State', {
    line: F2.Global._defaultAxis.line,
    grid: null
  });
  chart.axis('人口数量', {
    line: null,
    grid: F2.Global._defaultAxis.grid,
    label: function(text, index, total) {
      var textCfg = {
        text: text / 1000 + ' k'
      };
      if (index === 0) {
        textCfg.textAlign = 'left';
      } else if (index === total - 1) {
        textCfg.textAlign = 'right';
      }
      return textCfg;
    }
github antvis / mini-program-f2-demos / pages / charts / bar / index.js View on Github external
function drawChart(canvas, width, height) {
  var Global = F2.Global;
  var data = [
    { country: '巴西', population: 18203 },
    { country: '印尼', population: 23489 },
    { country: '美国', population: 29034 },
    { country: '印度', population: 104970 },
    { country: '中国', population: 131744 }
  ];
  var chart = new F2.Chart({
    el: canvas,
    width,
    height
  });

  chart.source(data, {
    population: {
      tickCount: 5
github ant-mini-program / mini-chart / components / pie / index.js View on Github external
text: data.type,
          fill: color
        };
      },
      label2: function label2(data, color) {
        return {
          text: data.data,
          fill: color,
          fontWeight: 'bold'
        };
      }
    });
  }

  const color = [];
  const dftColors = F2.Global.colors;
  const length = dftColors.length;
  series.forEach((kind, i) => {
    color.push(kind.color || dftColors[i % length]);
  });
  chart.axis(false);
  chart.tooltip(tooltip);
  chart.legend(legend);

  chart.interval()
    .position('key*data')
    .color('type', color)
    .adjust('stack')
    .style(style);

  if (guide) {
    if (guide.text) {
github ant-mini-program / mini-chart / components / scatter / index.js View on Github external
if(xAxis.htAlign) {
      xAxis.label = util.label;
    }
    chart.scale('key', util.scale(xAxis));
    chart.axis('key', util.axis(xAxis));
  }
  if (yAxis) {
    chart.scale('value', util.scale(yAxis));
    chart.axis('value', util.axis(yAxis));
  }
  chart.tooltip(tooltip);
  chart.legend(legend);

  const color = [];
  const size = [];
  const dftColors = F2.Global.colors;
  const length = dftColors.length;

  series.forEach((kind, i) => {
    color.push(kind.color || dftColors[i % length]);
    size.push(kind.size || 3)
  });

  chart.point()
    .position('key*value')
    .color('type', color)
    .size('type', size)
    .style(style);

  chart.changeSize(width, height);
}
github ant-mini-program / mini-chart / components / rose / index.js View on Github external
function render(chart, props, width, height) {
  if(!chart) {
    return;
  }
  const { series, legend, tooltip, style } = props;

  chart.clear();

  let data = series.map(item => {
    return item;
  });
  chart.source(data);
  chart.coord('polar');

  const color = [];
  const dftColors = F2.Global.colors;
  const length = dftColors.length;
  series.forEach((kind, i) => {
    color.push(kind.color || dftColors[i % length]);
  });
  chart.axis(false);
  chart.tooltip(tooltip);
  chart.legend(legend);

  chart.interval()
    .position('type*data')
    .color('type', color)
    .style(style);

  chart.changeSize(width, height);
}