FundCharts

功能描述

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

依赖模块

无

快速使用

  1. var BarChart = FundCharts.bar
  2. var LineChart = FundCharts.line
  3. var PieChart = FundCharts.pie
  4. var RadarChart = FundCharts.radar
  5. var ScatterChart = FundCharts.scatter
  6. var KlineChart = FundCharts.kline
  8. var bar = new BarChart({
  9.     id: 'bar',
  10.     xaxis: ['07-11', '08-11', '09-11', '09-22', '10-11', '11-11', '12-11', '12-12'],
  11.     datas: [
  12.         [1, 3, 2, 3, 3.2, 4, 5]
  13.     ],
  14.     hover: function (index, yValues, xValues, x) {    // 索引, datas值集合，xaxis[index], touch event横坐标
  15.         console.log(index, yValues, xValues, x);
  17.         var ctx = bar.ctx;
  18.         var datasets = bar.datasets[0];    // 坐标集
  19.         var _zero = bar.drawer.zeroY;    // 0刻度坐标
  21.         ctx.lineWidth = 1;
  22.         ctx.textAlign = 'center';
  23.         ctx.textBaseline = 'middle';
  24.         ctx.font = '12px Arial';
  25.         ctx.fillStyle = '#000';
  26.         ctx.fillText(
  27.             yValues[0].toFixed(1),
  28.             datasets[index].x + 6,
  29.             datasets[index].y + 10 * (datasets[index].y > _zero && 1 || -1)
  30.         );
  31.     }
  32. })
  33. bar.init();
  35. new LineChart({
  36.     id: 'line',
  37.     xaxis: ['07-11', '08-11', '09-11', '09-22', '10-11', '11-11', '12-11'],
  38.     datas: [
  39.         [1, 2, 3, 4, 3.5, 3, 4]
  40.     ],
  41.     hover: function (index, values, xaxis) { // 索引，datas集合，xaxis[index]，触控点横坐标x
  42.         console.log(values[0], xaxis);
  43.     }
  44. }).init();
  46. var pieLabels = [
  47.     '吃饭',
  48.     '睡觉',
  49.     '打豆豆',
  50.     '吃豆豆'
  51. ];
  52. var pie = new PieChart({
  53.     id: 'pie',
  54.     datas: [0.1, 0.2, 0.3, 0.4],
  55.     hover: function (index, values) {
  56.         var ctx = pie.ctx, _origin = pie.drawer.origin;
  57.         // draw texts
  58.         ctx.fillStyle = pie.opts.colors[index];
  59.         ctx.font = 'bold 22px consolas';
  60.         ctx.textAlign = 'center';
  61.         ctx.fillText(pieLabels[index], _origin.x, 90);
  63.         ctx.fillStyle = '#666';
  64.         ctx.fillText((values[0] * 100).toFixed(1) + '%', _origin.x, 120);
  65.     }
  66. })
  67. pie.init()
  69. var radar = new RadarChart({
  70.     id: 'radar',
  71.     hidePoints: true,   // 无点
  72.     datas: [
  73.         [1, 2, 3, 4, 3.5, 3, 4],
  74.         [4, 3, 3, 4, 3.5, 3, 4]
  75.     ],
  76.     hover: function (index, values) {
  77.         console.log(index, values);
  78.         var ctx = radar.ctx;
  79.         ctx.lineWidth = 1;
  80.         ctx.textAlign = 'center';
  81.         ctx.textBaseline = 'middle';
  82.         ctx.font = '12px Arial';
  83.         ctx.fillStyle = '#000';
  84.         ctx.fillText(
  85.             'data1: ' + values[0].toFixed(2),
  86.             320,
  87.             70
  88.         );
  89.         ctx.fillText(
  90.             'data2: ' + values[1].toFixed(2),
  91.             320,
  92.             100
  93.         );
  94.     }
  95. });
  96. radar.init();
  98. new ScatterChart({
  99.     id: 'scatter',
  100.     data: [
  101.         [1, 2],
  102.         [3, 4],
  103.         [3, 5.5],
  104.         [3.5, 4.4],
  105.         [5, 6],
  106.         [7, 3]
  107.     ]
  108. }).init();
  110. var kline = new KlineChart({
  111.     id: 'kline',
  112.     xaxis: ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6'],
  113.     datas: [
  114.         [1, 2, 0.5, 2.1],
  115.         [3, 4, 2, 4],
  116.         [3, 5.5, 3, 6],
  117.         [4.4, 3.5, 3, 5],
  118.         [5, 6, 4, 7],
  119.         [7, 3, 3, 7]
  120.     ],
  121.     hover: function (index, values, xaxis, x, y) {   // 索引，datas当前数据集合，xaxis[index], 触控事件x坐标，触控事件y坐标
  122.         var ctx = kline.ctx,
  123.             _drawer = kline.drawer,
  124.             _width = kline._chart.width,
  125.             _height = kline._chart.height;
  127.         ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
  128.         var _rectX = x - 32;
  129.         _rectX = _rectX < 50 ? 50 : _rectX > _width ? _width : _rectX;
  130.         ctx.fillRect(_rectX, _height - 40, 64, 15);
  131.         ctx.fillRect(kline.opts.chartLeft, y - 7, 30, 15);
  133.         // text
  134.         ctx.fillStyle = '#fff';
  135.         ctx.font = '12px Arial';
  136.         ctx.textAlign = 'center';
  137.         ctx.fillText(xaxis, _rectX + 32, _height - 32);
  138.         ctx.fillText(
  139.             ((y - _drawer.yBasic) / _drawer.yRate).toFixed(2),
  140.             kline.opts.chartLeft + 15,
  141.             y);
  142.         ctx.closePath();
  143.         ctx.stroke();
  144.     }
  145. });
  146. 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

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

方法

更新

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

特别说明

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