FundCharts

web/weapp/nodejs canvas lite charts library.

Version

0.9.11

update info:

• 2022.02.05: fix linear bug; fix option clone bug; add instance destory() function;
• 2021.09.25: support TypeScript; ToolTips support React/Vue component use;
• 2021.06.20: fix weapp register bug;
• 2021.06.08: fix number bug; code optimization;
• 2020.09.08: add ToolTipsJS;
• 2020.02.28: fix pie chart bug; add stack display bars;
• 2019.12.20: add React/Vue component; Pie/Radar origin optimize;
• 2019.10.28: default transparent background('#fff' -> 'rgba(0,0,0,0)'); optimize line chart hover handler(onFinish, critical scene); scatter add border width control(borderRate);
• 2019.09.20: add charts comboine function(line and kline, bar and line).grid(line/bar/scatter/kline): add x/y axis line display control(grid.showGrid), add x/y grid number control(xTickLength/yTickLength), hover callback function add touchEvent's y. add animation duration control(duration). pie: add start angle control(startAngle). fixed bugs;
• 2019.08.23: optimize the line/pie/radar/bar's data update transition animation; set curve line(line, options.curveLine); set hollow display(kline, options.upHollow);
• 2019.07.18: add bar/kline/pie/radar hover event; fixed bugs
• 2019.06.20: add weapp animation; add axis handle functions(handleTextX/handleTextY)

Install

npm install --save fundcharts

Usage

1.set container

<!-- way 1 -->
<div id="chart" style="height: 2rem;"></div>

<!-- way 2(0.9.1+) -->
<canvas id="chart" width="375" height="200"></canvas>

2.import package

// i need line chart
import {line} from 'fundcharts'

or

import line from 'fundcharts/LineChart'

3.set config

// for example: line chart
let testline = new line({
	id: 'testline',
	xaxis: ['07-11', '08-11', '09-11', '09-22', '10-11', '11-11', '12-11'],
    datas: [
		[1, 2, 3, 4, 3.5, 3, 4]	
	]
});

4.draw chart

// for example: line chart
testline.init();

React/Vue Usage

React(v16.7+, hook) example

import React, {Component} from 'react';
import {Line} from 'fundcharts/react'

export default class LineShow extends Component {
    state = {
        index: '--',	// show hover index
        options: {		// chart options
            xaxis: ['1-11', '2-11', '3-11', '4-11', '5-11'],
            datas: [
                [1, 2, 3, 4, 5],
                [5, 3, 4, 2, 4]
            ]
        }
    };

    componentDidMount () {
        setTimeout(() => {
            this.setState({
                options: {
                    ...this.state.options,
                    datas: [
                        [3, 5, 6, 4, 2],
                        [3, 4, 3, 3, 5]
                    ]
                }
            })
        }, 5000);
    }

    setIndex (index) {
        this.setState({
            index
        })
    }

    render() {
        let {
            options,
            index,
        } = this.state;
        return (
            <div className="m-app">
                <p>{index}</p>
                <Line
                    options={options}
                    hover={this.setIndex.bind(this)}
                />
			</div>
        );
    }
}

Vue

<template>
    <section>
        <p class='f-tc'>{{index}}</p>
        <v-line
            prefix="aaa"
            :options="options"
        />
    </section>
</template>
<script>
import {Line} from 'fundcharts/vue';

export default {
    name: "lineshow",
    data () {
            return {
                options: {		// chart options
                    datas: [
                        [1, 2, 3, 4, 5],
                        [4, 2, 5, 5, 1]
                    ],
                    xaxis: ['1-11', '2-11', '3-11', '4-11', '5-11'],
                    
                    hover: this.handleHover
                },
                index: '--',	// show hover index
            }
    },
    components: {
            'v-line': Line,
    },
    methods: {
            handleHover (index) {
                console.log(index)
                this.show = index;
            }
    },
    mounted() {
            setTimeout(() => {
                this.options = {
                    ...this.options,
                        datas: [
                        [6, 3, 5, 3, 2],
                        [4, 5, 6, 4, 3]
                    ]
                }
            }, 5000);
    }
}
</script>

Configuration

document>>

demo

github FundCharts-demos

Author

Micheal Wayne

Update time

2022.02.05