mycharts

MyCharts 是一个既可以在浏览器里绘制，也可以在服务器渲染（SSR）的 SVG 图表库。

Run Demo:

# 推荐用 node 16+
yarn dev

Run Build:

yarn build

CSS Import:

@import 'mycharts/dist/client/theme.css';

使用 mycharts 生成图表的示例:

import chart from 'mycharts';

// 另：直接引入esm文件
import chart from 'mycharts/dist/client/mycharts.esm';

/***
 * @data 是跟数据的配置项，数据类型较多会在后文Data API中详细说明
 */
const data = {
    type // 下文图表中的一种 如 pie
    ...//详见下文Data API
}

/***
 * @config 可选，是跟交互有关的配置项，一般跟图表本身的绘制没有关系
 * 注：config如果是string类型的话就设为id了
 */
const config = {
    id: 'chart_' + (new Date()).getTime(), // whatever
    insertSSRData: true, //如果设成false，ssr时将不再在图表内存入data
    debug: false, // 如果需要观察运行时间 set it to true
    errorMessage: '暂无数据', // 可选，渲染失败时模块错误提示
    // 图表的盒模型--以下为默认配置
    box: {
        height: 170,
        width: 360,
        padding: 15,// 左右边距
        left: 'auto',// 自动计算左坐标轴缩进
        bottom: 18,
        right: 0,
        top: 12,
    },
    // csr渲染及交互配置项
    parent, // selector/node - 图表的父节点
    insertType, // string - 渲染方式，insert（默认）或append
    //启用动画：bool/object: 默认值false, 如果为true则默认如下
    animation: {
        duration: 200,
        delay: 0,
    }
    // 跟交互有关的配置
    interaction: {
        custom, // bool 如果设为true，后面的设置全失效
        callback,// 图表（不含legend）发生touch/click后的callback
        tooltip: {
            delay: 2000, // 可选，延迟2000ms出现
            insertType: 'append', // 可选prepend
            selected: 2, // 选中条目：可以覆盖data里的pointIndex，Map类型里是对应的条目的名称
            trigger: false, // 是否在初始化时显示tooltip
            moveTrigger: true, // 鼠标touch移动是否触发
            preventEmpty: false, // 为true时，无信息的区域无法交互
            hide: false, // TODO: 若为true则不在交互区域点击隐藏
            align: 'auto', // TODO: center/left/right/auto
            content: undefined, // 用来替换tooltip的内容， 支持string, dom, function
        },
        legend: {
            show: true, // 若设为false，不展示（line&radar）
            selected: [],// 不传为all， 传legendname
            canUnselectAll: false, // 如果为ture, 则可全部不选
            callback,
            clickable // boolean | function 如果返回值为false则点击失效(from 1.3.7)
        },
        // 以下是Map专用
        // source实际上是注入自定义的数据，它会查找data中features里符合条件的条目注入数据
        source: {
            key: 'name', // 默认值
            '北京': { popular: 3000 } // 这将会为features里properties的name为“北京”的条目注入数据“{ popular: 3000 }”
        }
        // style可以定制一些地图特有的样式，其中function会提供该区域的source数据
        style: {
            colorize, // function或色值：区域对应的颜色
            textColor, // function或色值：区域名称字体的颜色
            textSize, // function或字号：区域名称字体大小
            textTranslate // function或偏移量[x, y]：区域名称的位移（因为区域小可能文字重合）
        }
    }
}

//获取图表对象
let chartObj = chart.pie(data[, config]);

//渲染图表
/**
 * 两个参数会覆盖config中同名参数
 * @parent - selector/node - 图表的父节点
 * @insertType - string - 渲染方式，insert（默认）或append
*/
chartObj.render([parent, insertType])

//ssr渲染的图表实现交互
/**
 * 参数nodeOrId为需要实现交互的节点（class包含'my-charts'这级），或者图表id
 * 第二个参数可选，传入{data, config}将会替代ssr传递过来的参数，设定此值可以在ssr时将insertSSRData设为false节省ssr带来的庞大体积
*/
chart.hydrate(nodeOrId[, { data, config }])

