CN109949395A - Thermodynamic chart rendering method and device - Google Patents
Thermodynamic chart rendering method and device Download PDFInfo
- Publication number
- CN109949395A CN109949395A CN201910201967.9A CN201910201967A CN109949395A CN 109949395 A CN109949395 A CN 109949395A CN 201910201967 A CN201910201967 A CN 201910201967A CN 109949395 A CN109949395 A CN 109949395A
- Authority
- CN
- China
- Prior art keywords
- data
- grid
- thermodynamic chart
- grid data
- total
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Abstract
The embodiment of the present application is designed to provide a kind of thermodynamic chart rendering method and device, the slow problem of rendering speed occurs in the case where data load is excessive in the prior art for improving.The thermodynamic chart rendering method includes: to read total-grid data；Each grid data in total-grid data is input to a storage organization of multiple storage organizations, wherein each storage organization at most stores a grid data；After the input of total-grid data is completed, it is divided the grid data in the corresponding storage organization of each grid of multiple grids of acquisition according to thermodynamic chart, each grid is showed into corresponding color, to render thermodynamic chart, wherein, the corresponding storage organization of each grid.
Description
Technical field
This application involves graphics rendering techniques fields, in particular to a kind of thermodynamic chart rendering method and device.
Background technique
Hypertext markup language (English: HyperText Markup Language, referred to as: HTML) it is a kind of for creating
The standard markup language of networking page.HTML5 is the newest revision version of HTML, completes standard by World Wide Web Consortium in October, 2014
It formulates.Canvas is to be used to define the label of figure in HTML5, such as define chart and image, and scripting language also can be used
(such as JavaScript language) carrys out graphing, and canvas can be used for example and draw a red rectangle, colored rectangles and several
The text etc. of a colour.Thermodynamic chart traditional at present is all based on canvas and is rendered, and still, excessive feelings is loaded in data
Under condition, this mode just will appear the slow problem of rendering speed.
Summary of the invention
The embodiment of the present application is designed to provide a kind of thermodynamic chart rendering method, for improving in the prior art in data
There is the slow problem of rendering speed in the case that load is excessive.
A kind of thermodynamic chart rendering method that the embodiment of the present application provides is applied to client, comprising: reads total-grid
Data；Each grid data in the total-grid data is input to a storage organization of multiple storage organizations, wherein
Each storage organization at most stores the grid data；After total-grid data input is completed, according to
Thermodynamic chart is divided the grid data in the corresponding storage organization of each grid of multiple grids of acquisition, will be described each
Grid shows corresponding color, to render the thermodynamic chart, wherein the corresponding storage organization of each grid.
Total-grid data can be disposably obtained using the above method, and total-grid data are loaded before rendering
Into storage organization, in a manner of loading total-grid data to storage organization in advance, to reduce the data acquisition in rendering
The time loaded with data, so that the rendering speed of thermodynamic chart be effectively promoted.
Optionally, in the embodiment of the present application, before the reading total-grid data, the method also includes: it is right
Compressed data is decompressed to obtain the total-grid data.Compression method more than use after server end compressed data,
Carry out being transmitted to client by network again and be handled, while having saved network bandwidth resources, but also by network into
Row is transmitted to the more efficient of client, to improve the rendering speed of thermodynamic chart indirectly.
Optionally, in the embodiment of the present application, compressed data is decompressed to obtain the total-grid data described
Before, further includes: receive the formatted data that server is sent；The formatted data is decapsulated, the compression number is obtained
According to.Formatted data processing method more than use is passed after server end carries out format encapsulation to data, then through network
Transport to client and carry out decapsulation processing so that client data are uniformly processed have it is more efficient, thus indirectly
Improve the rendering speed of thermodynamic chart.
Optionally, in the embodiment of the present application, each grid of multiple grids that acquisition is divided according to thermodynamic chart
Each grid is showed corresponding color, comprising: determine the heat by the grid data in the corresponding storage organization
The type tried hard to is two-dimentional thermodynamic chart, then corresponds to the storage using each grid that two-dimentional kinematic insert reads the thermodynamic chart
The numerical value of grid data in structure；The corresponding grid of the storage organization is showed corresponding to the numerical value of the grid data
Color.The numerical value that the grid data in storage organization is read using above-mentioned two-dimentional kinematic insert, then makes storage organization pair
The grid answered shows color corresponding with the numerical value of grid data, directly improves the rendering speed of two-dimentional thermodynamic chart.
Optionally, in the embodiment of the present application, each grid of multiple grids that acquisition is divided according to thermodynamic chart
Each grid is showed corresponding color, comprising: determine the heat by the grid data in the corresponding storage organization
The type tried hard to is three-dimensional thermodynamic chart, then corresponds to the storage using each grid that d engine plug-in unit reads the thermodynamic chart
The numerical value of grid data in structure；The corresponding grid of the storage organization is showed corresponding to the numerical value of the grid data
Color.The numerical value that the grid data in storage organization is read using above-mentioned Three-Dimensional Dynamic plug-in unit, then makes storage organization pair
The grid answered shows color corresponding with the numerical value of grid data, directly improves the rendering speed of three-dimensional thermodynamic chart.
The embodiment of the present application also provides a kind of thermodynamic chart rendering methods, are applied to server, which comprises according to
Multiple grids that thermodynamic chart is divided acquisition count pre-stored data, obtain total-grid data；It will be described complete
Portion's grid data is sent to client.The data for needing to be transferred to client are shifted to an earlier date into statistical disposition using the above method, to mention
The preceding mode that total-grid data are counted and sent, to shorten processing and sending time after respond request to data,
To which the rendering speed of thermodynamic chart be effectively promoted.
Optionally, in the embodiment of the present application, described that the total-grid data are sent to client, comprising: by institute
It states total-grid data to be compressed according to the multiple grid, obtains compressed data；The compressed data is sent to client
End.Compression method more than use is after server end compressed data, then carries out being transmitted to client by network and be handled,
While having saved network bandwidth resources, but also carrying out being transmitted to the more efficient of client by network, thus indirectly
Improve the rendering speed of thermodynamic chart.
Optionally, in the embodiment of the present application, described that the compressed data is sent to client, comprising: to the pressure
Contracting data are packaged, and obtain formatted data；The formatted data is sent to client.Formatted data processing more than use
Method is after server end carries out format encapsulation to data, then carries out being transmitted to client by network and carry out decapsulation processing,
So that client data are uniformly processed have it is more efficient, to improve the rendering speed of thermodynamic chart indirectly.
The embodiment of the present application also provides a kind of thermodynamic chart rendering devices, are applied to client, the thermodynamic chart rendering dress
Setting includes: grid data read module, for reading total-grid data；Grid data input module is used for the whole
Each grid data in grid data is input to a storage organization of multiple storage organizations, wherein each storage knot
Structure at most stores the grid data；Thermodynamic chart rendering module is used for after total-grid data input is completed,
The grid data in the corresponding storage organization of each grid for being divided multiple grids of acquisition according to thermodynamic chart, will be described
Each grid shows corresponding color, to render the thermodynamic chart, wherein corresponding one of each grid storage knot
Structure.
Total-grid data can be disposably obtained using above-mentioned apparatus, and total-grid data are loaded before rendering
Into storage organization, in a manner of loading total-grid data to storage organization in advance, to reduce the data acquisition in rendering
The time loaded with data, so that the rendering speed of thermodynamic chart be effectively promoted.
The embodiment of the present application also provides a kind of thermodynamic chart rendering devices, are applied to server, the thermodynamic chart rendering dress
Setting includes: that grid data obtains module, for be divided according to thermodynamic chart multiple grids of acquisition to pre-stored data into
Row statistics, obtains total-grid data；Grid data sending module, for the total-grid data to be sent to client.
The data for needing to be transferred to client are shifted to an earlier date into statistical disposition using above-mentioned apparatus, to count in advance to total-grid data
With the mode of transmission, to shorten processing and sending time after respond request to data, so that thermodynamic chart be effectively promoted
Rendering speed.
Detailed description of the invention
Technical solution in ord to more clearly illustrate embodiments of the present application will make below to required in the embodiment of the present application
Attached drawing is briefly described, it should be understood that the following drawings illustrates only some embodiments of the application, therefore should not be seen
Work is the restriction to range, for those of ordinary skill in the art, without creative efforts, can be with
Other relevant attached drawings are obtained according to these attached drawings.
Fig. 1 shows server and client side's interaction schematic diagram provided by the embodiments of the present application；
Fig. 2 shows the structural schematic diagrams of server provided by the embodiments of the present application；
Fig. 3 shows thermodynamic chart rendering method flow diagram provided by the embodiments of the present application；
Fig. 4 shows the structural schematic diagram that thermodynamic chart rendering device provided by the embodiments of the present application is applied to client；
Fig. 5 shows the structural schematic diagram that thermodynamic chart rendering device provided by the embodiments of the present application is applied to server.
Specific embodiment
In the prior art, thermodynamic chart is rendered and is typically rendered using the canvas label in HTML5,
It is detailed to be described as follows by taking 300,000 demographic data renderings are in a thermodynamic chart as an example:
It is initial background map first；Here background map can be the static map comprising somewhere chorography
Piece is also possible to the static images that invocation map interface obtains somewhere chorography.Initial background map refers to the quiet of acquisition
State picture is loaded and is shown on client display screen, and static images are usually shown in browser page either software
In application program.Such as: there are a static images to be named as a.png, a.png is loaded and shows the browser in client
On.
Followed by asynchronous load data；Here asynchronous load also makes non-blocking mode load, refers to the browsing of client
Device or software application are in the case where not refresh page overall situation window, while being requested to server and obtain data,
The progress of browser or the other tasks of software application is not influenced, is exactly to draw when loading data for popular herein
Figure.Such as: JavaScript script is loaded in browser, and using the asynchronous load function in JavaScript script, to clothes
Business device request data is named as b.json, is named as c.json to server request data, receives the b.json that server is sent,
Receive the c.json that server is sent.
Followed by the data of acquisition are drawn in background map with preset color；Here preset color can
To be that demographic data is intensively then displayed in red, demographic data is sparse, shows yellow, it is transparent that demographic data, which is zero,.Certainly,
There are some data first to receive, some data post-receptions to the case where, then the data first received can first be drawn.Example
Such as: first receive the b.json that server is sent, after receive the c.json of server transmission, then just first drawing b.json to background
In map, c.json is then drawn again into background map.
It is finally that all data received are drawn in background map, i.e. thermodynamic chart rendering is completed.
Certainly, above-mentioned this thermodynamic chart rendering method is during specific implementation, when loading excessive feelings in data
Under condition, it is slow that this mode just will appear rendering speed.For example, when data volume reaches more than 2,000, in the browsing of client
On device, data load and thermodynamic chart rendering time has been even up to tens of seconds, when data volume reaches 10,000, client it is clear
Device of looking at is stuck.
In order to solve the above technical problems, the embodiment of the present application provides following thermodynamic chart rendering method and device, below
Will in conjunction with attached drawing, in the embodiment of the present application thermodynamic chart rendering method and device describe in detail.
Referring to Figure 1, Fig. 1 shows server and client side's interaction schematic diagram provided by the embodiments of the present application.Server
101 are communicatively coupled by network 103 and one or more clients 102, to carry out data communication or interaction.Server
101 can be network server, database server etc..Client 102 can be tablet computer or personal desktop electromechanics brain.?
In the embodiment of the present application, server 101 is mainly interacted by network 103 with client 102 is installed on.
Fig. 2 is referred to, Fig. 2 shows the structural schematic diagrams of server provided by the embodiments of the present application.The embodiment of the present application
A kind of server 101 provided, comprising: processor 104 and memory 105, memory 105 are stored with processor 104 and can hold
Capable machine readable instructions, machine readable instructions execute following method when being executed by processor 104.
Refer to Fig. 2, the embodiment of the present application also provides a kind of storage medium 106, be stored on the storage medium 106
Computer program, the computer program execute following method when being run by processor 104.
Wherein, storage medium 106 can be by any kind of volatibility or non-volatile memory device or their group
It closes and realizes, such as static random access memory (Static Random Access Memory, abbreviation SRAM), electric erasable can
Program read-only memory (Electrically Erasable Programmable Read-Only Memory, referred to as
EEPROM), Erasable Programmable Read Only Memory EPROM (Erasable Programmable Read Only Memory, abbreviation
EPROM), programmable read only memory (Programmable Red-Only Memory, abbreviation PROM), read-only memory
(Read-Only Memory, abbreviation ROM), magnetic memory, flash memory, disk or CD.
First embodiment
Fig. 3 is referred to, Fig. 3 shows thermodynamic chart rendering method flow diagram provided by the embodiments of the present application.The application
A kind of thermodynamic chart rendering method that embodiment provides is applied to client, comprising:
Step S110: total-grid data are read.
Wherein, grid is the display area that grid matrix of uniform size is divided an image into according to preset condition, so as to
Operation program in client carries out subregion domain views to image, specifically deposits for corresponding one piece usually in the memory of client
Storage structure.Here preset condition can be the demand of Dynamic Display, or be the unit requirement of storage hardware.
Grid data, refers to the data that the corresponding storage organization of a grid will store, such as grid is right in memory
The storage organization number answered is 10001, and the data that will be stored are #FFFFFF, then the data of #FFFFFF can be stored in
In the storage organization that number is 10001.In another example corresponding storage organization number is 10002 to grid in memory, and will deposit
The demographic data of storage is 1200, then 1200 demographic data deposit can be numbered in the storage organization for being 10001.
The data for needing to store in a usual grid are properly termed as a grid data.Add in multiple grids of thermodynamic chart
After carrying total-grid data, multiple grids of thermodynamic chart render thermodynamic chart according to total-grid data.
Client can read total-grid data from temporary storage medium, can also be from permanent storage media
Total-grid data are read, illustratively, client receives the total-grid data that server is sent, by the total-grid data
It stores into temporary storage medium, then reads total-grid data from temporary storage medium again.Client passes through net
Network communication card receives the total-grid data that server is sent, which is stored into permanent storage media,
Then total-grid data are read from temporary storage medium again.
Optionally, above-mentioned before step S110 in a kind of exemplary embodiment, further include following steps:
Step S101: the formatted data that server is sent is received.
Step S102: decapsulating formatted data, obtains compressed data.
Step S103: compressed data is decompressed to obtain total-grid data.
Below above-mentioned steps S101-S103 is unfolded to be described in detail:
In step s101, formatted data can be the data of various formats, such as: the data interchange format of lightweight
(JavaScript Object Notation, JSON) format or extensible markup language (eXtensible Markup
Language, XML) format.
Client can by Simple Object Access Protocol (Simple Object Access Protocol, SOAP) with
Server communication, SOAP are a kind of agreements based on XML, can be used in combination with existing many internet protocol negotiation formats,
Existing many Internet Protocols include: hypertext transfer protocol (HyperText Transfer Protocol, HTTP), letter
Single Mail Transfer protocol (Simple Mail Transfer Protocol, SMTP), multi purpose internet mail extensions
(Multipurpose Internet Mail Extensions, MIME), is the one of SOAP based on very versatile transport protocol
A advantage.Certainly, client can also pass through web services definition language (Web Services Description
Language, WSDL) formatted data that server is sent is received, Web clothes are established in a kind of wherein embodiment, on server
It after business, is described using Web service of the WSDL agreement to offer, then client receives server hair by soap protocol again
The data of the JSON format sent or XML format.
In step s 102, above-mentioned formatted data is decapsulated, obtains compressed data.Above-mentioned formatted data packet
It includes: JSON formatted data or XML format data.
Compressed data can refer to the compression to data itself, for example, grid data is in a manner of matrix in storage
It is stored, therefore compression is carried out to matrix and is retransmited, can greatly saved Internet resources, improve the transmission of grid data
Efficiency.It may also mean that the number that the data that the proxy service software run on server transmits needs are compressed and transmitted
According to file, specifically for example: the state data file compressed on Nginx Apache Http Server.
In a kind of illustrative embodiment, decapsulation plug-in unit can be used to above-mentioned JSON formatted data and solve
Encapsulation, obtains compressed data, and decapsulation plug-in unit here can be GSON plug-in package, FastJSON plug-in package and Jackson and insert
Part packet.
More than use formatted data processing method after server end carries out format encapsulation to data, then by network into
Row is transmitted to client and carries out decapsulation processing so that client data are uniformly processed have it is more efficient, thus
Ground connection improves the rendering speed of thermodynamic chart.
In step s 103, the mode for being decompressed to obtain total-grid data to compressed data has in very much, in one kind
In illustrative embodiment, when compressed data is matrix and the matrix is symmetrical matrix, for example, symmetrical matrix here can
ThinkNumber on the diagonal of a matrix is 1 and 8, and the element on diagonal line both sides is symmetrically that entire matrix meets a
[i] [j]=a [j] [i], wherein a is the symmetrical matrix, and i is the ordinal number of row, and such as the i-th row, j is the ordinal number of column, if jth arranges, a
[i] [j] represents the numerical value of symmetrical matrix the i-th row jth column.Therefore it may only be necessary to store the symmetrical matrix according to special construction
The numerical value of half, i.e., only store, can be according to corresponding mode from special when restoring the symmetrical matrix
The structure restoration symmetrical matrix.The storage organization can be [1] [2,8], represent above-mentioned symmetrical matrix in first square brackets
The numerical value of the first row represents the numerical value of the second row of above-mentioned symmetrical matrix in second square brackets, and the numerical value of different lines is with comma
Separate.When restoring the symmetrical matrix, first it is restored to according to rowDiagonal numerical value copy can be obtained again former symmetrical
Matrix
Certainly, the execution sequence of step S102 and step S103, which can be, first carries out decompression step, then executes decapsulation
Step, a kind of illustrative embodiment are described as follows:
Compressed data, the data that may also mean that the proxy service software run on server transmits needs are pressed
Contract the data file of transmission, specific proxy service software for example: Nginx Apache Http Server, wherein
Nginx (engine x) is a high performance HTTP and reverse proxy service software and an IMAP/POP3/SMTP clothes
Business；Apache Http Server (abbreviation Apache) is the webpage clothes of an open source code of Apache Software Foundation
Business device.These proxy service softwares can be run on server, provided static file for client or serviced according to transmission.
In a specific embodiment, method compressed data decompressed, for example, being run on server
Nginx service software, server will prepare in advance the data file that needs transmit and be
After a.json, Nginx service software are compressed a.json using compression module (such as gzip module), obtain
A.json.gzip file, is then transferred to client for a.json.gzip file, and client receives a.json.gzip file
Afterwards, a.json.gzip file is decompressed using the decompression module of browser, obtains the data file of server transport,
That is a.json file.
It is understood that formatted data processing method more than use carries out format encapsulation to data in server end
Afterwards, it then carries out being transmitted to client by network and carries out decapsulation processing, so that client has data are uniformly processed
It is more efficient, to improve the rendering speed of thermodynamic chart indirectly.
Step S120: the storage that each grid data in total-grid data is input to multiple storage organizations is tied
Structure, wherein each storage organization at most stores a grid data.
Storage organization can refer to the figure template object of grid data to be loaded in client browser, an artwork plate pair
Elephant corresponds to a storage organization in memory, such as there are two storage organizations to include the first storage organization and the second storage knot
Structure, the address number of the first storage organization are 10001, and the address number of the second storage organization is 10002.
The quantity of grid data with no restrictions, can be 2 grid datas, be also possible to 3 grid datas, such as wrap
Include: the first grid data and the second grid data, the value of the first grid data are 2100, and the value of the second grid data is 2200.
Each grid data in total-grid data is input to the mode of a storage organization of multiple storage organizations
Such as: the value 2100 of the first grid data is loaded onto region of memory i.e. the first storage organization that address number is 10001, it will
The value 2200 of second grid data is loaded onto region of memory i.e. the second storage organization that address number is 10002.
Step S130: after the input of total-grid data is completed, multiple grids of acquisition are divided according to thermodynamic chart
Grid data in the corresponding storage organization of each grid, shows corresponding color for each grid, to render thermodynamic chart,
In, the corresponding storage organization of each grid.
It is illustrated by taking above-mentioned data load as an example, each grid is showed into corresponding color, to render thermodynamic chart
Mode, such as: the rgb color value that the value of grid data is rendered as less than 2150 to white is #FFF, by the value of grid data
The rgb color value that black is rendered as greater than 2150 is #000, wherein RGB refers to that three primary colors, R represent Red (red), and G is represented
Green (green), B represent Blue (blue), a kind of color can be specifically indicated with the color-values of RGB, so as in client
It is shown on the display at end.Another example is: the value of grid data, which is greater than 1000, is set as transparent, the value of grid data is big
In 1000 and being rendered as yellow less than 2150, the value of grid data is greater than 2150 and is rendered as red less than 5000, by grid
The value of data is greater than 5000 and is rendered as red less than 9999,.
Certainly color-values can also be indicated with other modes, such as: HSB, wherein H (hues) indicates form and aspect, S
(saturation) saturation degree is indicated, B (brightness) indicates brightness.Therefore, the value 2100 of the first above-mentioned grid data
Grid corresponding less than 2150, first grid datas should be rendered as white #FFF, and the value 2200 of the second grid data is greater than
2150, the corresponding grid of the second grid data should be rendered as black #000.
In a kind of illustrative embodiment, step S130 may include:
Step S131: determine that the type of thermodynamic chart for two-dimentional thermodynamic chart, then reads thermodynamic chart using two-dimentional kinematic insert
Each grid corresponds to the numerical value of the grid data in storage organization.
Two-dimentional kinematic insert refers to the plug-in unit for accelerating rendering for two-dimentional thermodynamic chart, can be using in the library Echarts
Heatmap thermodynamic chart function in timeline component, wherein the library Echarts refer to it is a kind of for the powerful of browser and hand over
The chart of mutual formula visualizes library, and timeline component is to provide to switch over and play between multiple tabss in the library Echarts
Etc. operating functions component, heatmap thermodynamic chart function be in timeline component specifically for thermodynamic chart provide quickly exploitation
A kind of function script function.
In the specific implementation process, the pattern of 24 hours time shafts specifically can be used in timeline component, certainly, clothes
Business device needs to prepare in advance the data shown required for the pattern of 24 hours time shafts, according to time shaft sequence or inverted order dynamic
Ground plays out the data, since efficiency of the timeline component to data processing is very high when playing, so, it adopts
With the heatmap thermodynamic chart function in the timeline component in the library Echarts, the rendering of thermodynamic chart can be greatly improved
Efficiency, thus the phenomenon that being not felt by Caton completely when rendering thermodynamic chart.
The numerical value that the grid data in storage organization is read using above-mentioned two-dimentional kinematic insert, then makes storage organization pair
The grid answered shows color corresponding with the numerical value of grid data, directly improves the rendering speed of two-dimentional thermodynamic chart.
Step S132: the corresponding grid of storage organization is showed into color corresponding with the numerical value of grid data.
The step for mode of appearance of color it is consistent with the specific method of step S130, therefore, do not repeat herein.
In another illustrative embodiment, step S130 may include:
Step S133: determine that the type of thermodynamic chart for three-dimensional thermodynamic chart, then reads thermodynamic chart using d engine plug-in unit
Each grid corresponds to the numerical value of the grid data in storage organization.
Three-Dimensional Dynamic plug-in unit refers to the plug-in unit for accelerating rendering for three-dimensional thermodynamic chart, can be using in the library Echarts
Timeline component in conjunction with maptalks plug-in unit, or combines mapbox plug-in unit, wherein the library Echarts is a kind of for clear
Look at the powerful and interactive chart visualization library of device, tmaptalks plug-in unit is a kind of open source exclusively for integrated two-dimensional map
Or a kind of JavaScript (client script development language) library of three-dimensional map, mapbox plug-in unit be a kind of open source exclusively for
The map platform of custom design can provide routine interface or Software Development Kit for mobile terminal or webpage terminal.
In the specific implementation process, the pattern of 24 hours time shafts specifically can be used in timeline component, certainly, clothes
Business device needs to prepare in advance the data shown required for the pattern of 24 hours time shafts, according to time shaft sequence or inverted order dynamic
Ground plays out the data, specifically, such as: the data that the grid pillar in three-dimensional thermodynamic chart can be sent according to server
Height is dynamically adjusted, the grid pillar in three-dimensional thermodynamic chart shows dynamic change from low to high or from high to low.Cause
For play when due to efficiency of the timeline component to data processing it is very high, so, using in the library Echarts
Heatmap thermodynamic chart function in timeline component, can greatly improve the rendering efficiency of thermodynamic chart, thus rendering
The phenomenon that being not felt by Caton when thermodynamic chart completely, improves the bandwagon effect of thermodynamic chart.
The numerical value that the grid data in storage organization is read using above-mentioned Three-Dimensional Dynamic plug-in unit, then makes storage organization pair
The grid answered shows color corresponding with the numerical value of grid data, directly improves the rendering speed of three-dimensional thermodynamic chart.
Step S134: the corresponding grid of storage organization is showed into color corresponding with the numerical value of grid data.
The mode of appearance of color of the step is consistent with the specific method of step S130, therefore, does not repeat herein.Using above-mentioned
Method can disposably obtain total-grid data, and total-grid data are loaded onto storage organization before rendering, with
In advance load total-grid data to storage organization mode, with reduce rendering when data acquisition and data load when
Between, so that the rendering speed of thermodynamic chart be effectively promoted.
Second embodiment
A kind of thermodynamic chart rendering method that the embodiment of the present application provides, is applied to server, and method includes:
Step S210: counting pre-stored data according to multiple grids that thermodynamic chart is divided acquisition, obtains
Total-grid data.
Wherein, pre-stored data are the data for needing to show by thermodynamic chart, such as can be demographic data and position
Data are set, demographic data can be obtained from the interface that the operator of cooperation provides, such as the operator's letter obtained from interface
Data are enabled to extract demographic data；And position data can first pass through and obtain mobile phone global positioning system in the interface of operator's offer
(Global Positioning System, GPS) data, then position data is extracted from cellphone GPS data.A kind of exemplary
Embodiment in, the demographic data such as area the A size of population is that the size of population in the area 100,000, B is 200,000, and the city C only includes the area A
With the area B, the position coordinates in the area A are [100,200], and the position coordinates in the area B are [200,100].
By taking above-mentioned demographic data and position data as an example, multiple grids of acquisition are divided to depositing in advance according to thermodynamic chart
The concrete mode that the data of storage are counted can be, and count the demographic data calculation in the city C are as follows: and 100,000+20 ten thousand=300,000,
And the position data in the city C are as follows:
[(100+200)/2, (200+100)/2=[150,150], using the demographic data in the city C and position data as one
Grid data, and so on, obtain whole grid datas, such as the demographic data in the city D is identical with the demographic data in the city C, the city D
Position data be [800,900], whole grid datas includes the city C and the city D, then whole grid datas can be expressed as
{C:[population:30,location:[150,150]],D:[population:30,location:[800,900]]}。
Step S220: total-grid data are sent to client.
As above, server can pass through soap protocol for whole nets by soap protocol and client communication, server
Lattice data are sent to client.
Optionally, in the embodiment of the present application, step S220 may include:
Step S221: total-grid data are compressed according to multiple grids, obtain compressed data.
With above-mentioned data instance, mode that total-grid data are compressed according to multiple grids can be with are as follows: and C:
[population:30,location:[150,150]],D:[population:C,location:[800,900]]}.I.e. in D
It is directly replaced with the special number or title in the city C in city's demographic data.Certainly, this is one of illustrative expression side
Formula, in the specific implementation process, total-grid data can be to be stored in a manner of matrix, is also possible to sequence
What change or other forms stored.After compressing to total-grid data, Internet resources can be greatly saved, improve net
The efficiency of transmission of lattice data.
Step S222: compressed data is sent to client.
As above, server can pass through soap protocol for compressed data by soap protocol and client communication, server
It is sent to client.Compression method more than use is after server end compressed data, then carries out being transmitted to client by network
End is handled, while having saved network bandwidth resources, but also carry out being transmitted to the more efficient of client by network,
To improve the rendering speed of thermodynamic chart indirectly.
Optionally, in the embodiment of the present application, step S220 can also include:
Step S223: being packaged compressed data, obtains formatted data.
With above-mentioned data instance, compressed data be C:[population:30, location:[150,150]], D:
[population:C, location:[800,900]] }, such as compressed data is packaged with JSON format, then it obtains
Formatted data, such as: " C ": [{ " population ": " 30 ", " location ": [150,150] " }], " D ": ["
population":"C",location":[150,150]"}].Compressed data can certainly be packaged with XML format,
Therefore, what specifically used format is packaged the limitation that should not be construed as to the embodiment of the present application to data.
Step S224: formatted data is sent to client.
As above, server can pass through soap protocol for format number by soap protocol and client communication, server
According to being sent to client.Total-grid data can be disposably obtained using the above method, and total-grid data are being rendered
It is loaded onto storage organization before, in a manner of loading total-grid data to storage organization in advance, to reduce in rendering
The time of data acquisition and data load, so that the rendering speed of thermodynamic chart be effectively promoted.
3rd embodiment
Fig. 4 is referred to, Fig. 4 shows the structure that thermodynamic chart rendering device provided by the embodiments of the present application is applied to client
Schematic diagram.A kind of thermodynamic chart rendering device 100 that the embodiment of the present application provides is applied to client 102, thermodynamic chart rendering dress
Setting 100 includes:
Grid data read module 110, for reading total-grid data.
Grid data input module 120, for each grid data in total-grid data to be input to multiple storages
One storage organization of structure, wherein each storage organization at most stores a grid data.
Thermodynamic chart rendering module 130, for being divided acquisition according to thermodynamic chart after the input of total-grid data is completed
Multiple grids the corresponding storage organization of each grid in grid data, each grid is showed into corresponding color, with
Render thermodynamic chart, wherein the corresponding storage organization of each grid.
Fourth embodiment
Fig. 5 is referred to, Fig. 5 shows the structure that thermodynamic chart rendering device provided by the embodiments of the present application is applied to server
Schematic diagram.A kind of thermodynamic chart rendering device 100 that the embodiment of the present application provides is applied to server 101, thermodynamic chart rendering dress
Setting 100 includes:
Grid data obtains module 140, for being divided multiple grids of acquisition according to thermodynamic chart to pre-stored number
According to being counted, total-grid data are obtained.
Grid data sending module 150, for total-grid data to be sent to client.
More than, the only specific embodiment of the embodiment of the present application, but the protection scope of the embodiment of the present application does not limit to
In this, anyone skilled in the art can readily occur in change in the technical scope that the embodiment of the present application discloses
Change or replace, should all cover within the protection scope of the embodiment of the present application.
Claims (10)
1. a kind of thermodynamic chart rendering method, which is characterized in that be applied to client, comprising:
Read total-grid data；
Each grid data in the total-grid data is input to a storage organization of multiple storage organizations, wherein
Each storage organization at most stores the grid data；
After total-grid data input is completed, each grid pair of multiple grids of acquisition is divided according to thermodynamic chart
Each grid is showed corresponding color by the grid data in the storage organization answered, to render the thermodynamic chart,
Wherein, the corresponding storage organization of each grid.
2. thermodynamic chart rendering method as described in claim 1, which is characterized in that before the reading total-grid data,
The method also includes:
Compressed data is decompressed to obtain the total-grid data.
3. thermodynamic chart rendering method as claimed in claim 2, which is characterized in that decompressed to obtain to compressed data described
Before the total-grid data, further includes:
Receive the formatted data that server is sent；
The formatted data is decapsulated, the compressed data is obtained.
4. thermodynamic chart rendering method as described in claim 1, which is characterized in that described to be divided the more of acquisition according to thermodynamic chart
Each grid is showed corresponding face by the grid data in the corresponding storage organization of each grid of a grid
Color, comprising:
Determine that the type of the thermodynamic chart for two-dimentional thermodynamic chart, then reads each net of the thermodynamic chart using two-dimentional kinematic insert
Lattice correspond to the numerical value of the grid data in the storage organization；
The corresponding grid of the storage organization is showed into color corresponding with the numerical value of the grid data.
5. thermodynamic chart rendering method as described in claim 1, which is characterized in that described to be divided the more of acquisition according to thermodynamic chart
Each grid is showed corresponding face by the grid data in the corresponding storage organization of each grid of a grid
Color, comprising:
Determine that the type of the thermodynamic chart for three-dimensional thermodynamic chart, then reads each net of the thermodynamic chart using d engine plug-in unit
Lattice correspond to the numerical value of the grid data in the storage organization；
The corresponding grid of the storage organization is showed into color corresponding with the numerical value of the grid data.
6. a kind of thermodynamic chart rendering method, which is characterized in that be applied to server, which comprises
Pre-stored data are counted according to multiple grids that thermodynamic chart is divided acquisition, obtain total-grid data；
The total-grid data are sent to client.
7. thermodynamic chart rendering method as claimed in claim 6, which is characterized in that described to be sent to the total-grid data
Client, comprising:
The total-grid data are compressed according to the multiple grid, obtain compressed data；
The compressed data is sent to client.
8. thermodynamic chart rendering method as claimed in claim 7, which is characterized in that described that the compressed data is sent to client
End, comprising:
The compressed data is packaged, formatted data is obtained；
The formatted data is sent to client.
9. a kind of thermodynamic chart rendering device, which is characterized in that be applied to client, the thermodynamic chart rendering device includes:
Grid data read module, for reading total-grid data；
Grid data input module, for each grid data in the total-grid data to be input to multiple storage organizations
A storage organization, wherein each storage organization at most stores the grid data；
Thermodynamic chart rendering module, for being divided acquisition according to thermodynamic chart after total-grid data input is completed
Each grid is showed corresponding face by the grid data in the corresponding storage organization of each grid of multiple grids
Color, to render the thermodynamic chart, wherein the corresponding storage organization of each grid.
10. a kind of thermodynamic chart rendering device, which is characterized in that be applied to server, the thermodynamic chart rendering device includes:
Grid data obtains module, and multiple grids for being divided acquisition according to thermodynamic chart unite to pre-stored data
Meter obtains total-grid data；
Grid data sending module, for the total-grid data to be sent to client.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910201967.9A CN109949395A (en) | 2019-03-15 | 2019-03-15 | Thermodynamic chart rendering method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910201967.9A CN109949395A (en) | 2019-03-15 | 2019-03-15 | Thermodynamic chart rendering method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109949395A true CN109949395A (en) | 2019-06-28 |
Family
ID=67008416
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910201967.9A Pending CN109949395A (en) | 2019-03-15 | 2019-03-15 | Thermodynamic chart rendering method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109949395A (en) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110569083A (en) * | 2019-08-07 | 2019-12-13 | 上海联影智能医疗科技有限公司 | Image segmentation processing method and device, computer equipment and storage medium |
| CN111078330A (en) * | 2019-07-23 | 2020-04-28 | 南京航空航天大学 | Mobile phone traffic data visualization tool |
| CN111125490A (en) * | 2019-11-15 | 2020-05-08 | 广州市城市规划勘测设计研究院 | Population activity number extraction method, device and medium based on Baidu thermodynamic diagram |
| CN111737396A (en) * | 2020-08-26 | 2020-10-02 | 成都四方伟业软件股份有限公司 | Method and device for improving thermodynamic diagram display performance based on 2D convolution |
| CN111951351A (en) * | 2020-08-12 | 2020-11-17 | 智慧足迹数据科技有限公司 | Position thermodynamic diagram generation method and device, electronic equipment and storage medium |
| CN112347156A (en) * | 2020-11-03 | 2021-02-09 | 智慧足迹数据科技有限公司 | Population data rendering method and device and electronic equipment |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102289454A (en) * | 2011-06-03 | 2011-12-21 | 人民搜索网络股份公司 | Adaptive information reading-guided system based on map and reading-guided method thereof |
| CN104391951A (en) * | 2014-11-27 | 2015-03-04 | 北京国双科技有限公司 | Web page thermodynamic diagram loading method and device |
| CN105095481A (en) * | 2015-08-13 | 2015-11-25 | 浙江工业大学 | Large-scale taxi OD data visual analysis method |
| EP3040885A1 (en) * | 2014-12-29 | 2016-07-06 | Palantir Technologies, Inc. | Interactive user interface |
| CN105809967A (en) * | 2016-05-25 | 2016-07-27 | 浙江宇视科技有限公司 | Traffic flow displaying method and device |
| CN105844681A (en) * | 2016-03-22 | 2016-08-10 | 北京建飞无限科技有限公司 | Thermodynamic diagram drawing method and apparatus |
| CN106570917A (en) * | 2016-10-25 | 2017-04-19 | 先锋智道（北京）科技有限公司 | Vehicle demand thermodynamic diagram generation method and device thereof |
| CN107247657A (en) * | 2017-05-18 | 2017-10-13 | 北京京东尚科信息技术有限公司 | Methods, devices and systems for displayed web page coordinate click volume |
| CN108345668A (en) * | 2018-02-09 | 2018-07-31 | 北京工商大学 | For the time sequence matrix thermodynamic chart method for visualizing of classification comparison |
| CN108415697A (en) * | 2018-02-13 | 2018-08-17 | 北京安博通科技股份有限公司 | A kind of configuration method and device of visualization component |
| CN108415999A (en) * | 2018-02-26 | 2018-08-17 | 广州要啦网络有限公司 | A kind of real time acquiring method and system of webpage hot spot |
-
2019
- 2019-03-15 CN CN201910201967.9A patent/CN109949395A/en active Pending
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102289454A (en) * | 2011-06-03 | 2011-12-21 | 人民搜索网络股份公司 | Adaptive information reading-guided system based on map and reading-guided method thereof |
| CN104391951A (en) * | 2014-11-27 | 2015-03-04 | 北京国双科技有限公司 | Web page thermodynamic diagram loading method and device |
| EP3040885A1 (en) * | 2014-12-29 | 2016-07-06 | Palantir Technologies, Inc. | Interactive user interface |
| CN105095481A (en) * | 2015-08-13 | 2015-11-25 | 浙江工业大学 | Large-scale taxi OD data visual analysis method |
| CN105844681A (en) * | 2016-03-22 | 2016-08-10 | 北京建飞无限科技有限公司 | Thermodynamic diagram drawing method and apparatus |
| CN105809967A (en) * | 2016-05-25 | 2016-07-27 | 浙江宇视科技有限公司 | Traffic flow displaying method and device |
| CN106570917A (en) * | 2016-10-25 | 2017-04-19 | 先锋智道（北京）科技有限公司 | Vehicle demand thermodynamic diagram generation method and device thereof |
| CN107247657A (en) * | 2017-05-18 | 2017-10-13 | 北京京东尚科信息技术有限公司 | Methods, devices and systems for displayed web page coordinate click volume |
| CN108345668A (en) * | 2018-02-09 | 2018-07-31 | 北京工商大学 | For the time sequence matrix thermodynamic chart method for visualizing of classification comparison |
| CN108415697A (en) * | 2018-02-13 | 2018-08-17 | 北京安博通科技股份有限公司 | A kind of configuration method and device of visualization component |
| CN108415999A (en) * | 2018-02-26 | 2018-08-17 | 广州要啦网络有限公司 | A kind of real time acquiring method and system of webpage hot spot |
Non-Patent Citations (1)
| Title |
|---|
| W3C SCHOOL ECHARTS 教程: "ECharts系列列表：热力图", 《HTTPS://WWW.W3CSCHOOL.CN/ECHARTS_TUTORIAL/ECHARTS_TUTORIAL-659D2GGV.HTML》 * |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111078330A (en) * | 2019-07-23 | 2020-04-28 | 南京航空航天大学 | Mobile phone traffic data visualization tool |
| CN110569083A (en) * | 2019-08-07 | 2019-12-13 | 上海联影智能医疗科技有限公司 | Image segmentation processing method and device, computer equipment and storage medium |
| CN110569083B (en) * | 2019-08-07 | 2022-11-25 | 上海联影智能医疗科技有限公司 | Image segmentation processing method and device, computer equipment and storage medium |
| CN111125490A (en) * | 2019-11-15 | 2020-05-08 | 广州市城市规划勘测设计研究院 | Population activity number extraction method, device and medium based on Baidu thermodynamic diagram |
| CN111125490B (en) * | 2019-11-15 | 2020-11-20 | 广州市城市规划勘测设计研究院 | Population activity number extraction method, device and medium based on Baidu thermodynamic diagram |
| CN111951351A (en) * | 2020-08-12 | 2020-11-17 | 智慧足迹数据科技有限公司 | Position thermodynamic diagram generation method and device, electronic equipment and storage medium |
| CN111737396A (en) * | 2020-08-26 | 2020-10-02 | 成都四方伟业软件股份有限公司 | Method and device for improving thermodynamic diagram display performance based on 2D convolution |
| CN112347156A (en) * | 2020-11-03 | 2021-02-09 | 智慧足迹数据科技有限公司 | Population data rendering method and device and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109949395A (en) | Thermodynamic chart rendering method and device | |
| CN107832108A (en) | Rendering intent, device and the electronic equipment of 3D canvas web page elements | |
| CN111722885B (en) | Program running method and device and electronic equipment | |
| CA2621076A1 (en) | High level graphics stream | |
| CN111408138A (en) | Rendering method and device based on game engine and electronic equipment | |
| CN112316433B (en) | Game picture rendering method, device, server and storage medium | |
| CN112102422B (en) | Image processing method and device | |
| US20230252758A1 (en) | Image processing method and apparatus, electronic device, program, and readable storage medium | |
| CN109874048A (en) | The translucent display methods of video window component, device and computer equipment | |
| CN108959392A (en) | The method, device and equipment of rich text is shown on 3D model | |
| CN112307403A (en) | Page rendering method, device, storage medium and terminal | |
| WO2023077951A1 (en) | Data rendering method and apparatus | |
| CN115190345B (en) | Coordinated control method for display media, client device and storage medium | |
| JP2024504053A (en) | Two-dimensional code display method, apparatus, device and medium | |
| CN103699652A (en) | Webpage access method and webpage access system | |
| CN113691531B (en) | WebSocket protocol-based data transmission method, system, equipment and storage medium | |
| CN111562869B (en) | Screenshot method and device, storage medium and electronic device | |
| CN115794095B (en) | JavaScript-based illusion engine UI development method and system | |
| CN111427576A (en) | Method, device, storage medium and terminal for configuring application program interface | |
| CN111930461B (en) | Mobile terminal APP full page graying method and device based on Android | |
| CN114429513A (en) | Method and device for determining visible element, storage medium and electronic equipment | |
| CN109743640A (en) | Video steganography method, user equipment, storage medium and device based on histogram | |
| CN112162719A (en) | Display content rendering method and device, computer readable medium and electronic equipment | |
| CN109003225A (en) | A kind of more palace trrellis diagram piece treating method and apparatus and a kind of electronic equipment | |
| CN103226477A (en) | Method and system for enhancing flash video picture quality in Web Browser |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190628 |
|
| RJ01 | Rejection of invention patent application after publication |