基于html5的canvas用javascript写柱状图

最新推荐文章于 2024-03-04 10:03:05 发布

Jjwxyz

最新推荐文章于 2024-03-04 10:03:05 发布

阅读量1k

点赞数 2

分类专栏： javascript 文章标签： html5 javascript canvas 横向柱状图

本文链接：https://blog.csdn.net/Jjwxyz/article/details/51811390

版权

本文介绍如何利用HTML5的canvas元素和JavaScript绘制四种不同类型的柱状图，包括纵向单色和多色，以及横向单色和多色。通过调整坐标和设置数据集，可以创建具有不同样式和颜色的柱状图。

摘要由CSDN通过智能技术生成

使用HTML5的<canvas>

代码中共有四种形式的柱状图:

1.纵向的一种颜色的柱状图

2.纵向的多种颜色的柱状图

3.横向的一种颜色的柱状图

4.横向的多种颜色的柱状图

四种都很类似，拿第一个举例：

singleColorBarGraph(beginX,beginY,width,height,dataSet,ctx,x1Adjust,y1Adjust,x2Adjust,y2Adjust,x3Adjust,y3Adjust);

传入的参数：

beginX，beginY:柱状图的起始坐标

width,height:柱状图的宽高

dataSet:传入的数据集，多种颜色的和一种颜色的数据集有些小的差别，在接下来的源代码中会看到

ctx:Context对象

x1Adjust,y1Adjust:参考线字符位置调整

x2Adjust,y2Adjust:下标字符位置调整

x3Adjust,y3Adjust:每个量数值字符的位置调整

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
    <style type="text/css">
        body{
            background-color: #0be;
        }
        canvas{
            background-color: white;
        }
    </style>
    <script type="text/javascript">
        var dataSet={
            'color':'#0be',
            'data':[12,18,29,2,25],
            'flag':['Jan','Feb','Mar','Apr','May']
        };
        var dataSet2={
            'color':['#f00','#0f0','#00f','#ff0','#0ff'],
            'data':[12,11,29,2,25],
            'flag':['Jan','Feb','Mar','Apr','May']
        };
        function maxOfArray(data){
            var max=0;
            for(var i in data){
                if(max<data[i])
                    max=d