Nanoprogrammed Penultimate Musicianship

npm

Need private packages and team management tools?Check out npm Orgs. »

@canday/icharts

1.0.6 • Public • Published

icharts

说明

icharts 是基于 F2 的 React 图表库。 具有轻量、灵活、高复用、可拔插的特点

安装

$ npm i @canday/icharts --save

使用

import React from 'react';
import { Axis, Line, Chart, Scale } from 'icharts';
 
export const LineChart = (): JSX.Element => {
  const data = [
    {
      date: 1529856000000,
      type: '本基金',
      rate: 0.02,
    },
    {
      date: 1529942400000,
      type: '本基金',
      rate: 0.082,
    },
    {
      date: 1530028800000,
      type: '本基金',
      rate: 0.14,
    },
    {
      date: 1530115200000,
      type: '本基金',
      rate: -0.3,
    },
    {
      date: 1530201600000,
      type: '本基金',
      rate: -0.139,
    },
    {
      date: 1529856000000,
      type: '同类均值',
      rate: 0,
    },
    {
      date: 1529942400000,
      type: '同类均值',
      rate: -0.175,
    },
    {
      date: 1530028800000,
      type: '同类均值',
      rate: -0.164,
    },
    {
      date: 1530115200000,
      type: '同类均值',
      rate: -0.055,
    },
    {
      date: 1530201600000,
      type: '同类均值',
      rate: -0.13,
    },
  ];
 
  const colorValue = (field: string) => {
    if (field === '同类均值') {
      return '#0366d6';
    } else {
      return '#FFBD2B'
    }
  };
 
  const formatterRate = (rate: string) => {
    return rate + '%';
  };
 
  const dateAxisStyle = {
      rotate: -Math.PI / 3,
      textAlign: 'end',
      translate: '(20, 20)'
  };
 
  return (
    <div className="line-chart">
        <Chart data={data} padding={[60, 0, 80, 50]}>
            <Line position="date*rate" color={{field: 'type', value: colorValue}} />
            <Scale field="rate" tickCount={5} formatter={formatterRate} />
            <Scale field="date" tickCount={4} type="timeCat" />
            <Axis field="date" label={dateAxisStyle} />
        </Chart>
    </div>
  );
};

chart

Keywords

install

npm i @canday/icharts

Downloadsweekly downloads

8

version

1.0.6

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability