当前位置：Gxlcms > html代码 > 使用HTML5Canvas画柱状图

使用HTML5Canvas画柱状图

时间：2021-07-01 10:21:17 帮助过：47人阅读

效果图：

30272.gif

  1. <!DOCTYPE>
  2.  <html>
  3.   <head>
  4.    <title>Bring Your Charts to Life</title>
  5.   <script type="text/javascript">
  6.         // chart sample data
  7.         var arrVisitors = new Array();
  8.         arrVisitors[0] = "2007, 750";
  9.         arrVisitors[1] = "2008, 425";
  10.         arrVisitors[2] = "2009, 960";
  11.         arrVisitors[3] = "2010, 700";
  12.         arrVisitors[4] = "2011, 800";
  13.         arrVisitors[5] = "2012, 975";
  14.         arrVisitors[6] = "2013, 375";
  15.         arrVisitors[7] = "2014, 775";
  16.         var canvas;
  17.         var context;
  18.         // chart properties
  19.         var cWidth, cHeight, cMargin, cSpace;
  20.         var cMarginSpace, cMarginHeight;
  21.         // bar properties
  22.         var bWidth, bMargin, totalBars, maxDataValue;
  23.         var bWidthMargin;
  24.         // bar animation
  25.         var ctr, numctr, speed;
  26.         // axis property
  27.         var totLabelsOnYAxis;
  28.         // barchart constructor
  29.         function barChart() {
  30.             canvas = document.getElementById('bchart');
  31.             if (canvas && canvas.getContext) {
  32.                 context = canvas.getContext('2d');
  33.             }
  34.             chartSettings();
  35.             drawAxisLabelMarkers();
  36.             drawChartWithAnimation();
  37.         }
  38.         // initialize the chart and bar values
  39.         function chartSettings() {
  40.             // chart properties
  41.             cMargin = 25;
  42.             cSpace = 60;
  43.             cHeight = canvas.height - 2 * cMargin - cSpace;
  44.             cWidth = canvas.width - 2 * cMargin - cSpace;
  45.             cMarginSpace = cMargin + cSpace;
  46.             cMarginHeight = cMargin + cHeight;
  47.             // bar properties
  48.             bMargin = 15;
  49.             totalBars = arrVisitors.length;
  50.             bWidth = (cWidth / totalBars) - bMargin;
  51.             // find maximum value to plot on chart
  52.             maxDataValue = 0;
  53.             for (var i = 0; i < totalBars; i++) {
  54.                 var arrVal = arrVisitors[i].split(",");
  55.                 var barVal = parseInt(arrVal[1]);
  56.                 if (parseInt(barVal) > parseInt(maxDataValue))
  57.                     maxDataValue = barVal;
  58.             }
  59.             totLabelsOnYAxis = 10;
  60.             context.font = "10pt Garamond";
  61.             
  62.             // initialize Animation variables
  63.             ctr = 0;
  64.             numctr = 100;
  65.             speed = 10;
  66.         }
  67.         // draw chart axis, labels and markers
  68.         function drawAxisLabelMarkers() {
  69.             context.lineWidth = "2.0";
  70.             // draw y axis
  71.             drawAxis(cMarginSpace, cMarginHeight, cMarginSpace, cMargin);
  72.             // draw x axis
  73.             drawAxis(cMarginSpace, cMarginHeight, cMarginSpace + cWidth, cMarginHeight);
  74.             context.lineWidth = "1.0";
  75.             drawMarkers();
  76.         }
  77.         // draw X and Y axis
  78.         function drawAxis(x, y, X, Y) {
  79.             context.beginPath();
  80.             context.moveTo(x, y);
  81.             context.lineTo(X, Y);
  82.             context.closePath();
  83.             context.stroke();
  84.         }
  85.         // draw chart markers on X and Y Axis
  86.         function drawMarkers() {
  87.             var numMarkers = parseInt(maxDataValue / totLabelsOnYAxis);
  88.             context.textAlign = "right";
  89.             context.fillStyle = "#000";;
  90.             // Y Axis
  91.             for (var i = 0; i <= totLabelsOnYAxis; i++) {
  92.                 markerVal = i * numMarkers;
  93.                 markerValHt = i * numMarkers * cHeight;
  94.                 var xMarkers = cMarginSpace - 5;
  95.                 var yMarkers = cMarginHeight - (markerValHt / maxDataValue);
  96.                 context.fillText(markerVal, xMarkers, yMarkers, cSpace);
  97.             }
  98.             // X Axis
  99.             context.textAlign = 'center';
  100.             for (var i = 0; i < totalBars; i++) {
  101.                  arrval = arrVisitors[i].split(",");
  102.                  name = arrval[0];
  103.                  markerXPos = cMarginSpace + bMargin 
  104.                               + (i * (bWidth + bMargin)) + (bWidth/2);
  105.                  markerYPos = cMarginHeight + 10;
  106.                  context.fillText(name, markerXPos, markerYPos, bWidth);
  107.             }
  108.             context.save();
  109.             // Add Y Axis title
  110.             context.translate(cMargin + 10, cHeight / 2);
  111.             context.rotate(Math.PI * -90 / 180);
  112.             context.fillText('Visitors in Thousands', 0, 0);
  113.             context.restore();
  114.             // Add X Axis Title
  115.             context.fillText('Year Wise', cMarginSpace + 
  116.                         (cWidth / 2), cMarginHeight + 30 );
  117.         }
  118.         function drawChartWithAnimation() {
  119.             // Loop through the total bars and draw
  120.             for (var i = 0; i < totalBars; i++) {
  121.                 var arrVal = arrVisitors[i].split(",");
  122.                 bVal = parseInt(arrVal[1]);
  123.                 bHt = (bVal * cHeight / maxDataValue) / numctr * ctr;
  124.                 bX = cMarginSpace + (i * (bWidth + bMargin)) + bMargin;
  125.                 bY = cMarginHeight - bHt - 2;
  126.                 drawRectangle(bX, bY, bWidth, bHt, true);
  127.             }
  128.             // timeout runs and checks if bars have reached
  129.             // the desired height; if not, keep growing
  130.             if (ctr < numctr) {
  131.                 ctr = ctr + 1;
  132.                 setTimeout(arguments.callee, speed);
  133.             }
  134.         }
  135.         function drawRectangle(x, y, w, h, fill) {
  136.             context.beginPath();          
  137.             context.rect(x, y, w, h);          
  138.             context.closePath();
  139.             context.stroke();
  140.             if (fill) {
  141.                 var gradient = context.createLinearGradient(0, 0, 0, 300);
  142.                 gradient.addColorStop(0, 'green');
  143.                 gradient.addColorStop(1, 'rgba(67,203,36,.15)');
  144.                 context.fillStyle = gradient;
  145.                 context.strokeStyle = gradient;
  146.                 context.fill();
  147.             }
  148.         }
  149. </script>
  150.  <noscript>
  151.   This chart is unavailable because JavaScript is disabled on your computer. Please enable
  152.   JavaScript and refresh this page to see the chart in action.
  153.  </noscript>
  154. </head>
  155.  <body onLoad="barChart();">
  156.    <canvas id="bchart" height="400" width="600">Your browser does not support HTML5 Canvas
  157.    </canvas>
  158. </body>
  159. </html>

相关文章：

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

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

以上就是使用HTML5 Canvas画柱状图的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！