Chart.xkcd是一个图表库,绘制“粗略”,“卡通”或“手绘”样式的图表。
安装
CDN
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
npm
npm i chart.xkcd
折线图
<svg class="line-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
const svg = document.querySelector('.line-chart')
const lineChart = new chartXkcd.Line(svg, {
title: 'Monthly income of an indie developer', // optional
xLabel: 'Month', // optional
yLabel: '$ Dollors', // optional
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],
}],
},
options: { // optional
yTickCount: 3,
legendPosition: chartXkcd.config.positionType.upLeft
}
});
</script>
See the Pen
Untitled by qianhuiya (
@quinhua) on
CodePen.
XY 控制图
<svg class="xy-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
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 }],
}],
},
options: { //optional
xTickCount: 5,
yTickCount: 5,
legendPosition: chartXkcd.config.positionType.upRight,
showLine: false,
timeFormat: undefined,
dotSize: 1,
},
});
</script>
See the Pen
chart.xkcd-XY控制图 by qianhuiya (
@quinhua) on
CodePen.
条形图
<svg class="bar-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
const svg = document.querySelector('.bar-chart')
const barChart = new chartXkcd.Bar(svg, {
title: 'github stars VS patron number', // optional
// xLabel: '', // optional
// yLabel: '', // optional
data: {
labels: ['github stars', 'patrons'],
datasets: [{
data: [100, 2],
}],
},
options: { // optional
yTickCount: 2,
},
});
</script>
See the Pen
chart.xkcd-条形图 by qianhuiya (
@quinhua) on
CodePen.
饼图
<svg class="pie-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
const svg = document.querySelector('.pie-chart');
const pieChart = new chartXkcd.Pie(svg, {
title: 'What Tim made of', // optional
data: {
labels: ['a', 'b', 'e', 'f', 'g'],
datasets: [{
data: [500, 200, 80, 90, 100],
}],
},
options: { // optional
innerRadius: 0.5,
legendPosition: chartXkcd.config.positionType.upRight,
},
});
</script>
See the Pen
Untitled by qianhuiya (
@quinhua) on
CodePen.
雷达图
<svg class="radar-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
const svg = document.querySelector('.radar-chart');
const radarChart = new chartXkcd.Radar(svg, {
title: 'Letters in random words',
data: {
labels: ['c', 'h', 'a', 'r', 't'],
datasets: [{
label: 'ccharrrt',
data: [2, 1, 1, 3, 1],
}, {
label: 'chhaart',
data: [1, 2, 2, 1, 1],
}],
},
options: {
showLegend: true,
dotSize: 0.8,
showLabels: true,
legendPosition: chartXkcd.config.positionType.upRight,
// unxkcdify: true,
},
});
</script>
See the Pen
chart.xkcd-雷达图 by qianhuiya (
@quinhua) on
CodePen.