HTML5 Canvas Chart Plugin

When using Highchart to find that it is using SVG to paint, then use canvas to do how.

When you used to do as a diagram plug-in, drawing the drawing mainly with the container's graphics object to draw, and the canvas context and graphics, can be used to draw graphics.

And then try to do such a thing with canvas.

Specific implementation of the following, the ability to express personal problems, you reader or look at the source bar, as follows:

<! DOCTYPE html>
 
Charttest1.js source code is as follows:
 
/**  * Created by Jackywhj on 14-2-26.  */(function ($) {    var canvas,context     var stepxarr=[],stepyarr=[],
xstepwidth=0;
    var xaxisheight = 0, yaxiswidth = 0;     var heightval = 0;//height value corresponding to data ratio    /**      * Draw x Axis   &nbsp ;  * */    var drawxaxis = function (xaxisdata) {        context
. Beginpath ();        /Draw X-axis horizontal         Context.moveto (
YAxisWidth-6, Canvas.height-xaxisheight);
        Context.lineto (canvas.width-yaxiswidth,canvas.height-xaxisheight);        /Draw scale, tagged         var len =
Xaxisdata.length;
        xstepwidth = (canvas.width-2*yaxiswidth)/len;       &nBsp for (var i = 0;i < len;i++) {           //Draw scale, default scale height of 6 pixels & nbsp;           Context.moveto (YAxisWidth + (i+1) *xStepWidth,
Canvas.height-xaxisheight);             Context.lineto (Yaxiswidth + (i+1) *xstepwidth,
Canvas.height-xaxisheight + 6);            /Draw label, default font is 14 pixels     
        Context.font = "Normal normal bold 14px Microsoft Ya Hei";           //font centered in center of tick              Context.filltext (Xaxisdata[i],                  Yaxiswidth + (i+0.5) *XSTEPWIDTH-XAXISDATA[I].LENGTH*14/2,                  Canvas.height-xaxisheight + 24);            //cache tick position, for drawing grid      
       Stepxarr.push (Yaxiswidth + (i+1) *xstepwidth);
       }         Context.stroke ();    }    /**      * Draw Y-Axis      * * */&NBSP;&NBSP;&NB Sp var drawyaxis = function (ymax,step) {        context.beginpath ();         /Draw X-axis horizontal         Context.moveto (Yaxiswidth,
Xaxisheight);
        Context.lineto (yaxiswidth,canvas.height-xaxisheight + 6);        /Draw scale, tagged         var tickwidth = (
Canvas.height-2*xaxisheight)/step;         heightval = (canvas.height-2*xaxisheight)/ymax;         for (var i = 0;i <= step;i++) {            //Draw scale, the default scale height is 6 pixels           
  Context.moveto (yaxiswidth, canvas.height-xaxisheight-tickwidth * i);             Context.lineto (Yaxiswidth-6,canvas.height-
Xaxisheight-tickwidth * i);            /Draw label, default font is 14 pixels     
        Context.font = "Normal normal 14px Microsoft Ya-hei";            //font centered in center of tick              Context.filltext (Ymax/step * I,                  yaxiswidth- , &NBsp;               Canvas.height-
Xaxisheight-tickwidth * i + 7);            //cache tick position, for drawing grid      
       Stepyarr.push (Canvas.height-xaxisheight-tickwidth * i);
       }         Context.stroke ();    }    /**      * Draw Grid      * * */&NBSP;&NBSP;&NB Sp

