css风格图表,基于svg的手绘风格图表插件

chart.xkcd是一款基于SVG的手绘风格图表插件。目前该插件支持折线图、饼状图、柱状图和散点图,支持npm安装。

eebc480efb2e4870f77ca5b2c2fc76b5.gif

NPM

npm i chart.xkcd

使用方法

在HTML文件中引入下面的文件。

HTML结构

javascript

import chartXkcd from 'chart.xkcd';

const myChart = new chartXkcd.Line(svg, {...});

柱状图:

const svg = document.querySelector('.myChart');

new chartXkcd.Bar(svg, {

// title: 'Monthly income of an indie developer',

// xLabel: 'Month',

// yLabel: '$ Dollors',

data: {

labels: ['github stars', 'patrons'],

datasets: [{

// label: 'Battle',

data: [100, 2],

}],

},

});

折线图:

new chartXkcd.Line(svg, {

// title: 'Monthly income of an indie developer',

// xLabel: 'Month',

// yLabel: '$ Dollors',

data: {

labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],

datasets: [{

label: 'Plan',

data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],

}, {

label: 'Reality',

data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],

// // }, {

// // label: 'vivi',

// // data: [5, 12, 20, 7, 10, 35,15, 9, 20, 9, 10, 6],

// }, {

// label: 'weweyang',

// data: [10, 20, 7, 12, 10, 15, 9, 20, 35, 9, 6, 17],

}],

},

});

散点图:

const svg = document.querySelector('.xy-chart');

new chartXkcd.XY(svg, {

title: 'Pokemon farms', //optional

xLabel: 'Coodinate', //optional

yLabel: 'Count', //optional

data: {

datasets: [{

label: 'Pikachu',

data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],

}, {

label: 'Squirtle',

data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],

}],

}

});

饼状图:

new chartXkcd.Pie(svg, {

// title: 'What Tim made of',

data: {

labels: ['a', 'b', 'e', 'f', 'g'],

datasets: [{

data: [500, 200, 80, 90, 100],

}],

},

});

可用配置参数:

new chartXkcd.Method(svg, {

data: {

// data here

},

options: {

xTickCount: 3

yTickCount: 3,

legendPosition: chart.Xkcd.positionType.upLeft // or upRight

dataColors: [], // an array of colors

fontFamily: '', // font family

showLine: false, // for Scatter chart

timeFormat: undefined, // for Scatter chart, checkout the dayjs

dotSize: 1, // for Scatter chart

innerRadius: .5 // for Dount/Pie chart

}

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值