html5生成柱状图(条形图)效果的实例代码-H5教程-PHP中文网

首页

web前端

H5教程

html5生成柱状图(条形图)效果的实例代码

PHP中文网

Mar 21, 2017 am 10:08 AM

html5条形图柱状图

html5生成柱状图(条形图)效果的实例代码

<html>    
<canvas id="a_canvas" width="1000" height="700"></canvas>    
<script>    
    (function (){    
     
        window.addEventListener("load", function(){    
     
          var data = [1000,1300,2000,3000,2000,2000,1000,1500,2000,5000,1000,1000];    
          var xinforma = [&#39;1月&#39;,&#39;2月&#39;,&#39;3月&#39;,&#39;4月&#39;,&#39;5月&#39;,&#39;6月&#39;,&#39;7月&#39;,&#39;8月&#39;,&#39;9月&#39;,&#39;10月&#39;,&#39;11月&#39;,&#39;12月&#39;];    
     
          // 获取上下文    
          var a_canvas = document.getElementById(&#39;a_canvas&#39;);    
          var context = a_canvas.getContext("2d");    
     
     
          // 绘制背景    
          var gradient = context.createLinearGradient(0,0,0,300);    
     
     
         // gradient.addColorStop(0,"#e0e0e0");    
          //gradient.addColorStop(1,"#ffffff");    
     
     
          context.fillStyle = gradient;    
     
          context.fillRect(0,0,a_canvas.width,a_canvas.height);    
     
          var realheight = a_canvas.height-15;    
          var realwidth = a_canvas.width-40;    
          // 描绘边框    
          var grid_cols = data.length + 1;    
          var grid_rows = 4;    
          var cell_height = realheight / grid_rows;    
          var cell_width = realwidth / grid_cols;    
          context.lineWidth = 1;    
          context.strokeStyle = "#a0a0a0";    
     
          // 结束边框描绘    
          context.beginPath();    
          // 准备画横线    
          /*for(var row = 1; row <= grid_rows; row++){    
            var y = row * cell_height;    
            context.moveTo(0,y);    
            context.lineTo(a_canvas.width, y);    
          }*/    
              
            //划横线    
            context.moveTo(0,realheight);    
            context.lineTo(realwidth,realheight);    
                    
                 
            //画竖线    
          context.moveTo(0,20);    
           context.lineTo(0,realheight);    
          context.lineWidth = 1;    
          context.strokeStyle = "black";    
          context.stroke();    
                  
     
          var max_v =0;    
              
          for(var i = 0; i<data.length; i++){    
            if (data[i] > max_v) { max_v =data[i]};    
          }    
          max_vmax_v = max_v * 1.1;    
          // 将数据换算为坐标    
          var points = [];    
          for( var i=0; i < data.length; i++){    
            var v= data[i];    
            var px = cell_width *　(i +1);    
            var py = realheight - realheight*(v / max_v);    
            //alert(py);    
            points.push({"x":px,"y":py});    
          }    
     
          //绘制坐标图形    
          for(var i in points){    
            var p = points[i];    
            context.beginPath();    
            context.fillStyle="green";    
            context.fillRect(p.x,p.y,15,realheight-p.y);    
                 
            context.fill();    
          }    
          //添加文字    
          for(var i in points)    
          {  var p = points[i];    
            context.beginPath();    
            context.fillStyle="black";    
            context.fillText(data[i], p.x + 1, p.y - 15);    
             context.fillText(xinforma[i],p.x + 1,realheight+12);    
             context.fillText(&#39;月份&#39;,realwidth,realheight+12);    
             context.fillText(&#39;资金量&#39;,0,10);    
              }    
        },false);    
      })();    
           
</script>    
</html>

html5生成柱状图（条形图）详细代码

运行结果：

以上就是html5生成柱状图(条形图)效果的实例代码_html5教程技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！

使用HTML5 Canvas画柱状图

使用html实现简单的柱状图效果

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码：可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构，提高SEO。2.ARIA属性如aria-label增强可访问性，辅助技术用户可顺利使用网页。

H5与HTML5相同吗？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的，但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准，包含新标签和API。2."h5"通常是HTML5的简称，但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5的功能是什么？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五个版本，它为开发者提供了更强大的工具集，使得创建复杂的网页应用变得更加简单。H5的核心功能包括：1）元素允许在网页上绘制图形和动画；2）语义化标签如、等，使网页结构清晰，利于SEO优化；3）新API如GeolocationAPI，支持基于位置的服务；4）跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。

h5链接怎么做Apr 06, 2025 pm 12:39 PM

如何创建 H5 链接？确定链接目标：获取 H5 页面或应用程序的 URL。创建 HTML 锚点：使用 <a> 标记创建锚点并指定链接目标URL。设置链接属性（可选）：根据需要设置 target、title 和 onclick 属性。添加到网页：将 HTML 锚点代码添加到希望链接出现的网页中。

h5兼容问题怎么解决Apr 06, 2025 pm 12:36 PM

解决 H5 兼容问题的方法包括：使用响应式设计，允许网页根据屏幕尺寸调整布局。采用跨浏览器测试工具，在发布前测试兼容性。使用 Polyfill，为旧浏览器提供对新 API 的支持。遵循 Web 标准，使用有效的代码和最佳实践。使用 CSS 预处理器，简化 CSS 代码并提高可读性。优化图像，减小网页大小并加快加载速度。启用 HTTPS，确保网站的安全性。