FundCharts

功能描述

FundCharts是轻量级canvas图表库，基于原生js, 仅29kb

依赖插件

无

快速使用

var BarChart = FundCharts.bar
var LineChart = FundCharts.line
var PieChart = FundCharts.pie
var RadarChart = FundCharts.radar
var ScatterChart = FundCharts.scatter
var KlineChart = FundCharts.kline

var bar = new BarChart({
    id: 'bar',
    xaxis: ['07-11', '08-11', '09-11', '09-22', '10-11', '11-11', '12-11', '12-12'],
    datas: [
        [1, 3, 2, 3, 3.2, 4, 5]
    ],
    hover: function (index, yValues, xValues, x) {	// 索引, datas值集合，xaxis[index], touch event横坐标
        console.log(index, yValues, xValues, x);

        var ctx = bar.ctx;
        var datasets = bar.datasets[0];	// 坐标集
        var _zero = bar.drawer.zeroY;	// 0刻度坐标

        ctx.lineWidth = 1;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = '12px Arial';
        ctx.fillStyle = '#000';
        ctx.fillText(
            yValues[0].toFixed(1),
            datasets[index].x + 6,
            datasets[index].y + 10 * (datasets[index].y > _zero && 1 || -1)
        );
    }
})
bar.init();

new LineChart({
    id: 'line',
    xaxis: ['07-11', '08-11', '09-11', '09-22', '10-11', '11-11', '12-11'],
    datas: [
        [1, 2, 3, 4, 3.5, 3, 4]
    ],
    hover: function (index, values, xaxis) { // 索引，datas集合，xaxis[index]，触控点横坐标x
        console.log(values[0], xaxis);
    }
}).init();

var pieLabels = [
    '吃饭',
    '睡觉',
    '打豆豆',
    '吃豆豆'
];
var pie = new PieChart({
    id: 'pie',
    datas: [0.1, 0.2, 0.3, 0.4],
    hover: function (index, values) {
        var ctx = pie.ctx, _origin = pie.drawer.origin;
        // draw texts
        ctx.fillStyle = pie.opts.colors[index];
        ctx.font = 'bold 22px consolas';
        ctx.textAlign = 'center';
        ctx.fillText(pieLabels[index], _origin.x, 90);

        ctx.fillStyle = '#666';
        ctx.fillText((values[0] * 100).toFixed(1) + '%', _origin.x, 120);
    }
})
pie.init()

var radar = new RadarChart({
    id: 'radar',
    hidePoints: true,   // 无点
    datas: [
        [1, 2, 3, 4, 3.5, 3, 4],
        [4, 3, 3, 4, 3.5, 3, 4]
    ],
    hover: function (index, values) {
        console.log(index, values);
        var ctx = radar.ctx;
        ctx.lineWidth = 1;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = '12px Arial';
        ctx.fillStyle = '#000';
        ctx.fillText(
            'data1: ' + values[0].toFixed(2),
            320,
            70
        );
        ctx.fillText(
            'data2: ' + values[1].toFixed(2),
            320,
            100
        );
    }
});
radar.init();

new ScatterChart({
    id: 'scatter',
    data: [
        [1, 2],
        [3, 4],
        [3, 5.5],
        [3.5, 4.4],
        [5, 6],
        [7, 3]
    ]
}).init();

var kline = new KlineChart({
    id: 'kline',
    xaxis: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6'],
    datas: [
        [1, 2, 0.5, 2.1],
        [3, 4, 2, 4],
        [3, 5.5, 3, 6],
        [4.4, 3.5, 3, 5],
        [5, 6, 4, 7],
        [7, 3, 3, 7]
    ],
    hover: function (index, values, xaxis, x, y) {   // 索引，datas当前数据集合，xaxis[index], 触控事件x坐标，触控事件y坐标
        var ctx = kline.ctx,
            _drawer = kline.drawer,
            _width = kline._chart.width,
            _height = kline._chart.height;

        ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
        var _rectX = x - 32;
        _rectX = _rectX < 50 ? 50 : _rectX > _width ? _width : _rectX;
        ctx.fillRect(_rectX, _height - 40, 64, 15);
        ctx.fillRect(kline.opts.chartLeft, y - 7, 30, 15);

        // text
        ctx.fillStyle = '#fff';
        ctx.font = '12px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(xaxis, _rectX + 32, _height - 32);
        ctx.fillText(
            ((y - _drawer.yBasic) / _drawer.yRate).toFixed(2),
            kline.opts.chartLeft + 15,
            y);
        ctx.closePath();
        ctx.stroke();
    }
});
kline.init();

支持类型

  • 柱状图 bar
  • 折线图 line
  • 饼图 pie
  • 雷达图 radar
  • 散点图 scatter
  • k线图 kline

配置项

id

  • 类型：String
  • 默认值：null
  • 作用：容器id | canvas元素id
  • 是否必传：是

xaxis

  • 类型：Array
  • 默认值：null
  • 作用：x轴标签数组
  • 是否必传：是

datas

  • 类型：Array
  • 默认值：none
  • 作用：数据项数组
  • 是否必传：是

backgroundColor

  • 类型：String
  • 默认值：#fff
  • 作用：画布背景色
  • 是否必传：否

chartLeft

  • 类型：Number
  • 默认值：50
  • 作用：图表主要内容（图形区域）距左边距离，单位为px
  • 是否必传：否

chartRight

  • 类型：Number
  • 默认值：15
  • 作用：图表主要内容（图形区域）距右边距离，单位为px
  • 是否必传：否

chartTop

  • 类型：Number
  • 默认值：0
  • 作用：图表主要内容（图形区域）距顶部距离，单位为px
  • 是否必传：否

hover

  • 类型：Function
  • 默认值：无
  • 作用：交互返回函数
  • 是否必传：否

onAnimation

  • 类型：Function
  • 默认值：无
  • 作用：动画执行时回调
  • 是否必传：否

onFinish

  • 类型：Function
  • 默认值：无
  • 作用：动画结束后回调
  • 是否必传：否

方法

更新

chart.update({
    xaxis: ['07-11', '08-11', '09-11', '09-22', '10-11', '11-11', '12-11'],
    datas: [
    
        [4, 3, 4, 2, 3, 5, 6],
        [1, 2, 3, 4, 3.5, 3, 4],
        [6, 2, 4, 5, 5, 2, 1]
    ]
})

特别说明

更多配置和用法，请参考FundCharts

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18