Home > Developer > JavaScript
To work, use javascript to make a statistical chart:
After that, take a note to share and learn from each other. There are still some problems, which are not perfect yet.
Refer to the js statistical charts of Baidu space, central management center, access statistics, and. However, there are still differences in the application, because in this project I am working on, we need to create a new statistical table, and when there is data change, we will call the method of drawing the table. Therefore, we need to consider the page performance issues.
The following is the preview chart. It can be seen that it takes 0.005 milliseconds to draw a table, that is, one second of 200. I am still satisfied with the efficiency!
At present, there is no problem in firefox, chrome, IE8, normal, and IE6. I don't care about IE6 now. The front-end brothers should try their best to guide users to give up IE6.
The Code is as follows: Copy and run directly.
Now there is a problem to solve, that is, in the firebug debugging status, once the mouse moves to the horizontal ruler line, an error is reported!
If anyone knows how to solve this problem, please do not hesitate to inform me! Thank you!
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> js columnar Statistical Chart </title> <style type = "text/css">/* style */# consuming_time {font-size: 12px; border: solid 1px # ccc; background-color: # f2f6fb; margin: 10px 20px; height: 40px; line-height: 20px; padding: 5px 10px; width: 260px ;}# TwentyFourHourChart {width: 700px; height: 240px; border: solid 1px # B3B3DC; position: relative; top: 40px; left: 20px ;} </style> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
After this chart is finished, there is a small regret, that is, the firebug debugging status, move the mouse to the horizontal ruler line, and an error is reported !!
To sum up: the basic skills of javascript to operate dom elements. Before creating a chart, you must have a draft. For a complex chart, you must draw it on paper to have a clear mind and start coding.
Package and download code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
