其他代码

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

面包多

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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>

HTML 结构

  1. <svg class="myChart"></svg>

javascript

  1. import chartXkcd from 'chart.xkcd';
  2. const myChart = new chartXkcd.Line(svg, {...});

柱状图:

  1. const svg = document.querySelector('.myChart');
  2.  
  3. new chartXkcd.Bar(svg, {
  4.   // title: 'Monthly income of an indie developer',
  5.   // xLabel: 'Month',
  6.   // yLabel: '$ Dollors',
  7.   data: {
  8.     labels: ['github stars', 'patrons'],
  9.     datasets: [{
  10.       // label: 'Battle',
  11.       data: [100, 2],
  12.     }],
  13.   },
  14. });

折线图:

  1. new chartXkcd.Line(svg, {
  2.   // title: 'Monthly income of an indie developer',
  3.   // xLabel: 'Month',
  4.   // yLabel: '$ Dollors',
  5.   data: {
  6.     labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
  7.     datasets: [{
  8.       label: 'Plan',
  9.       data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
  10.     }, {
  11.       label: 'Reality',
  12.       data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
  13.     // // }, {
  14.     // //   label: 'vivi',
  15.     // //   data: [5, 12, 20, 7, 10,  35,15, 9, 20, 9, 10, 6],
  16.     // }, {
  17.       // label: 'weweyang',
  18.       // data: [10, 20, 7, 12,  10, 15, 9, 20, 35, 9, 6, 17],
  19.     }],
  20.   },
  21. });

散点图:

  1. const svg = document.querySelector('.xy-chart');
  2.  
  3. new chartXkcd.XY(svg, {
  4.   title: 'Pokemon farms', //optional
  5.   xLabel: 'Coodinate', //optional
  6.   yLabel: 'Count', //optional
  7.   data: {
  8.     datasets: [{
  9.       label: 'Pikachu',
  10.       data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
  11.     }, {
  12.       label: 'Squirtle',
  13.       data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
  14.     }],
  15.   }
  16. });

饼状图:

  1. new chartXkcd.Pie(svg, {
  2.   // title: 'What Tim made of',
  3.   data: {
  4.     labels: ['a', 'b', 'e', 'f', 'g'],
  5.     datasets: [{
  6.       data: [500, 200, 80, 90, 100],
  7.     }],
  8.   },
  9. });

可用配置参数:

  1. new chartXkcd.Method(svg, {
  2.     data: {
  3.       // data here
  4.     },
  5.     options: {
  6.       xTickCount: 3
  7.       yTickCount: 3,
  8.       legendPosition: chart.Xkcd.positionType.upLeft // or upRight
  9.       dataColors: [], // an array of colors
  10.       fontFamily: '', // font family
  11.       showLine: false, // for Scatter chart
  12.       timeFormat: undefined, // for Scatter chart, checkout the dayjs
  13.       dotSize: 1, // for Scatter chart
  14.       innerRadius: .5 // for Dount/Pie chart
  15.  
  16.     }
  17. });

Github 网址:https://github.com/timqian/chart.xkcd

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!