var DrawGrid = function () {        context.save ();
        Context.strokestyle = "#6e6e6e";
        Context.fillstyle = "#ffffff";

        context.linewidth = 0.5;        /Draw Horizontal         var j = 0,stepx = (canvAs.width-2*yaxiswidth)/10,stepy = (canvas.height-2*xaxisheight)/10;        //10 pixel bit units, 6 pixel lines, 4 pixels empty out, become dashed          for (var i = 0,len = Stepyarr.length i < len; i + +) {&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NB
sp;  Context.beginpath ();             for (j = 0;j < stepx;j++) {                 Context.moveto (yaxiswidth + j*10,
Stepyarr[i]);                 Context.lineto (
Yaxiswidth + j*10 + 6,  stepyarr[i]);            }        
     Context.stroke ();        }        /Draw vertical Line          for (var i = 0,len = Stepxarr.length i < len; i + +) {        &nbs
p;   Context.beginpath ();             for (j = 0;j < stepy;j++) {                 Context.moveto (stepxarr[i],xaxisheight
+ j*10);                 Context.lineto (
Stepxarr[i],xaxisheight + j*10+6);            }        
     Context.stroke ();
       }         Context.restore ();    }    /**      * Draw Line      * * */&NBSP;&NBSP;&NB Sp var drawLine = function (linedata) {       //circular data source drawing lines         context.beginpath ();
        Context.fillstyle = "#000000";
        context.linewidth = 2;         Context.moveto (stepxarr[0]-XSTEPWIDTH/2, Canvas.height-xaxisheight-
Linedata[0]*heightval);         for (var i = 1,len = Linedata.length i < len; i + +) {&NBSP;&NBSP;&NBSP;&NB sp;        Context.lineto (Stepxarr[i]-XSTEPWIDTH/2, Canvas.height-xaxisheight
-Linedata[i]*heightval);
       }         Context.stroke ();        /Draw dot         for (var i = 0,len = Linedata.length; i < Len; i + +) {            context.beginpath ();              Context.fillstyle = "Rgba (" + (Math.random () *255). toFixed (0) + "," +    &
nbsp;            (Math.random () *255). toFixed (0) + "," +                 (Math.random () *255).
ToFixed (0) + ", 1.0)";             Context.arc (Stepxarr[i]-XSTEPWIDTH/2, Canvas.height-xaxisheight-linedata[i]*heightval,           
      7, 0, math.pi*2, true);
            Context.fill ();        }    }    /**      * Draw Pillars      * */    var drawbar = function (Bardata,colorarr) {         var barwidth = Xstepwidth/2;//definition Column Width        //circular data source draw rectangle         for (var i = 0,len = Bardata.length i < len; i + +) {            context.beginpath ();    
         Context.fillstyle = Colorarr[i];             Context.fillrect (Stepxarr[i]-XSTEPWIDTH/2- Barwidth/2,canvas.height-xaxisheight-bardata[i]*heightval,         
        barwidth,bardata[i]*heightval);
            Context.fill ();        }    }     var methods = {         init:function (options) {            //Execute method on each element &NBSP;&NBsp;          return This.each (function () {    

            var $this = $ (this);                //Try to get settings, If it does not exist, return to "undefined"                

var settings = $this. Data ("Linechart");                //If failed to get settings, It is created according to options and default                  if (typeof settings = = "undefined") {                     var defaults = {                         width: 850,                          height:450,           
              xaxis:["Apple", "banana", "pear", "tomato", "Longan"],                          linedata:[350,200,300,245,150],                          bardata:[ 350,134,120,51,90],                
         colorarr:["#ae303e", "#913730", "#D49797", "0x538fd3", "#A34e5d"],                          onsomeevent:function () {                        }         

           };                   

  Settings = $.extend ({}, defaults, options);                     //Save our newly created settings               
      $this. Data ("Linechart", settings);                } else {                    // If we get the settings, merge it with the options (this is not necessary, you can chooseChoose not to do so)                  

   settings = $.extend ({}, settings, options);                     //If you want to save options every time, you can add the following code:             
       //$this. Data ("Linechart", settings);                }                  canvas = document.createelement ("Canvas"
);                 Canvas.width =
Settings.width;                 canvas.height =
Settings.height;                 canvas.style.cssText = "margin:0 auto;";                 $this. Append (Canvas)
;                 context =
Canvas.getcontext ("2d");                 xaxisheight =
SETTINGS.HEIGHT/8, yaxiswidth = SETTINGS.WIDTH/8;                 Drawxaxis (
Settings.xaxis);
                Drawyaxis (400,10);
                DrawGrid ();                 drawbar (
Settings.bardata,settings.colorarr);                 DrawLine (Settings.linedata);
           });        },         destroy:function (options {           //executing code in each element              return $ (a). each (function () {       

         var $this = $ (this);                //Execute code                 //delete elements corresponding to the data    
             $this. Removedata ("Linechart");
           });        },         val:function (options) {           // The code here uses the. EQ (0) to get the first element in the selector, or we get its HTML content as our return value           

  var somevalue = this.eq (0). html ();            //return value       
      return somevalue;

       }    };     $.fn.linechart = function () {        var method = Arguments[0]; nbsp;       if (Methods[method]) {        
    method = Methods[method];             arguments = Array.prototype.slice.call (
arguments, 1);        } else if (typeof method = = = "Object"!method) {            method = Methods.init;        } else {          
  $.error (' method ' + method + ' does not exist on Jquery.pluginname ');
            return this;        }         return method.apply (this,
arguments);
   }; }) (JQuery);