Chart.xkcd图表库

Chart.xkcd是一个图表库，绘制“粗略”，“卡通”或“手绘”样式的图表。

安装

CDN

 <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
1
2

npm

npm i chart.xkcd
1

折线图

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

See the Pen chart.xkcd-雷达图 by qianhuiya ( @quinhua) on CodePen.