CN117557677A - Chart drawing method, device and computer equipment - Google Patents

Abstract

The present application relates to a chart drawing method, apparatus, computer device, storage medium, and computer program product. The method comprises the following steps: responding to a chart drawing request, and acquiring a first chart attribute; calling a layer bus to draw a basic layer, drawing a first chart element to a graph context according to the first chart attribute on the basic layer, and generating a first target chart; wherein the layer bus comprises a plurality of sub-threads; rendering and displaying the first target chart. By adopting the method, on one hand, because the layer bus comprises a plurality of sub-threads, drawing can be processed in parallel, drawing efficiency of a chart can be improved, and on the other hand, the main thread draws the chart by calling the layer bus, and the process of drawing the chart does not occupy resources of the main thread, so that the probability of blocking in page rendering can be reduced.

Description

Chart drawing method, device and computer equipment

Technical Field

The present invention relates to the field of page technology, and in particular, to a chart drawing method, apparatus, computer device, storage medium, and computer program product.

Background

With the rapid development of internet technology, information viewing through terminal applications has become a major way for people to know information. And the data are analyzed to form a chart, and the data are displayed in a chart mode, so that the information input efficiency can be improved, and people can be helped to quickly know the information. Such as statistical analysis charts, stock market fluctuation charts, etc.

When rendering a chart page by using a terminal, more resources are needed to be occupied, so that the chart drawing efficiency is low.

Disclosure of Invention

In view of the foregoing, it is desirable to provide a graph drawing method, apparatus, computer device, computer-readable storage medium, and computer program product that can improve the graph rendering efficiency.

In a first aspect, the present application provides a chart drawing method. The method comprises the following steps:

responding to a chart drawing request, and acquiring a first chart attribute;

calling a layer bus to draw a basic layer, drawing a first chart element to a graph context according to the first chart attribute on the basic layer, and generating a first target chart; wherein the layer bus comprises a plurality of sub-threads;

rendering and displaying the first target chart.

In one embodiment, after the first target chart is displayed, the method further includes:

invoking a sub-thread of the layer bus to monitor a click event of a page of the first target chart, and acquiring a second chart attribute if a chart conversion request is determined to be triggered according to the click event;

invoking a plurality of sub-threads of the layer bus to draw a second chart element to a graph context on the base layer according to the second chart attribute, and generating a second target chart;

Rendering and displaying the second target chart.

In one embodiment, determining whether to trigger a conversion request to the first target chart according to the click event includes:

determining the touch point position of the click event on the page of the first target chart;

and traversing each area of the page of the first target chart according to the touch point position, and judging whether the touch point position is in the area of the chart switching element.

In one embodiment, the step of obtaining the second graph attribute includes:

determining a target switching chart corresponding to the chart switching element according to the chart switching element where the touch point is located;

comparing the attribute of the target switching chart with the attribute of the first target chart, and monitoring the change attribute;

and modifying the first target chart attribute according to the change attribute to obtain a second chart attribute.

In one embodiment, calling a layer bus to draw a base layer, drawing a chart element to a graph context on the base layer according to the first chart attribute, and generating a first target chart, including:

creating a base layer by using sub-threads of a layer bus;

Invoking a child thread of a layer bus to create a graphics context;

invoking a plurality of sub-threads of a layer bus to draw a first chart element to the graphics context on the base layer according to the first chart attribute;

and generating a bitmap according to the graphic context to obtain a first target chart.

In one embodiment, the first chart element includes a title background; invoking a plurality of sub-threads of a layer bus to draw a first chart element to the graphics context on the base layer according to the first chart attribute, comprising:

and invoking a sub-thread of a layer bus to determine a drawing coordinate range of a title background, a width of the title background, a height of the title background and a background color from the first chart attribute, and drawing the title background to the graphic context on the base layer according to the drawing coordinate range, the width of the title background, the height of the title background and the background color.

In one embodiment, the first chart element comprises a table; invoking a plurality of sub-threads of a layer bus to draw a first chart element to the graphics context on the base layer according to the first chart attribute, comprising:

And invoking a sub-thread of a layer bus to determine attribute information of a table from the first chart attribute, and drawing the table to the graph context on the basic layer according to the attribute information of the table.

In one of the embodiments of the present invention,

the first chart element comprises characters; invoking a plurality of sub-threads of a layer bus to draw a first chart element to the graphics context on the base layer according to the first chart attribute, comprising:

invoking a sub-thread of a layer bus to determine attribute information of characters from the first chart attribute, wherein the attribute information of the characters at least comprises a line number and a column number of the characters or an angle of the characters relative to a graph;

determining rich text attributes according to the attribute information of the characters;

drawing characters to the graphics context according to the rich text attribute on the base layer.

In a second aspect, the present application also provides a chart drawing apparatus. The device comprises:

the acquisition module is used for responding to the chart drawing request and acquiring a first chart attribute;

the chart processing module is used for calling a chart layer bus to draw a basic chart layer, drawing a first chart element to a chart context on the basic chart layer according to the first chart attribute, and generating a first target chart; wherein the layer bus comprises a plurality of sub-threads;

And the rendering module is used for rendering the first target chart and displaying the first target chart.

In a third aspect, the present application also provides a computer device. The computer device comprises a memory storing a computer program and a processor which when executing the computer program performs the steps of:

responding to a chart drawing request, and acquiring a first chart attribute;

calling a layer bus to draw a basic layer, drawing a first chart element to a graph context according to the first chart attribute on the basic layer, and generating a first target chart; wherein the layer bus comprises a plurality of sub-threads;

rendering and displaying the first target chart.

In a fourth aspect, the present application also provides a computer-readable storage medium. The computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of:

responding to a chart drawing request, and acquiring a first chart attribute;

