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: 'Battle',
	        data: [100, 2],
	      }]
	    },
	  });

	  // pie chart example: what does tim make of
	  // javascript js JavaScript and JS

	  const svgPie = document.querySelector('.pie-chart');
	  new chartXkcd.Pie(svgPie, {
	    // title: 'What Tim made of',
	    data: {
	      labels:[ 'a', 'b', 'e', 'f', 'g'],
	      datasets: [{
	        data: [500, 200, 80, 90, 100,],
	      }]
	    },
	  })

	 const svgScatter = document.querySelector('.scatt.........完整代码请登录后点击上方下载按钮下载查看