The full set of stock quotations in HTML5 is open-source, with a technical introduction

Please use a browser that supports html5. Google Chrome or iPad is recommended. HTML5 is not supported in IE6, 7, and 8.

The following describes the snapshot of the market chart and the implementation difficulties of each graph. If you are interested, use SVN checkout or directly access the project file to view the source code.

The Project address for Google Code is: https://html54stock.googlecode.com

K-line chart slider Control

This K-line chart is very similar to the K-line chart implemented by flash, and the slider control is the difficulty of implementation. Here, the range of K-line data is calculated based on the sliding position of the slider and re-drawn in real time, facts have proved that the HTML5 canvas tag has a very good performance. On a PC, you can redraw more than 20 times per second, and on an iPad, You Can redraw 10 times per second, there is a problem with smoothness on the iPad, so another version is implemented on the iPad, using fingers to slide through touch-related time control range

K-line chart touch control

Use iPad to experience the effect 

This K-line chart is basically the same as above, but the touch event is used to control the K-line range, and events such as touchstart and touchmove are used. This requires the fact to calculate the coordinates of the fingers, then, determine whether to display the floating Window Based on the coordinates, and display the high, open, low, and accept information of the K-line column.

Big shard Graph

A time chart is implemented on a canvas. When you move the mouse over the canvas, You need to draw a cross based on the coordinates of the mouse and show the price of the time when the mouse is located, the cross is implemented by Div, and the price for displaying the corresponding time on the canvas uses the clearrect method of the canvas to clear the content of the specified area first, then draw the corresponding price again. In this way, the smoothness is very good, either on a tablet or on a PC.

Hour chart

Transaction analysis Diagram

Drawing a transaction analysis chart is not difficult. The difficulty lies in the processing of mouse events or touch events. The floating box and cross are all Div. This performance is acceptable, and the canvas modified by facts is not smooth.

Transaction volume analysis

There are basically no difficulties in implementing the transaction amount analysis diagram.

 

I am very optimistic about HTML5. If you are interested in HTML5 and want to participate in the project, please contact me.