0.0.4 • Published 1 year ago
mycharts v0.0.4
mycharts
MyCharts 是一个既可以在浏览器里绘制，也可以在服务器渲染（SSR）的 SVG 图表库。
Run Demo:
# 推荐用 node 16+
yarn devRun Build:
yarn buildCSS 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 体积优化*
- 图表连续性(断点不显示，现可由入参过滤实现)*
- 横纵转换*
- 图标类型切换*