calling a layer bus to draw a basic layer, drawing a first chart element to a graph context according to the first chart attribute on the basic layer, and generating a first target chart; wherein the layer bus comprises a plurality of sub-threads;

Rendering and displaying the first target chart.

In a fifth aspect, the present application also provides a computer program product. The computer program product comprises a computer program which, when executed by a processor, implements the steps of:

responding to a chart drawing request, and acquiring a first chart attribute;

calling a layer bus to draw a basic layer, drawing a first chart element to a graph context according to the first chart attribute on the basic layer, and generating a first target chart; wherein the layer bus comprises a plurality of sub-threads;

rendering and displaying the first target chart.

The method, the device, the computer equipment, the storage medium and the computer program product for drawing the graph draw the basic graph layer by calling the graph layer bus through the main thread, drawing the first graph element to the graph context according to the first graph attribute on the basic graph layer, and generating the first target graph. On one hand, the drawing can be processed in parallel because the layer bus comprises a plurality of sub-threads, so that drawing efficiency of the chart can be improved, and on the other hand, the main thread draws the chart by calling the layer bus, so that the process of drawing the chart does not occupy resources of the main thread, and the probability of blocking in page rendering can be reduced.

Drawings

FIG. 1 is a flow diagram of a method of diagramming in one embodiment;

FIG. 2 is a schematic diagram of a graph;

FIG. 3 is a schematic diagram of a chart in another embodiment;

FIG. 4 is a flow chart of a method of chart drawing in yet another embodiment;

FIG. 5 is a schematic diagram of generating a first target chart in one embodiment;

FIG. 6 is a diagram of preset chart properties in one embodiment;

FIG. 7 is a flow chart of a method of chart drawing in yet another embodiment;

FIG. 8 is a block diagram showing the structure of a drawing apparatus of a graph in one embodiment;

fig. 9 is an internal structural diagram of a computer device in one embodiment.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the present application will be further described in detail with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the present application.

The chart drawing method provided by the embodiment of the application can be applied to terminal equipment, the terminal responds to a chart drawing request to acquire a first chart attribute, calls a layer bus to draw a basic layer, draws a first chart element to a chart context on the basic layer according to the first chart attribute, and generates a first target chart; wherein the layer bus comprises a plurality of sub-threads; rendering and displaying the first target chart. The terminal can be, but not limited to, various desktop computers, notebook computers, smart phones, tablet computers, internet of things devices and portable wearable devices, and the internet of things devices can be smart speakers, smart televisions, smart air conditioners, smart vehicle devices and the like. The portable wearable device may be a smart watch, smart bracelet, headset, or the like.

In one embodiment, as shown in fig. 1, a chart drawing method is provided, and the method is applied to a terminal for illustration, and includes the following steps:

step 102, in response to the chart drawing request, a first chart attribute is acquired.

Wherein the main thread is used for responding to the operation of the user on the interface. For example, when a user requests to open a page with a chart, a first chart attribute is acquired in response to a chart drawing request. Specifically, when the mobile terminal opens a page with a chart in response to a user operation, a chart drawing request is triggered. Wherein the chart includes a graph graphically showing the statistical result, and a table showing the statistical data in the table. The chart is displayed in a screen, statistical information attributes (timeliness, quantity and the like) can be intuitively displayed, and a graph structure playing a key role in knowledge mining and information visual and vivid feeling is a good means for visually and vividly visualizing object attribute data. Types of charts include, but are not limited to, bar charts, line charts, pie charts, scatter charts, area charts, ring charts, radar charts, bubble charts, stock price charts, and the like. Based on the wide application of the chart, the chart drawing method can be applied to various application scenes, such as test result display, statistical result display, trend prediction and the like.

The first chart attribute is an attribute of a chart requested to be drawn, and includes attributes of elements in the chart, such as a text style, a text color, a table interval, a text paragraph interval, a character interval and the like.

The first graph attribute is derived from a service module, and the service module can selectively preset the graph attribute and also can utilize the graph attribute encapsulated by the layer bus. Specifically, the graph module stores the preset attribute by using a global dictionary in the layer bus, for example, a graph M is provided on the page a, and a graph N is provided on the page B. The dictionary can be preset with an attribute value of A line color (A_linecolor), A line width (A_linewidth) and A line background color (A_horLine0 bgColor). The dictionary may be preset with respect to B lines, and there are B line color (b_linecolor), B line width (b_linewidth), B line background color (b_horline 0 bgColor), and the like. If these attribute values are not set, default values are used.

Step 104, calling a layer bus to draw a basic layer, drawing a first chart element to a graph context on the basic layer according to a first chart attribute, and generating a first target chart; wherein the layer bus includes a plurality of sub-threads.

Specifically, the main thread calls a layer bus to draw a base layer, draws chart elements to a graph context according to a first chart attribute on the base layer, and generates a first target chart.

That is, in this embodiment, the graph drawing is implemented by calling the layer bus, and the multiple sub-layers of the layer bus are utilized to draw the graph, so that resources can be vacated for the main thread, and the user interaction can be responded in time. Wherein the layer bus utilizes a multithreading technique, multithreading: refers to a technique for implementing concurrent execution of multiple threads from software or hardware. Computers with multithreading capability are capable of executing more than one thread at a time due to hardware support, thereby improving overall processing performance. Common application scenarios are: multiple videos are downloaded simultaneously, and the downloading of each video can be managed by one thread. In this scheme, the graph drawing adopts a multi-threaded scheme.

The layer bus, which is based on multi-thread creation, is based on multi-threading to handle the dispatch or basic services of the layer. The layer bus comprises a plurality of sub-threads, and can asynchronously and concurrently draw charts.

