前端数据条形图统计实现

最新推荐文章于 2024-12-25 23:04:54 发布

zero_or_

最新推荐文章于 2024-12-25 23:04:54 发布

阅读量1.5k

点赞数 3

本文链接：https://blog.youkuaiyun.com/weixin_46083166/article/details/107370401

版权

本文介绍如何利用sChart.js库在前端实现数据的条形图统计效果，帮助读者理解并掌握在网页中展示数据图表的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

条形统计效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<!-- 图书统计 -->
		<div class="row" id="hh">
			<div class="container">
				<canvas id="canvas" width="600" height="500"></canvas>
				<script src="js/sChart.js"></script>
				<script>
				    var data = [
				        {
   xAxis:'1',value:14}, //{xAxis:横轴名称,value:数值} 竖轴的数大小随各个的数值自动变化
				        {
   xAxis:'2',value:1499},
				        {
   xAxis:'3',value:3260},
				        {
   xAxis:'4',value:1170},
				        {
   xAxis:'2016',value:970},
				        {
   xAxis:'2017',value:2350},
						{
   xAxis:'2016',value:970},
						{
   xAxis:'2017',value:2350},
						{
   xAxis:'2016',value:970},
						{
   xAxis:'2017',value:2350}
				    ]
				    var chart = new sBarChart('canvas',data,{
   
				        title: '图书分类统计',
				        bgColor: '#829dba',
				        titleColor: '#ffffff',      // 标题颜色
				        titlePosition: 'top',       // 标题位置
				        fillColor: '#72f6ff',       // 柱状填充色
				        axisColor: '#eeeeee',       // 坐标轴颜色
				        contentColor: '#bbbbbb'     // 内容横线颜色
				    });
				</script>
			</div>
		</div>
	</body>
</html>

需要引入sChart.js

function sBarChart(canvas, data, options) {
   
    this.canvas = document.getElementById(canvas);
    this.ctx = this.canvas.getContext('2d');
    this.data = data;                           // 存放图表数据
    this.dataLength = this.data.length;         // 图表数据的长度
    this.width = this.canvas.width;             // canvas 宽度
    this.height = this.canvas.height;           // canvas 高度
    this.padding = 50;                          // canvas 内边距
    this.yEqual = 5;                            // y轴分成5等分
    this.yLength = 0;                           // y轴坐标点之间的真实长度
    this.xLength = 0;                           // x轴坐标点之间的真实长度
    this.yFictitious = 0;                       // y轴坐标点之间显示的间距
    this.yRatio = 0;                            // y轴坐标真实长度和坐标间距的比
    this.bgColor = '#ffffff';                   // 默认背景颜色
    this.fillColor = '#1E9FFF';                 // 默认填充颜色
    this.axisColor = '#666666';                 // 坐标轴颜色
    this.contentColor = '#eeeeee';              // 内容横线颜色
    this.titleColor = '#000000';                // 图表标题颜色
	this.title = '';                            // 图表标题
	this

最低0.47元/天解锁文章