[컴][js] react-vis 에서 radial chart 사용법

react-vis 에서 pie chart / radial chart / 원차트 /

Radial chart

Radial Chart 예제

아래는typescript 로 짠 code 이다.

• Radial chart | react-vis

data.angle 을 기본적으로 읽어드린다. 이것을 변경하고 싶으면 getAngle property 를 사용하면 된다.

color

RadialChart 에서 color 를 data.color 를 적용할 때는 colorType: 'literal' 을 사용해야 할 수도 있다.

• "react-vis > Scale properties"

<Hint> 사용

<Hint> 는 Tooltip 이라고 보면 된다. 주의할 것은 Hint 에 사용되는 값인 chartValue 인데 자세히 보면 children 에 해당하기 때문에 초기값을 react component 의 children 이 될 수 있는 값을 줘야 한다. 그래서 null 을 줘야 한다. ''(empty string) 은 안된다.

그리고 RadiaChart 의 style 에 position:relative 도 추가해줘야 한다.(기본적으로 문제가 없을 수 있지만, 이 때문에 처음에 안보일 수도 있다.)

import * as React from "react";


import {RadialChart, Hint,
    XYPlot, LineSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis} from 'react-vis';
    

import '../../../node_modules/react-vis/dist/style.css';





export interface PieChartTestBoxProps extends React.Props<any> {

}


export interface PieChartTestBoxState {
    vaccountBackCode: string,
    vaccount: string,
    ownerName: string,
    moneyLeft: number,
    chartValue: any,
}

// 'PieChartTestBoxProps' describes the shape of props.
// State is never set so we use the 'undefined' type.
export default class PieChartTestBox extends React.Component<PieChartTestBoxProps, PieChartTestBoxState> {

    constructor(props:any){
        super(props);
        this.state = {
            vaccountBackCode: '',
            vaccount: '',
            ownerName: '',
            moneyLeft: 0,
            chartValue: null, // '' 를 주면 안된다.
        }
        
    }

    render() {
        // For data format
        // @ref : http://uber.github.io/react-vis/documentation/other-charts/radial-chart
        const myData = [ 
            {angle: 200000000, label: '잔여금액', subLabel: 2000000},
            {angle: 5000000000, label: '모집된 금액', subLabel: 2000000, className: 'custom-class'} ];
        let {chartValue} = this.state;

        return (
            <div className={Styles.PieChartTestBox}>
                {/* @ref: https://github.com/uber/react-vis/blob/master/showcase/radial-chart/donut-chart.js */}
                <RadialChart
                    // innerRadius={100}
                    // getAngle={d => d.theta}
                    // radius={140}
                    data={myData}
                    onValueMouseOver={(v: any) => {this.setState({chartValue: v})}}
                    onSeriesMouseOut={(v:any) => this.setState({chartValue: null})}
                    width={300}
                    height={300}>
                    {chartValue && 
                        <Hint value={chartValue}
                            format={(value: any): {title: string, value: string}[]=>{
                                return [{title: value.label, value: value.subLabel}];
                            }}/>}
                </RadialChart>
                
            </div>
        );
    }

    

}

Donut chart(도넛 차트) 예제

• react-vis/donut-chart.js at master · uber/react-vis · GitHub

Legend

• Legends | Documentation | react-vis
• examples : react-vis/showcase/legends