Specifically, the main thread calls the layer bus to transfer the first graph attribute, then performs the initialization of the graph bus, and rewrites the layoutSubviews method inside the layer bus to draw the graph.

The basic layer is a base for drawing a chart and is used for adding chart lines, characters and background colors. One of the sub-threads of the layer bus creates a page layer (contentlyer) drawing the base layer for adding chart lines, text and background colors.

Graphics Context (Graphics Context), a data type used to store drawing Graphics output information, such as save drawing information and drawing state, can be viewed as a media tool for Graphics-to-device output.

Specifically, the uighactigectcurrentcontext () function is called, creating a context of type CGContextRef. Wherein one of the sub-threads of the layer bus creates a graphics context.

At least one sub-thread of the layer bus draws first chart elements to the graphics context on the base layer according to the first chart attributes based on the graphics context, generates a first target chart based on each first chart element of the graphics context.

The first chart element refers to each element in the target chart, and may include characters, lines, tables, and the like. The first chart element may be different depending on the chart type. Wherein, a chart element can be respectively drawn by utilizing a plurality of sub-threads of the layer bus. Such as where one of the sub-threads writes text, where one of the sub-threads draws a pattern, where one of the sub-threads draws a headline background, where one of the sub-threads draws a table, etc.

It will be appreciated that the first chart element in the different charts may be different, e.g., the chart is a table, and the first chart element includes a table, text, a background color in the table, etc. If the chart is a pie chart, the first chart element includes graphics, lines, fill colors, text, and the like. Thus, for different charts, a drawing manner may be defined in advance for each chart element. And drawing by the corresponding sub-thread according to a predefined drawing mode of each chart element.

Each sub-thread determines attribute information of the chart element according to the first chart attribute, wherein the attribute information comprises content, position, line color, line width and the like of the chart element. And each sub-thread calls a corresponding drawing method, and draws the drawing to the graphic context on the basic layer according to the attribute information of the chart element. Specifically, each sub-thread calls a predefined drawing method, draws on the basic graph, and stores the attribute of the chart element into the graph context.

And 106, rendering and displaying a first target chart.

Specifically, the first target graph may be loaded into the view by a main thread or a layer bus, and the shader and the window view are invoked to render, exposing the first target graph.

According to the graph drawing method, the main thread draws the basic graph layer by calling the graph layer bus, draws the first graph element to the graph context according to the first graph attribute on the basic graph layer, and generates the first target graph. On one hand, the drawing can be processed in parallel because the layer bus comprises a plurality of sub-threads, so that drawing efficiency of the chart can be improved, and on the other hand, the main thread draws the chart by calling the layer bus, so that the process of drawing the chart does not occupy resources of the main thread, and the probability of blocking in page rendering can be reduced.

In some business scenarios, data is analyzed from different dimensions, so that the data can be comprehensively analyzed, and at this time, the analysis results of each dimension can be displayed through different charts. That is, multiple charts may be provided for the same data, showing the analysis results in different dimensions. As shown in fig. 2, a comparison graph of the traffic volume of related traffic in different years is shown, and as shown in fig. 3, a graph of the energy duty ratio of related traffic in the same year is shown. When the first target chart is a traffic volume contrast chart of the related traffic shown in fig. 2 in different years, the user may trigger chart switching based on the first target chart to switch the chart shown in fig. 3.

Specifically, as shown in fig. 4, the graph drawing method includes the steps of:

in step 402, a first chart attribute is obtained in response to a chart drawing request.

Step 404, calling a layer bus to draw a basic layer, drawing a first chart element to a graph context on the basic layer according to the first chart attribute, and generating a first target chart; wherein the layer bus includes a plurality of sub-threads.

Step 406, rendering and displaying a first target chart.

The embodiments of step 402 to step 406 are the same as those of step 102 to step 106, and are not described here again.

Step 408, invoking a sub-thread of the layer bus to monitor a click event on a page of the first target chart, and acquiring a second chart attribute if the trigger chart conversion request is determined according to the click event.

The page of the first target chart refers to the page where the first target chart is located. The main thread invokes a child thread of the layer bus to monitor click events on pages of the first target graph.

Switching from the first target chart to the other charts is accomplished by providing a chart switching element on a page of the first target chart. The first target chart can be set as a chart switching element, hyperlinks of other charts are added for the first target chart, and when the first target chart is triggered, the first target chart is switched to the other charts. The chart switching button can be further arranged on the page of the first target chart, the chart switching button is linked to other charts, and when the chart switching button is triggered, the charts are switched to other charts.

And when the click event of the page of the first target chart is monitored, determining whether to trigger chart switching according to the position triggered by the click event. Specifically, when a click event on the chart switching element of the first target chart is detected, that is, when the click position is at the chart switching element, it may be determined to trigger the chart conversion request. If a click event is detected on the page of the first target chart, but the click event is not a click event on the chart switching element, that is, the click position is not in the chart switching element, the chart conversion request is not triggered.

And if the trigger chart conversion request is determined according to the click event, acquiring a second chart attribute. The second chart attribute is an attribute of the target switching chart.

Wherein the second chart attribute may be a modification of the changed attribute based on the first chart attribute. When the chart switching is triggered based on the service request, a layer bus opens a rendering channel, and monitors the attribute value of the changed element in the first chart attribute and the intermediate variable of the layer to obtain a second chart attribute.

In step 410, the plurality of sub-threads of the layer bus are invoked to draw a second chart element to the graphics context on the base layer according to the second chart attribute, generating a second target chart.

The second chart element is an element of the target switching chart, and the second chart element may include characters, lines, tables, and the like.

When the second target chart is generated in response to the chart switching request, based on the basic chart layer and the graph context provided by the first target chart, a plurality of sub-threads of the chart layer bus can be called to draw a second chart element to the graph context on the basic chart layer according to the second chart attribute, so that the second target chart is generated.

