chart.xkcd实现手绘风格图表效果代码-html代码-BFW代码库

chart.xkcd实现手绘风格图表效果代码

代码语言：html

所属分类：图表

代码描述：chart.xkcd实现手绘风格图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">


	<style type="text/css">
		.htmleaf-content{
			width: 50%;
			margin: 20px auto;
		}
	</style>
</head>

<body>	
	<div class="htmleaf-content">
		<svg class="bar-chart"></svg>
	  <svg class="pie-chart"></svg>
	  <svg class="line-chart"></svg>
	  <svg class="scatter-chart"></svg>
	</div>	
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.xkcd.min.js"></script>
	<script type="text/javascript">
		const svg = document.querySelector('.bar-chart')

	  // github stars vs patrons
	  new chartXkcd.Bar(svg, {
	    // title: 'Monthly income of an indie developer',
	    // xLabel: 'Month',
	    // yLabel: '$ Dollors',
	    data: {
	      labels:['github stars', 'patrons'],
	      datasets: [{
	        // label: &#.........完整代码请登录后点击上方下载按钮下载查看