0.2.1 • Published 3 years ago

@tiki.vn/tini-f2 v0.2.1

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

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.vn/tini-f2
# or
yarn install @tiki.vn/tini-f2

2. Sử dụng

pages/index/index.json
{
  "usingComponents": {
    "tini-f2": "@tiki.vn/tini-f2/es/index"
  }
}
pages/column/index.txml
<tini-f2
  chartId="chart-id"
  onDraw="handleDraw"
/>

Các property của component:

PropsKiểu dữ liệuBắt buộcMô tả
chartIdstringxID của chart, mỗi chart phải có một ID khác nhau.
onDrawfunctionxỞ đây ta sẽ configs UI cũng như nạp data để render chart. Bắt buộc return về chart.
widthnumberChiều rộng của chart.
heightnumberChiề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;
  }
});

API

  • Tra cứu chi tiết các configs/API ở đây
  • Xem example ở đây