Use HTML5 canvas to draw a bar chart

I have been away from the garden for more than a year. Now I am back. Where did I go? Haha, actually I didn't go anywhere. I just spent a year diving. Time is really fast, the first time I came to the Garden three years ago, at that time I almost just went to college, and now I graduated from college. Here, I would like to thank the blog Park, Dudu, And the coders in the garden for failing to read the University in recent years, I am satisfied with reading wonderful blog posts here every day. Hey, you don't need to talk about it anymore.

Today I bring a recently used HTML5 "chart" plug-in. Why quotes? Because it is too weak, it is just a learning demo to learn HTML5 canvas. Let me call it a broken "chart", and currently only the display of the bar chart is supported. The following code draws a bar chart by calling the relevant class Library:

 

The above program first introduced the JS files required, namely h5draw. js and h5charts. js. H5draw. JS is a simple encapsulation of the canvas API. In h5charts. JS, the plotting function provided by h5draw. JS is used. h5charts. JS is the internal implementation of Bar Drawing. Here, we don't need to know how to implement it internally. We just need to instantiate the chart object of a bar chart and then set the required attributes for the chart object, the dataprovider attribute is the user data that needs to be visually displayed. The type column here is the column chart. Finally, call the addto function of the chart object to add the object to the specified Canvas Element.

For h5draw. JS and h5charts. the JS Code is not detailed here, because it is only a simple encapsulation. If you are interested, you can download it directly from the SRC address in the previous code, or download it from https://github.com/scottkiss/h5draw.