Data API:

提示：启动 demo 查看控制台看到的 API 最为完整。

Radar Chart:

  chart(data[, config])

• data example

  {
      "indicator": [{
                  "name": "销售\n4300",
                  "max": 6500
              },
              {
                  "name": "管理\n2500",
                  "max": 16000
              },
              {
                  "name": "其他\n2500",
                  "max": 16000
              }
      ],
      "style" : {
          "curve": 1, // 0~1, 1是圆弧，0是折线
          "axisCurve": 1
      },
      "series": [{
          "name": "预算 vs 开销（Budget vs spending）",
          "data": [{
                  "value": [
                      4300,
                      10000,
                      2000
                  ],
                  "name": "预算分配（Allocated Budget）"
              },
              {
                  "value": [
                      5000,
                      14000,
                      100
                  ],
                  "name": "实际开销（Actual Spending）",
                  "lineStyle": {
                      "normal": {
                          "color": "#10df67" // 线条颜色
                      },
                      "area": {
                          "opacity": 0 // 内部area透明度
                      }
                  }
              }
          ]
      }]
  }

Pie Chart:

  chart.pie(data[, config])

• data example

  {
      "value": [46.6, 38.9, 14.6],
      "color": ['#FF574D', '#3E8FF1', '#2BC7FF'],
      /* not required */
      "name": ['type 1', 'type 2', 'type 3'],
      /* not required */
      "unit": '%',
      /* not required 隐藏提示（指针） */
      "hideLabel": false,
      /* not required 隐藏中间部分的提示 */
      "hideCenterLabel": false,
      /* not required label的一些样式定制，兼容性不保证 */
      "labelStyle": {
          "showIcon": true,
          /* label末尾加⭕️ */
          "splitText": true /* label分行 */
          "color": ['#FF574D', '#3E8FF1', '#2BC7FF'],
          "lineScale": 1.5,
          /* label折线的长度缩放倍数 */
          "size": 2 /* label展示数量 */
      },
      /* not required centerlabel的一些样式定制 */
      "centerLabelStyle": {
          "insertType": "prepend", // 'append'
          "content": "aa\nbb",
          "color": "#fff",
      },
      "labelFormat": function(d) {
          return d + '%';
      },
      "elastic": true,
      /* 新增，若为弹性则可配置以下样式 not required */
      "ringRange": [80, 90],
      /* 环的内外径（为0～width/2间数）  not required */
      "selectedRange": [75, 95] /* 选中环的内外径（为0～width/2间数）not required */
      /* 新增，环内壁阴影加深 not required */
      "innerShadow": 10,
      "stroke": 1,// 每个part之间的间隙
  }

Bar Chart:

  chart.bar(data[, config])

• data example

  {
      series: [{
          data: [{
                  xValue: '20',
                  yValue: 7.3
              },
              {
                  xValue: '20~24',
                  yValue: 31.7,
                  color: "#FCB205" //not required
              }
          ],
          style: {
            borderRadius: 3, // not required 不设置默认没有圆角
            fill: "linear-gradient", // 可以设置颜色值覆盖color中的配置 但是不能覆盖data中单个柱子的颜色
            opacity: 1, // not required 不传默认为1
            gradient: {
              colors: ["#188df0", "#83bff6"] // 从上到下渐变 传一个颜色值，第二个默认为柱状图原颜色值
            }
          }
      }],
      style: {
        position: 'stack', // 可选，默认stack，另外有dodge并排展示
      },
      xAxis: {
          type: 'category',
          barWidth: "100",
          data: ['20', '20~24', '25~29', '30~34', '35~39', '40'],
          // 坐标样式定制，x/y轴有效, from 1.3.7
          style: {
              rotate: 45,// 注意rotate位置的计算还是经验值，开启的时候，box的bottom值需要按需设定
              color: 'red' | ['red', 'blue'],
              fontSize: 10,
          },
          format: () => {
              // 由于目前结构问题，暂未实现分行
          }
      },
      yAxis: {
          type: 'linear',
          data: [40, 0],
          unit: '%' //not required
          hide: true //设定后网格和y轴将隐藏not required
      }
  }