Wherein a child thread of the layer bus may be utilized to draw a chart element, respectively. Such as where one of the sub-threads writes text, where one of the sub-threads draws a pattern, where one of the sub-threads draws a headline background, where one of the sub-threads draws a table, etc.

It will be appreciated that the chart elements in different charts may be different, e.g., the chart is a table, and the chart elements include tables, text, background colors in the tables, etc. If the chart is a pie chart, the chart elements include graphics, lines, fill colors, text, and the like. Thus, for different charts, a drawing manner may be defined in advance for each chart element. And drawing by the corresponding sub-thread according to a predefined drawing mode of each chart element.

Each sub-thread determines attribute information of the chart element according to the first chart attribute, wherein the attribute information comprises content, position, line color, line width and the like of the chart element. And each sub-thread calls a corresponding drawing method, and draws the drawing to the graphic context on the basic layer according to the attribute information of the chart element. Specifically, each sub-thread calls a predefined drawing method, draws on the basic graph, and stores the attribute of the chart element into the graph context.

Step 412, render and display a second target chart.

Specifically, the second target graph may be loaded into the view by a main thread, or a layer bus, and the shader and window view are invoked to render, exposing the second target graph.

It can be appreciated that the user may trigger the chart switching request based on the page of the second target chart to continuously request to switch other target charts, and the adopted method is the same as the method for switching the second target chart based on the page showing the first target chart, which is not described herein.

In this embodiment, the sub-threads of the layer bus are used to monitor the click event to generate the first chart, so as to relieve the processing pressure of the main thread, so that the main thread can be separated to interact with the page object, and timely respond to user interaction.

Specifically, the method for determining whether to trigger the conversion request to the first target chart according to the click event comprises the following steps: determining the touch point position of a click event on a page of a first target chart; and traversing each area of the page of the first target chart according to the touch point position, and judging whether the touch point position is in the area of the chart switching element.

Specifically, the interaction mode of the user on the first target chart may include clicking, kneading, sliding, and the like. Wherein a click event may trigger a switch to a chart to switch to other charts. The pinching may trigger zooming in or out of the chart, and the first target chart may be made into a bitmap, and zooming in or out of the first target chart is performed when the pinching operation of the target chart is monitored. The sliding operation may trigger an adjustment to the display range of the chart, such as loading the rest of the page down, or reviewing the page content.

If the layer bus monitors a click event on a page of the first target chart, acquiring a touch point position, namely a click position, of the click event on the first target chart. And traversing each area of the page of the first target chart according to the touch point position, and judging whether the touch point position is in the area of the chart switching element. If the click event is within the region of the chart switching element, the click event is distributed to a click event handling module of the layer bus.

The chart switching element links the target switching chart, and when the clicking operation of the target switching element is monitored, the current first target chart is switched to the target switching chart. The first target chart can be set as a chart switching element, hyperlinks of other charts are added for the first target chart, and when the first target chart is triggered, the first target chart is switched to the other charts. The chart switching button can be further arranged on the page of the first target chart, the chart switching button is linked to other charts, and when the chart switching button is triggered, the charts are switched to other charts. For example, buttons may be provided on the pages of the chart shown in fig. 2, respectively representing different charts. When the button "chart 3" of the chart shown in fig. 2 triggers a click event, a switch to chart 3 is requested.

In this embodiment, monitoring the clicking event based on the first target graph depends on the layer bus, instead of the main thread, so that the main thread can be separated to interact with the page object, and timely respond to user interaction.

In another embodiment, the step of obtaining the second chart attribute comprises: determining a target switching chart corresponding to the chart switching element according to the chart switching element where the touch point is located; comparing the attribute of the target switching chart with the attribute of the first target chart, and monitoring the change attribute; and modifying the first target chart attribute according to the change attribute to obtain a second chart attribute.

Specifically, if a switch request to the first target graph is monitored, the target switch graph is determined. If the graph number of the target switching graph can be determined, the attribute of the target switching graph is obtained according to the graph number, the layer bus can start the rendering channel, the attribute of the first target graph is compared with the attribute of the target switching graph, the change attribute is determined, and the change attribute is modified on the basis of the first graph to obtain the second graph attribute. Therefore, when switching, the graph attribute does not need to be globally modified, and the change attribute only needs to be locally monitored.

Specifically, an intermediate variable generated when the first target chart is drawn is extracted according to a stack of a graph context (including coordinates, width and height, line length, sector diagram duty ratio and the like), the intermediate variable is sequenced, then copywithArrayData (array copy function) is called, a graph context monitor is arranged in a rendering channel and used for monitoring data change of a chart to be converted, and a changed attribute value is modified according to a receiver arranged by the monitor through the rendering channel, so that a second chart attribute is obtained.

One scenario may be to provide analysis presentation of different dimensions for data, as shown in fig. 2, a traffic volume comparison graph of related traffic in different years, as shown in fig. 3, and a energy duty ratio graph of related traffic in the same year. In this scenario, there may be more varying properties. One scenario may be to provide different forms of presentation, such as for data analysis results, bar graphs, pie charts, etc. In this scenario, the varying properties are relatively small. Regardless of the service scenario, when the user triggers the switching of the chart, the chart drawing is necessarily involved, and because chart attribute data required by the drawing is obtained by modifying the change attribute on the basis of the first chart, the chart attribute is not required to be globally modified during the switching, and only the change attribute is required to be locally monitored, so that the data processing efficiency is improved.

In another embodiment, as shown in fig. 5, invoking the plurality of sub-threads of the layer bus to draw the base layer and drawing the first chart element to the graphics context on the base layer according to the first chart attribute, respectively, generates the first target chart, including:

step 502, a child thread calling a layer bus creates a base layer.

