antvis/my-f2

Name: my-f2

Owner: AntV team

Description: F2 ?????????

Created: 2017-12-07 05:37:57.0

Updated: 2018-05-24 11:45:21.0

Pushed: 2018-04-16 10:31:48.0

Homepage:

Size: 422

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

my-f2

F2 for alipay mini-program.

????????????? document??? Guide.Html ???????????????? F2 ????????

??

npm install @antv/my-f2

??

Demos: https://github.com/antvis/mini-program-f2-demos/tree/master/my-charts ???????????????????

??

 page.acss -->
as {
dth: 100%;
ight: 100%;

tml
 page.axml, pixeRatio = 2 -->
w class="container">
anvas
id="area"
onTouchStart="touchStart"
onTouchMove="touchMove"
onTouchEnd="touchEnd"

ew>

s
rt F2 from '@antv/my-f2';
t app = getApp();

chart = null;

tion drawChart(canvas, width, height) {
nst data = [
{ value: 63.4, city: 'New York', date: '2011-10-01' },
{ value: 62.7, city: 'Alaska', date: '2011-10-01' },
{ value: 72.2, city: 'Austin', date: '2011-10-01' },
{ value: 58, city: 'New York', date: '2011-10-02' },
{ value: 59.9, city: 'Alaska', date: '2011-10-02' },
{ value: 67.7, city: 'Austin', date: '2011-10-02' },
{ value: 53.3, city: 'New York', date: '2011-10-03' },
{ value: 59.1, city: 'Alaska', date: '2011-10-03' },
{ value: 69.4, city: 'Austin', date: '2011-10-03' },
// ...

art = new F2.Chart({
el: canvas,
width,
height
;

art.source(data, {
date: {
  range: [ 0, 1 ],
  type: 'timeCat',
  mask: 'MM-DD'
},
value: {
  max: 300,
  tickCount: 4
}
;
art.tooltip({
showCrosshairs: true,
custom: true, // ??? tooltip ???
onChange(obj) {
  const legend = chart.get('legendController').legends.top[0];
  const tooltipItems = obj.items;
  const legendItems = legend.items;
  const map = {};
  legendItems.map(item => {
    map[item.name] = Object.assign({}, item);
  });
  tooltipItems.map(item => {
    const { name, value } = item;
    if (map[name]) {
      map[name].value = value;
    }
  });
  legend.setItems(Object.values(map));
},
onHide() {
  const legend = chart.get('legendController').legends.top[0];
  legend.setItems(chart.getLegendItems().country);
}
;
art.axis('date', {
label(text, index, total) {
  const textCfg = {};
  if (index === 0) {
    textCfg.textAlign = 'left';
  }
  if (index === total - 1) {
    textCfg.textAlign = 'right';
  }
  return textCfg;
}
;
art.area().position('date*value').color('city').adjust('stack');
art.line().position('date*value').color('city').adjust('stack');
art.render();
turn chart;


({
ta: {},
Ready() {
my.createSelectorQuery()
  .select('#area')
  .boundingClientRect()
  .exec((res) => {
    const myCtx = my.createCanvasContext('area');
    const canvas = new F2.Renderer(myCtx);
    this.canvas = canvas;
    drawChart(canvas, res[0].width, res[0].height);
  });

uchStart(e) {
if (this.canvas) {
  this.canvas.emitEvent('touchstart', [e]);
}

uchMove(e) {
if (this.canvas) {
  this.canvas.emitEvent('touchmove', [e]);
}

uchEnd(e) {
if (this.canvas) {
  this.canvas.emitEvent('touchend', [e]);
}

API

?? f2-canvas ???????????????? html5 canvas ???????????? F2 ??????????? F2 ????????????????????????????? F2 ????????

?? F2 ? api ???https://antv.alipay.com/zh-cn/f2/3.x/api/index.html

FAQ

???????

?????? dpr ?????????????? canvas ????????????????

 getSystemInfoSync().pixelRatio === 2 -->
vas width="200" height="200" style="width:100px;height:100px;"/>

??????? Chart ???????????????

t = new F2.Chart({
: canvas,
dth,
ight,
xelRatio: 2

????????????

??????????????????

????

???????????????????? issues ???????? bug ?????

License

MIT license