前端数据条形图统计实现
条形统计效果
<!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
深海鱼222333: 终于有一个成功的了!
胖叁墩: 所以 作者没有发完
浮茶713: 能将源码分享出来不
Cuokoo: 用idea开发的么
it-1024: 挺好的,我也开发了一款欢迎学习交流 https://gitee.com/it-1024/wx-community