chart.xkcd

xkcd styled chart lib

Github星跟蹤圖

Who is using chart.xkcd?

About

Chart.xkcd is a chart library plots “sketchy”, “cartoony” or “hand-drawn” styled charts.

Check out the documentation for more instructions and links, or try out the examples, or chat with us in Slack

Quick start

It’s easy to get started with chart.xkcd. All that’s required is the script included in your page along with a single <svg> node to render the chart.

In the following example we create a line chart.

Preview and edit on codepen

<svg class="line-chart"></svg>
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.js"></script>
<script>
  const svg = document.querySelector('.line-chart')

  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],
      }]
    },
  });
</script>

Contributing

  • Code: read the contributing.md file
  • Financial:
    • Become a patron of me - chart.xkcd is an MIT-licensed open source project with its ongoing development made possible entirely by the support of my patreons. If you like this tool, please consider support my work by becomming a parton of me
    • Fund issues on issuehunt - Issues on chart.xkcd can be funded by anyone and the money will be distributed to contributors.

主要指標

概覽
名稱與所有者timqian/chart.xkcd
主編程語言JavaScript
編程語言JavaScript (語言數: 1)
平台
許可證MIT License
所有者活动
創建於2019-08-05 03:13:05
推送於2023-12-02 06:58:11
最后一次提交2023-12-02 14:58:00
發布數4
最新版本名稱v1.1 (發布於 )
第一版名稱1.0.1 (發布於 )
用户参与
星數7.7k
關注者數73
派生數199
提交數94
已啟用問題?
問題數44
打開的問題數27
拉請求數32
打開的拉請求數14
關閉的拉請求數10
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?