MyCharts 是一个既可以在浏览器里绘制，也可以在服务器渲染（SSR）的 SVG 图表库。
# 推荐用 node 16+
yarn dev
yarn build
@import 'mycharts/dist/client/theme.css';
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 }])
提示：启动 demo 查看控制台看到的 API 最为完整。
chart(data[, config])
{
"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透明度
}
}
}
]
}]
}
chart.pie(data[, config])
{
"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之间的间隙
}
chart.bar(data[, config])
{
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
}
}
chart.scatter(data[, config])
{
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
}
]
}, ]
}
chart.line(data[, config])
{
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
}
]
}
]
}
chart.area(data[, config])
{
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
}]
}
]
}
chart.map(data[, config])
data 是绘图的关键，现兼容 d3 和 AntV 两种 GeoJSON。中国地图的简单版（适用于移动端，数据格式为 d3 标准）和复杂版（适用于 PC 端，数据格式为 AntV 标准）数据都在项目的src/browser/map目录下，可以直接导入使用。
{
"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],
...
]
]
}
}]
}
FAQs
SVG Chart with Server-side Rendering
The npm package mycharts receives a total of 5 weekly downloads. As such, mycharts popularity was classified as not popular.
We found that mycharts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.