Home > Article > Web Front-end > Draw a bar chart using HTML5 Canvas

Draw a bar chart using HTML5 Canvas

阿神Original: 2017-03-21 10:08:344102browse

Rendering:

<!DOCTYPE>
 <html>
  <head>
   <title>Bring Your Charts to Life</title>
  <script type="text/javascript">

        // chart sample data
        var arrVisitors = new Array();
        arrVisitors[0] = "2007, 750";
        arrVisitors[1] = "2008, 425";
        arrVisitors[2] = "2009, 960";
        arrVisitors[3] = "2010, 700";
        arrVisitors[4] = "2011, 800";
        arrVisitors[5] = "2012, 975";
        arrVisitors[6] = "2013, 375";
        arrVisitors[7] = "2014, 775";
        var canvas;
        var context;
        // chart properties
        var cWidth, cHeight, cMargin, cSpace;
        var cMarginSpace, cMarginHeight;
        // bar properties
        var bWidth, bMargin, totalBars, maxDataValue;
        var bWidthMargin;
        // bar animation
        var ctr, numctr, speed;
        // axis property
        var totLabelsOnYAxis;
        // barchart constructor
        function barChart() {
            canvas = document.getElementById(&#39;bchart&#39;);
            if (canvas && canvas.getContext) {
                context = canvas.getContext(&#39;2d&#39;);
            }
            chartSettings();
            drawAxisLabelMarkers();
            drawChartWithAnimation();
        }
        // initialize the chart and bar values
        function chartSettings() {
            // chart properties
            cMargin = 25;
            cSpace = 60;
            cHeight = canvas.height - 2 * cMargin - cSpace;
            cWidth = canvas.width - 2 * cMargin - cSpace;
            cMarginSpace = cMargin + cSpace;
            cMarginHeight = cMargin + cHeight;
            // bar properties
            bMargin = 15;
            totalBars = arrVisitors.length;
            bWidth = (cWidth / totalBars) - bMargin;
            // find maximum value to plot on chart
            maxDataValue = 0;
            for (var i = 0; i < totalBars; i++) {
                var arrVal = arrVisitors[i].split(",");
                var barVal = parseInt(arrVal[1]);
                if (parseInt(barVal) > parseInt(maxDataValue))
                    maxDataValue = barVal;
            }
            totLabelsOnYAxis = 10;
            context.font = "10pt Garamond";
            
            // initialize Animation variables
            ctr = 0;
            numctr = 100;
            speed = 10;
        }
        // draw chart axis, labels and markers
        function drawAxisLabelMarkers() {
            context.lineWidth = "2.0";
            // draw y axis
            drawAxis(cMarginSpace, cMarginHeight, cMarginSpace, cMargin);
            // draw x axis
            drawAxis(cMarginSpace, cMarginHeight, cMarginSpace + cWidth, cMarginHeight);
            context.lineWidth = "1.0";
            drawMarkers();
        }
        // draw X and Y axis
        function drawAxis(x, y, X, Y) {
            context.beginPath();
            context.moveTo(x, y);
            context.lineTo(X, Y);
            context.closePath();
            context.stroke();
        }
        // draw chart markers on X and Y Axis
        function drawMarkers() {
            var numMarkers = parseInt(maxDataValue / totLabelsOnYAxis);
            context.textAlign = "right";
            context.fillStyle = "#000";;
            // Y Axis
            for (var i = 0; i <= totLabelsOnYAxis; i++) {
                markerVal = i * numMarkers;
                markerValHt = i * numMarkers * cHeight;
                var xMarkers = cMarginSpace - 5;
                var yMarkers = cMarginHeight - (markerValHt / maxDataValue);
                context.fillText(markerVal, xMarkers, yMarkers, cSpace);
            }
            // X Axis
            context.textAlign = &#39;center&#39;;
            for (var i = 0; i < totalBars; i++) {
                 arrval = arrVisitors[i].split(",");
                 name = arrval[0];
                 markerXPos = cMarginSpace + bMargin 
                              + (i * (bWidth + bMargin)) + (bWidth/2);
                 markerYPos = cMarginHeight + 10;
                 context.fillText(name, markerXPos, markerYPos, bWidth);
            }
            context.save();
            // Add Y Axis title
            context.translate(cMargin + 10, cHeight / 2);
            context.rotate(Math.PI * -90 / 180);
            context.fillText(&#39;Visitors in Thousands&#39;, 0, 0);
            context.restore();
            // Add X Axis Title
            context.fillText(&#39;Year Wise&#39;, cMarginSpace + 
                        (cWidth / 2), cMarginHeight + 30 );
        }
        function drawChartWithAnimation() {
            // Loop through the total bars and draw
            for (var i = 0; i < totalBars; i++) {
                var arrVal = arrVisitors[i].split(",");
                bVal = parseInt(arrVal[1]);
                bHt = (bVal * cHeight / maxDataValue) / numctr * ctr;
                bX = cMarginSpace + (i * (bWidth + bMargin)) + bMargin;
                bY = cMarginHeight - bHt - 2;
                drawRectangle(bX, bY, bWidth, bHt, true);
            }
            // timeout runs and checks if bars have reached
            // the desired height; if not, keep growing
            if (ctr < numctr) {
                ctr = ctr + 1;
                setTimeout(arguments.callee, speed);
            }
        }
        function drawRectangle(x, y, w, h, fill) {
            context.beginPath();          
            context.rect(x, y, w, h);          
            context.closePath();
            context.stroke();
            if (fill) {
                var gradient = context.createLinearGradient(0, 0, 0, 300);
                gradient.addColorStop(0, &#39;green&#39;);
                gradient.addColorStop(1, &#39;rgba(67,203,36,.15)&#39;);
                context.fillStyle = gradient;
                context.strokeStyle = gradient;
                context.fill();
            }
        }
</script>
 <noscript>
  This chart is unavailable because JavaScript is disabled on your computer. Please enable
  JavaScript and refresh this page to see the chart in action.
 </noscript>
</head>
 <body onLoad="barChart();">
   <canvas id="bchart" height="400" width="600">Your browser does not support HTML5 Canvas
   </canvas>
</body>
</html>

html5 example code for generating histogram (bar chart) effect

Use html to achieve a simple histogram effect

The above is the detailed content of Draw a bar chart using HTML5 Canvas. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use HTML5/CSS3 to quickly create special effects code examples for sticky notes in five steps (pictures and text)Next article：Use HTML5/CSS3 to quickly create special effects code examples for sticky notes in five steps (pictures and text)

See more

Draw a bar chart using HTML5 Canvas

Related articles