Node relation graph displaying method and system based on HTML5

Abstract

The invention provides a node relation graph displaying method and system based on an HTML5. The method comprises the steps that a user inputs or a website server background returns graph data of a node relation graph, wherein the graph data is of a specific json format; a data input module obtains corresponding json graph data and stores the data temporarily; through utilization of new features of the HTML5, a graph drawing module is established and initial blank canvas is established; the json graph data is resolved through utilization of a JavaScript program resolver; the graph drawing module sets an initial position of nodes according to the resolved graph data and draws the nodes; the graph drawing module draws corresponding node connecting lines according to the drawn node graph and the corresponding graph data; a graph element event processing module sets mouse events of graph elements according to the graph data; and a graph output module outputs a graph to a webpage, and the node relation graph is displayed to the user. According to the method and the system, through utilization of a canvas function of the HTML5 and the mouse events of various graph elements supported by an html page, the node relation graph is efficiently and clearly displayed on the webpage through the graph data of the specific format.

Description

technical field [0001] The invention relates to the technical field of online education, in particular to a method and system for displaying a node relationship diagram based on HTML5. Background technique [0002] With the rapid development of the Internet and the rapid emergence of massive data, it is becoming more and more important to provide an efficient and intuitive visualization method for massive data. For the field of online education, knowledge maps for the purpose of improving learning efficiency and learning path navigation How to draw has become an urgent problem to be solved. At present, many platforms provide web-based graphics data visualization technology. For example, Adobe's flash and Microsoft's Silverlight provide web-based graphics drawing technology, but they all require client-side browsing In addition, Sun's JavaApplet platform also provides web-based graphics rendering technology, but it also requires JRE to be installed on the user's computer to r...

AI Technical Summary

Problems solved by technology

[0002] With the rapid development of the Internet and the rapid emergence of massive data, it is becoming more and more important to provide an efficient and intuitive visualization method for massive data. For the field of online education, knowledge maps for the purpose of improving learning efficiency and learning path navigation How to draw has become an urgent problem to be solved. At present, many platforms provide web-based graphics data visualization technology. For example, Adobe's flash and Microsoft's Silverlight provide web-based graphics drawing technology, but they all require client-side browsing In addition, Sun's JavaApplet platform also provides web-based graphics rendering technology, but it also requires JRE to be installed on the user's computer to run normally. Since the user client needs to install additional plug-ins to display normally Therefore, the development of graphic data visualization technology based on these platforms is relatively slow.

Images