Tiki-miniapp-f2 NPM

Tini F2

Tini App component hỗ trợ vẽ biểu đồ sử dụng thư viện @antv/f2

Cách sử dụng

1. Cài đặt

npm install tiki-miniapp-f2
# or
yarn install tiki-miniapp-f2

2. Sử dụng

pages/index/index.json

{
  "usingComponents": {
    "tini-f2": "tiki-miniapp-f2/es/index"
  }
}

pages/column/index.txml

<tini-f2
  chartId="chart-id"
  onDraw="handleDraw"
/>

Các property của component:

Props	Kiểu dữ liệu	Bắt buộc	Mô tả
chartId	string	x	ID của chart, mỗi chart phải có một ID khác nhau.
onDraw	function	x	Ở đây ta sẽ configs UI cũng như nạp data để render chart. Bắt buộc return về chart.
width	number		Chiều rộng của chart.
height	number		Chiều cao của chart.

pages/index/index.js

Page({
  data: {
    chartData: [
      {
        date: '2020/02/01',
        value: 0
      },
      {
        date: '2020/02/02',
        value: 900
      },
      {
        date: '2020/02/03',
        value: 2300
      },
      {
        date: '2020/02/04',
        value: 800
      },
      {
        date: '2020/02/05',
        value: 1600
      },
      {
        date: '2020/02/06',
        value: 2900
      },
      {
        date: '2020/02/07',
        value: 3800
      }
    ]
  },

  handleDraw(chart) {
    chart.source(this.data.chartData, {
      date: {
        type: 'timeCat',
        mask: 'MM-DD'
      },
      value: {
        min: 0,
        tickCount: 5
      }
    });

    chart.tooltip({
      alwaysShow: true
    });

    chart.interval().position('date*value').color('#f00');

    chart.render();

    // Bắt buộc phải return về chart
    return chart;
  }
});