Wherein the base layer is the basis for drawing the chart. One child thread of the layer bus creates a contentLayer for adding the base layer (layer) of chart lines, text, background colors.

At step 504, a child thread calling the layer bus creates a graphics context.

Specifically, graphics Context (Graphics Context), a data type used to store drawing Graphics output information, such as save drawing information and drawing state, can be viewed as a media tool for Graphics-to-device output.

Specifically, the uighactigectcurrentcontext () function is called, creating a graphic context of type CGContextRef. Wherein one of the sub-threads that invokes the layer bus creates a graphics context.

At step 506, the plurality of sub-threads of the layer bus are invoked to draw the first chart element to the graphics context based on the first chart attribute on the base layer.

At least one sub-thread of the layer bus draws a first chart element on the base layer according to the first chart attribute based on the graph context, and generates a first target chart based on each chart element drawn on the base layer.

Wherein the chart elements may include text, lines, tables, and the like. Wherein a child thread of the layer bus may be utilized to draw a chart element, respectively. Such as where one of the sub-threads writes text, where one of the sub-threads draws a pattern, where one of the sub-threads draws a headline background, where one of the sub-threads draws a table, etc.

It will be appreciated that the chart elements in different charts may be different, e.g., the chart is a table, and the chart elements include tables, text, background colors in the tables, etc. If the chart is a pie chart, the chart elements include graphics, lines, fill colors, text, and the like. Thus, for different charts, a drawing manner may be defined in advance for each chart element. And drawing by the corresponding sub-thread according to a predefined drawing mode of each chart element.

Each sub-thread determines attribute information of the chart element according to the first chart attribute, wherein the attribute information comprises content, position, line color, line width and the like of the chart element. And each sub-thread calls a corresponding drawing method, and draws the drawing to the graphic context on the basic layer according to the attribute information of the chart element. Specifically, each sub-thread calls a predefined drawing method, draws on the basic graph, and stores the attribute of the chart element into the graph context.

And step 508, generating a bitmap according to the graphic context to obtain a first target chart.

Specifically, the uighlics getimagefromcurrentimagecontext () is called to generate a bitmap (CGImage) object, and the bitmap object is assigned to the contentlyer to obtain a first target chart.

The method comprises the steps of calling a plurality of sub-threads of a layer bus to draw chart elements to a graph context on a base layer according to first chart attributes, wherein corresponding methods are called to draw the chart elements according to differences of the first chart elements. Multiple chart elements can be arranged in one chart, and the sub-threads of the chart layer bus respectively call the corresponding methods to draw the chart elements.

It may be appreciated that the process of calling the plurality of sub-threads of the layer bus to draw the second chart element to the graphics context according to the second chart attribute on the base layer, and generating the second target chart is similar to the process of generating the first target chart, in that the plurality of sub-threads of the layer bus are called to draw the second chart element to the graphics context according to the second chart attribute on the base layer on the basis of the created base layer and the graphics context, and the bitmap is generated according to the graphics context, so as to obtain the second target chart.

That is, the drawing method for the first chart element is the same as that for the second chart element. For convenience of explanation, in this embodiment, the drawing of the first chart element to the graphics context on the base layer according to the first chart attribute is taken as an example by calling multiple sub-threads of the layer bus.

For example, if the first chart element includes a headline context, invoking the plurality of sub-threads of the layer bus to draw the first chart element to the graphics context on the base layer according to the first chart attribute includes: the sub-thread of the calling layer bus determines a drawing coordinate range of the title background, a width of the title background, a height of the title background and a background color from the first chart attribute, and draws the title background to the graphic context on the base layer according to the drawing coordinate range, the width of the title background, the height of the title background and the background color.

Specifically, a drawing coordinate range of the title background, a width of the title background, a height of the title background, and a background color are determined from the first chart attribute, CGContextMoveToPoint and cgcontextaddlinetoppoint are called, and the title background is drawn to the graphic context on the base layer according to the drawing coordinate range, the width of the title background, the height of the title background, and the background color, specifically, the drawing coordinate range of the incoming graphic context, the width of the title background, the height of the title background, and the background color.

For another example, if the first chart element is an outer polygon, determining a coordinate range, a line type and a line width of the outer polygon from the first chart attribute, calling CGContextStrokePath (line drawing function), drawing the outer polygon to the graphics context on the base chart layer according to the coordinate range, the line type and the line width, and specifically, inputting the coordinate range, the line type and the line width of the outer polygon to the graphics context.

For another example, the first chart element includes a table, the plurality of sub-threads invoking the layer bus draw the first chart element to a graphics context on the base layer according to the first chart attribute, including: and invoking a sub-thread of the layer bus to determine attribute information of the table from the first chart attribute, and drawing the table to the graph context on the basic layer according to the attribute information of the table. The attributes of the table include a table coordinate range, a table line width, a table height, a table width, a table line number, a table column number, a line color and the like.

For another example, the first chart element includes text; invoking the plurality of sub-threads of the layer bus to draw the first chart element to the graphics context according to the first chart attribute on the base layer, comprising: invoking a sub-thread of a layer bus to determine attribute information of characters from the first chart attribute, wherein the attribute information of the characters at least comprises a line number and a column number of the characters or an angle of the characters relative to a graph; determining rich text attributes according to attribute information of the characters; the text is drawn to the graphics context based on the rich text attribute on the base layer.

Before drawing the text, the layer bus also creates NSParaggraphStyle (paragraph attribute function) for saving the style of displaying the chart text, wherein the attributes include font, font color, character spacing, underline, stroke width, shadow attribute, font gradient, writing direction, connection attribute, paragraph spacing and the like.