Scatter Chart:

  chart.scatter(data[, config])

• data example

  {
      xAxis: {
          type: 'time',
          splitNumber: 4, // x轴均可设置间隔
          data: [20170524,
              20170525,
              ...
          ]
      },
      yAxis: {
          type: 'points',
          data: [123, 345, ...] /* not required */
      },
      series: [{
          "color": {
              "normalDots": "rgba(25, 100, 150, 0.5)",
              /* 普通点颜色 not required */
              "markedDots": "rgba(120, 36, 50, 0.5)" /* 特殊点颜色 not required */
          },
          "data": [{
                  yValue: 3160,
                  tooltip: '2017-06-22 3160',
                  xValue: 20170524
              },
              {
                  yValue: 7556,
                  tooltip: '2017-06-23 7556',
                  xValue: 20170525
              }
          ]
      }, ]
  }

Line Chart:

  chart.line(data[, config])

• data example

  {
      xAxis: {
          type: 'time',
          cutIndex: 2,
          /* 可选，设定后x轴index为2的点后的线条为虚线  */
          data: [20170524,
              20170525,
              ...
          ]
      },
      yAxis: {
          type: 'points',
          /* 可选，设true后y轴最小值为数据最小值而不是0  */
          persistence: false,
          /* 可选，指定后y轴不按data值来计算  */
          domain: [10000, 10000],
          data: [123, 345, ...], /* not required */
          animation : { duration: 300 }, /* not required, 坐标更新时的动画过渡时间，默认300ms，传0则无动画 */
          /* 标记线 not required */
          markLine: {
              value: 125,
              color: 'red',
              name: 'xxxx',
          },
          /* 标注每个series的最大值 not required */
          max: {
              type: 0, // 0:唯一最大值， 1：各分支最大值
              color: "#f00", // 仅type为0有效
              seriesIndex: 1 // type为0时，指定标注某个serie的最大值
          },
          /* 自定义y轴 not required */
          format: function(d) {
              return d * 0.001 + 'K'; // d为y轴当前数值
          }
      },
      series: [{
              name: '收益',
              /*not required, if you need legend you should give it to me */
              color: '#010101',
              /* not required */
              dashed: true,
              /* not required */
              data: [{
                      yValue: 3160,
                      tooltip: '2017-06-22 3160', // 单行字符串
                      xValue: 20170524
                  },
                  {
                      yValue: 7556,
                      tooltip: '2017-06-23;名称;7556;7556', // 分别对应下文tooltip对象中的['title', 'name', 'desc', 'value']
                      xValue: 20170525
                  }
              ]
          },
          {
              data: [{
                      yValue: 60000,
                      tooltip: { //tooltip的推荐格式
                        "title": "2017-08-29 new",
                        "name": "爱奇艺",
                        "value": "864",
                        "desc": "864 new"
                      },
                      xValue: 20170524
                  },
                  {
                      yValue: 80000,
                      tooltip: '2017-06-23 8',
                      xValue: 20170525
                  }
              ]
          }
      ]
  }

Area Chart:

  chart.area(data[, config])

