HTML5卡通手绘统计图表特效代码下载


HTML5卡通手绘统计图表特效代码下载
HTML5卡通手绘统计图表特效代码下载以及卡通手绘、统计图表等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">

2. 引入JS

<script src="dist/chart.xkcd.min.js"></script>

3. HTML代码

<div class="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">
	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('.scatter-chart');
  new chartXkcd.XY(svgScatter, {
	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,
	},
  });
const svgLine = document.querySelector('.line-chart')
  const lineChart = new chartXkcd.Line(svgLine, {
	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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章