Specifically, if the characters are drawn in the table, two layers of loops are started, the outer layer of loops determines the current column, the inner layer of loops determines the current row to take the value, namely, the row number and the column number of the drawn characters in the chart are determined. If the text is drawn in the graph, an asin () (arcsine function) or other Guan Sanjiao function is used to determine the angle of the text relative to the graph. And determining rich text according to the character attribute, and drawing the characters to the graphic context on the base layer according to the rich text attribute. Specifically, a drawInRect-witt text methods is called to draw, and Rect and NSParaggraphStyle related rich text attributes are transferred to the graphics context.

It is to be understood that the first chart element is not limited to the elements exemplified above, but may be more. And the sub-thread of the layer bus is called to determine the attribute information of the first chart element from the first chart attribute, and the table is drawn to the graph context on the basic layer according to the attribute information of the first chart element.

Specifically, the layer bus can be packaged into a chart application module, an access party can customize a preset chart style, the layer bus is called by a main thread, chart data can be transmitted to generate a chart, and portability and expansibility are high.

Specifically, the layer bus provides a preset CHART class (TX char) to the outside for creating a CHART view, and starts with @ property as an externally preset CHART object attribute, which is a type, a field name, and an explanation, as shown in fig. 6.

When the packaged layer bus is used for drawing the chart, the preset attribute can not be transmitted, and the default value is arranged in the preset chart class. The business module can also be created by initWithArrayData, and the target chart can be generated by inputting chart data. When clicking the chart, the service module can transmit click attributes to acquire click coordinates to realize the distribution of events so as to improve the expansibility of chart conversion. As shown in fig. 7, the graph plotting method includes:

and step 1, setting a chart style.

Specifically, the external module (refer to a service module for drawing a chart using the scheme) can selectively preset the style attribute of the chart according to the requirement, for example, a chart style can be set by using preset attribute provided by the chart layer bus, and the chart style can be called by calling the chart style transmitted by the chart layer bus.

And 2, generating a global dictionary.

Specifically, a preset chart class stores preset attributes by using a global dictionary in the layer bus, for example, a chart M exists in a page A, and a chart N exists in a page B. The preset key values in the dictionary are A_linecolor, A_linewidth and A_horLine0bgColor; b_linecolor, b_linewidth, b_horline0bgColor, etc. If these attribute values are not set, default values are used.

And step 3, calling graph data transmitted by a layer bus to generate a first target graph.

Specifically, initWithArrayData is called, and chart data is imported into the layer bus. And initializing a layer bus after the chart data are input. When the chart is drawn by rewriting the layoutviews method inside a preset chart class (TXChart), and in one embodiment, the chart element includes a title background, an outer polygon, and a document content, the method may include the following steps:

1. a contentlyer is created for adding a base layer (layer) of chart lines, text, background colors.

2. NSParaggraphStyle is created for saving styles for displaying chart text, wherein the attributes are font, font color, character spacing, underlining, stroke width, shading attributes, font inclination, writing direction, connection attributes, paragraph spacing, and the like.

3. The uighaphicsgetcurrentcontext () function is called to create a graphics context (similar to a state machine, used to save the context of the currently rendered graphics) of the type CGContextRef.

4. Drawing a horizontal and vertical title background; calling CGContextMoveToPoint and CGContextAddLineToPoint, and inputting context and required coordinates, and drawing lines with wide and high; call cgcontextfilepath incoming context. Specifically, CGContextMoveToPoint and CGContextAddLineToPoint are called, and the title background is drawn to the graphics context, specifically, the incoming graphics context drawing coordinate range, the width of the title background, the height of the title background, and the background color, based on the drawing coordinate range, the width of the title background, the height of the title background, and the background color on the base layer.

5. Drawing an outer polygon, and drawing a horizontal line and a vertical line. And calling CGContextStrokePath, and transmitting context. Specifically, a CGContextStrokePath (line drawing function) is called, and an outer polygon is drawn to a graphics context on a base layer according to a coordinate range, a line type and a line width, specifically, the coordinate range, the line type and the line width of the outer polygon are input to the graphics context.

6. And if the graph is the graph, adopting an asin () related trigonometric function to acquire the angle through the angle. Calling a drawInRect, a withAttributes method, and transmitting related rich text attributes of Rect and NSParagrapStyle. Specifically, if the characters are drawn in the table, two layers of loops are started, the outer layer of loops determines the current column, the inner layer of loops determines the current row to take the value, namely, the row number and the column number of the drawn characters in the chart are determined. If the text is drawn in the graph, an asin () (arcsine function) or other Guan Sanjiao function is used to determine the angle of the text relative to the graph. And determining rich text according to the character attribute, and drawing the characters to the graphic context on the base layer according to the rich text attribute. Specifically, a drawInRect-witt text methods is called to draw, and Rect and NSParaggraphStyle related rich text attributes are transferred to the graphics context.

7. Generating a bitmap according to the graphic context to obtain a chart.

Specifically, the uighactigraphy getimagefromcurrentimagecontext () is called to generate a bitmap (CGImage) object, and the bitmap object is assigned to the contentlyer to obtain the chart.

And step 4, monitoring whether to trigger the chart switching. If yes, go to step 5.

Determining the touch point position of the clicking event on the page of the first target chart, traversing each area of the page of the first target chart according to the touch point position, judging whether the touch point position is in the area of the chart switching element, and monitoring chart conversion.

And 5, detecting a clicking event, and converting the chart.

Specifically, a second chart attribute is obtained, a plurality of sub-threads of the layer bus are called, chart elements are drawn to a graph context on a base layer according to the second chart attribute, and a second target chart is generated.