• data example

  {
      xAxis: {
          type: 'time',
          data: [20170524,
              20170525,
              ...
          ]
      },
      yAxis: {
          type: 'points',
          data: [123, 345, ...] /* not required */
      },
      style: {
        position: 'stack',//  TODO: 堆叠布局，默认dodge，面积图有重叠效果，为stack时堆叠（适合表示整体和个体的关系）
      },
      series: [{
              // 线条颜色
              "color": "#DF514E", // style无配置，则面积区域透明度为0.2
              // 展示为虚线，1.4.5开始不再有默认虚线，需要手动指定
              "dashed": true,
              // 面积图渐变
              "style": {
                  "fill": "linear-gradient", // 如果是色值，则覆盖color中的配置
                  "opacity": 0.2, // 默认0.2
                  "gradient": {
                    // start stop（兼容老api 不传stop默认为rgb(255,255,255)） 与 colors同时存在时 colors优先级更高
                      "start": "#f3a33a",
                      "stop": "#fcedd8",
                      "colors": ["#f00"] // 从上到下渐变 传一个颜色值，第二个默认为rgb(255,255,255) 传 >= 2的颜色值均分渐变
                  },
                  "smooth": false, //如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度使用指定的 alpha 值返回一条 Catmull–Rom 生成器。如果 alpha 为 0 则等价于 curveCardinal(略陡峭)，如果 alpha 为 1 则会生成 chordal 曲线（略平缓），如果 alpha 为 0.5 则会生成 centripetal spline（更为贴近折线）。设为 true 时相当于设为 0.5。
              },
              data: [{
                      // 标注点的颜色和信息
                      "label": "这里的内容会和tooltip拼接起来用'\n'连接",
                      "labelStyle": {
                          "color": "#10df67"
                      },
                      "xValue": "2017-08-20T00:00:00.000Z",
                      "yValue": 1474,
                      "tooltip": "2017-08-20 周日 1474场次",
                      "text": "测试"
                  },
                  {
                      "label": "",
                      "xValue": "2017-08-29T00:00:00.000Z",
                      "yValue": 871,
                      "tooltip": "2017-08-29 周二 871场次",
                      //标注文字和样式
                      "text": "上映",
                      "textStyle": {
                          "color": "#2598B6",
                          "size": "12px",
                          "padding": "8px"
                      }
                  }
              ]
          },
          {
              data: [{
                      yValue: 60000,
                      tooltip: '2017-06-22 6',
                      xValue: 20170524
                  },
                  {
                      yValue: 80000,
                      tooltip: '2017-06-23 8',
                      xValue: 20170525
                  }
              ]
          }, {
              // 在面积图上加上线条
              "type": "line",
              "dashed": true,
              "color": "#2598B6",
              "showSelected": false, // true显示上面的点
              "data": [{
                  "xValue": "2017-08-30T00:00:00.000Z",
                  "yValue": 7.2
              }, {
                  "xValue": "2017-08-31T00:00:00.000Z",
                  "yValue": 4.6,
                  "tooltip": { //tooltip的推荐格式
                        "title": "2017-08-29 new",
                        "name": "爱奇艺",
                        "value": "864",
                        "desc": "864 new"
                    },
              }, {
                  "xValue": "2017-09-01T00:00:00.000Z",
                  "yValue": 1
              }]
          }

      ]
  }

Map:

  chart.map(data[, config])

data 是绘图的关键，现兼容 d3 和 AntV 两种 GeoJSON。中国地图的简单版（适用于移动端，数据格式为 d3 标准）和复杂版（适用于 PC 端，数据格式为 AntV 标准）数据都在项目的src/browser/map目录下，可以直接导入使用。

• data example

  {
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "properties": {
                "id": "65",
                "size": "550",
                "name": "新疆",
                "cp": [84.9023, 42.148],
                "childNum": 18
            },
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [96.416, 42.7588],
                        [96.416, 42.7148],
                        ...
                    ]
                ]
            }
       }]
  }

注意事项：

• axis 有四种类型： 'category', 'time', 'linear' and 'points', 和 d3 定义一致
• 如果要使用'time'类型, 所对应的 x 轴信息必须是 Date 类型
• y 轴暂时只有'linear', 'points'两种类型

TODO:

• 文档完善,EN version
• 双坐标混搭（例：折线+bar）
• stack Area
• 隐藏坐标
• hydrate 体积优化*
• 图表连续性(断点不显示，现可由入参过滤实现)*
• 横纵转换*
• 图标类型切换*