If the external module needs to convert the current chart, the layer bus starts a rendering channel, the intermediate variable generated in 1-7 steps is extracted according to a context stack (including coordinates, width and height, line length, sector diagram duty ratio and the like), the intermediate variable is sequenced and then is called to copy WithArrayData, a context monitor is arranged in the rendering channel and used for monitoring the data change of the chart to be converted, and the changed value is modified according to a receiver arranged by the monitor through the rendering channel. And finally, drawing the converted chart style, wherein the process is the same as the steps 3-7.

According to the method and the device, the chart and the data are asynchronously drawn through multiple threads, so that the time for creating the UI view (UIView) by the main thread can be saved, and the main thread can receive and process the operation of a user more quickly. By providing the externally packaged layer bus, the access party can customize a preset chart style, and can generate a chart by inputting chart data, so that the portability and the expansibility are strong.

It should be understood that, although the steps in the flowcharts related to the embodiments described above are sequentially shown as indicated by arrows, these steps are not necessarily sequentially performed in the order indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps in the flowcharts described in the above embodiments may include a plurality of steps or a plurality of stages, which are not necessarily performed at the same time, but may be performed at different times, and the order of the steps or stages is not necessarily performed sequentially, but may be performed alternately or alternately with at least some of the other steps or stages.

Based on the same inventive concept, the embodiment of the application also provides a chart drawing device for realizing the chart drawing method. The implementation of the solution provided by the device is similar to the implementation described in the above method, so the specific limitation in the embodiments of the chart drawing device or devices provided below may refer to the limitation of the chart drawing method hereinabove, and will not be repeated herein.

In one embodiment, as shown in fig. 8, there is provided a chart drawing apparatus including:

an obtaining module 802 is configured to obtain a first chart attribute in response to a chart drawing request.

The chart processing module 804 is configured to invoke a layer bus to draw a base layer, draw a first chart element to a graph context according to the first chart attribute on the base layer, and generate a first target chart; wherein the layer bus includes a plurality of sub-threads.

A rendering module 806, configured to render and display the first target chart.

According to the chart drawing device, the main thread draws the basic chart layer by calling the chart layer bus, draws the first chart element to the chart context according to the first chart attribute on the basic chart layer, and generates the first target chart. On one hand, the drawing can be processed in parallel because the layer bus comprises a plurality of sub-threads, so that drawing efficiency of the chart can be improved, and on the other hand, the main thread draws the chart by calling the layer bus, so that the process of drawing the chart does not occupy resources of the main thread, and the probability of blocking in page rendering can be reduced.

In another embodiment, the chart processing module is further configured to call a sub-thread of the layer bus to monitor a click event on a page of the first target chart, and acquire a second chart attribute if the trigger chart conversion request is determined according to the click event; calling a plurality of sub-threads of a layer bus to draw a second chart element to the graph context on the basic layer according to a second chart attribute, and generating a second target chart; and rendering and displaying a second target chart.

In another embodiment, the chart processing module is configured to determine a touch point position of the click event on the page of the first target chart; and traversing each area of the page of the first target chart according to the touch point position, and judging whether the touch point position is in the area of the chart switching element.

In another embodiment, the chart processing module is configured to determine, according to a chart switching element where the touch point is located, a target switching chart corresponding to the chart switching element; comparing the attribute of the target switching chart with the attribute of the first target chart, and monitoring the change attribute; and modifying the first target chart attribute according to the change attribute to obtain a second chart attribute.

In another embodiment, the graph processing module is configured to call a child thread of the layer bus to create a base layer; invoking a child thread of a layer bus to create a graphics context; invoking a plurality of sub-threads of a layer bus to draw a chart element to a graph context on a base layer according to a first chart attribute; and generating a bitmap according to the graphic context to obtain a first target chart.

In another embodiment, the first chart element includes a title background; and the chart processing module is used for calling the sub-thread of the chart layer bus to determine the drawing coordinate range of the title background, the width of the title background, the height of the title background and the background color from the first chart attribute, and drawing the title background to the graph context on the base chart layer according to the drawing coordinate range, the width of the title background, the height of the title background and the background color.

In another embodiment, the first chart element includes a table, and the chart processing module is configured to call a sub-thread of the layer bus to determine attribute information of the table from the first chart attribute, and draw the table to the graphics context on the base layer according to the attribute information of the table.

In another embodiment, the first chart element includes text. The chart processing module is used for calling a sub-thread of the chart layer bus to determine attribute information of characters from the first chart attribute, wherein the attribute information of the characters at least comprises a line number and a column number of the characters or an angle of the characters relative to a graph; determining rich text attributes according to attribute information of the characters; the text is drawn to the graphics context based on the rich text attribute on the base layer.

The respective modules in the above-described graph processing apparatus may be implemented in whole or in part by software, hardware, and combinations thereof. The above modules may be embedded in hardware or may be independent of a processor in the computer device, or may be stored in software in a memory in the computer device, so that the processor may call and execute operations corresponding to the above modules.

In one embodiment, a computer device is provided, which may be a terminal, and the internal structure thereof may be as shown in fig. 9. The computer device includes a processor, a memory, an input/output interface, a communication interface, a display unit, and an input means. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface, the display unit and the input device are connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The input/output interface of the computer device is used to exchange information between the processor and the external device. The communication interface of the computer device is used for carrying out wired or wireless communication with an external terminal, and the wireless mode can be realized through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. The computer program is executed by a processor to implement a graph processing method. The display unit of the computer equipment is used for forming a visual picture, and can be a display screen, a projection device or a virtual reality imaging device, wherein the display screen can be a liquid crystal display screen or an electronic ink display screen, the input device of the computer equipment can be a touch layer covered on the display screen, can also be a key, a track ball or a touch pad arranged on a shell of the computer equipment, and can also be an external keyboard, a touch pad or a mouse and the like.

It will be appreciated by those skilled in the art that the structure shown in fig. 9 is merely a block diagram of a portion of the structure associated with the present application and is not limiting of the computer device to which the present application applies, and that a particular computer device may include more or fewer components than shown, or may combine some of the components, or have a different arrangement of components.

In one embodiment, a computer device is provided that includes a memory having a computer program stored therein and a processor that when executing the computer program performs the steps of the graph processing method of the above embodiments.

In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored, which when executed by a processor implements the steps of the graph processing method of the above embodiments.

In an embodiment, a computer program product is provided, comprising a computer program which, when executed by a processor, implements the steps of the graph processing method of the above embodiments.

Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, database, or other medium used in the various embodiments provided herein may include at least one of non-volatile and volatile memory. The nonvolatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical Memory, high density embedded nonvolatile Memory, resistive random access Memory (ReRAM), magnetic random access Memory (Magnetoresistive Random Access Memory, MRAM), ferroelectric Memory (Ferroelectric Random Access Memory, FRAM), phase change Memory (Phase Change Memory, PCM), graphene Memory, and the like. Volatile memory can include random access memory (Random Access Memory, RAM) or external cache memory, and the like. By way of illustration, and not limitation, RAM can be in the form of a variety of forms, such as static random access memory (Static Random Access Memory, SRAM) or dynamic random access memory (Dynamic Random Access Memory, DRAM), and the like. The databases referred to in the various embodiments provided herein may include at least one of relational databases and non-relational databases. The non-relational database may include, but is not limited to, a blockchain-based distributed database, and the like. The processors referred to in the embodiments provided herein may be general purpose processors, central processing units, graphics processors, digital signal processors, programmable logic units, quantum computing-based data processing logic units, etc., without being limited thereto.

The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the description.

The above examples only represent a few embodiments of the present application, which are described in more detail and are not to be construed as limiting the scope of the present application. It should be noted that it would be apparent to those skilled in the art that various modifications and improvements could be made without departing from the spirit of the present application, which would be within the scope of the present application. Accordingly, the scope of protection of the present application shall be subject to the appended claims.

Claims (10)

1. A chart drawing method, characterized in that the method comprises:

responding to a chart drawing request, and acquiring a first chart attribute;

calling a layer bus to draw a basic layer, drawing a first chart element to a graph context according to the first chart attribute on the basic layer, and generating a first target chart; wherein the layer bus comprises a plurality of sub-threads;

Rendering and displaying the first target chart.

2. The method of claim 1, further comprising, after presenting the first target chart:

invoking a sub-thread of the layer bus to monitor a click event of a page of the first target chart, and acquiring a second chart attribute if a chart conversion request is determined to be triggered according to the click event;

invoking a plurality of sub-threads of the layer bus to draw a second chart element to a graph context on the base layer according to the second chart attribute, and generating a second target chart;

rendering and displaying the second target chart.

3. The method of claim 2, wherein determining whether to trigger a transition request to the first target graph based on the click event comprises:

determining the touch point position of the click event on the page of the first target chart;

and traversing each area of the page of the first target chart according to the touch point position, and judging whether the touch point position is in the area of the chart switching element.

4. A method according to claim 3, wherein the step of obtaining a second chart attribute comprises:

Determining a target switching chart corresponding to the chart switching element according to the chart switching element where the touch point is located;

comparing the attribute of the target switching chart with the attribute of the first target chart, and monitoring the change attribute;

and modifying the first target chart attribute according to the change attribute to obtain a second chart attribute.

5. The method of claim 1, wherein the invoking the layer bus draws a base layer on which to draw a first chart element to a graphics context according to the first chart attribute, generating a first target chart, comprising:

calling a child thread of a layer bus to create a base layer;

invoking a child thread of a layer bus to create a graphics context;

invoking a plurality of sub-threads of a layer bus to draw a first chart element to the graphics context on the base layer according to the first chart attribute;

and generating a bitmap according to the graphic context to obtain a first target chart.

6. The method of claim 5, wherein the first chart element comprises a title background; invoking a plurality of sub-threads of a layer bus to draw a first chart element to the graphics context on the base layer according to the first chart attribute, comprising:

And invoking a sub-thread of a layer bus to determine a drawing coordinate range of a title background, a width of the title background, a height of the title background and a background color from the first chart attribute, and drawing the title background to the graphic context on the base layer according to the drawing coordinate range, the width of the title background, the height of the title background and the background color.

7. The method of claim 5, wherein the first chart element comprises a table; invoking a plurality of sub-threads of a layer bus to draw a first chart element to the graphics context on the base layer according to the first chart attribute, comprising:

and invoking a sub-thread of a layer bus to determine attribute information of a table from the first chart attribute, and drawing the table to the graph context on the basic layer according to the attribute information of the table.

8. The method of claim 5, wherein the first chart element comprises text; invoking a plurality of sub-threads of a layer bus to draw a first chart element to the graphics context on the base layer according to the first chart attribute, comprising:

invoking a sub-thread of a layer bus to determine attribute information of characters from the first chart attribute, wherein the attribute information of the characters at least comprises a line number and a column number of the characters or an angle of the characters relative to a graph;

Determining rich text attributes according to the attribute information of the characters;

drawing characters to the graphics context according to the rich text attribute on the base layer.

9. A chart drawing apparatus, characterized in that the apparatus comprises:

the acquisition module is used for responding to the chart drawing request and acquiring a first chart attribute;

the chart processing module is used for calling a chart layer bus to draw a basic chart layer, drawing a first chart element to a chart context on the basic chart layer according to the first chart attribute and generating a first target chart; wherein the layer bus comprises a plurality of sub-threads;

and the rendering module is used for rendering the first target chart and displaying the first target chart.

10. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor implements the steps of the method of any one of claims 1 to 8 when the computer program is executed.