FineReport Introducing Qunee for HTML5- FineBI Help Document

Last update：January 03, 2024

Product Version	JAR Package	Plugin Version	App Version
FineReport 10.0	2019/xx/xx	/	It is not supported on mobile terminals.

Description

Application Scenario

The relational graph plugin and flow chart plugin provided by FineReport cannot meet the customer's drawing needs, and they want to import the topological graphs made by Qunee for HTML5 to the report.

Qunee component uses HTML5 technology and can provide solutions for making social network graph, maps, mind maps, flow charts, etc. By manually connecting components, you can see the chart code. It is simple and light. For details, see the official website of Qunee for HTML5.

Function Description

It is to display the topological graphs created using Qunee for HTML5 in the report and preserve the basic interactive effects of the graphs, as shown below.

Demonstration

Drawing a Qunee Graph

Run codes in Qunee to draw a graph. Here a demo on its official website is taken as an example.

<!DOCTYPE html>
<html>
<head>
    <title>Hello Qunee for HTML5</title>
    <meta charset="utf-8">
</head>
<body>
<div style="height: 500px;" id="canvas"/>
<script src="http://demo.qunee.com/lib/qunee-min.js"></script>
<script>
    var graph = new Q.Graph('canvas');
    var hello = graph.createNode("Hello", -100, -50);
    hello.image = Q.Graphs.server;
    var qunee = graph.createNode("Qunee", 100, 50);
    var edge = graph.createEdge("Hello\nQunee", hello, qunee);
    edge.setStyle(Q.Styles.LABEL_OFFSET_Y, -10);
    edge.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP);
    edge.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM);
    edge.setStyle(Q.Styles.LABEL_BORDER, 1);
    edge.setStyle(Q.Styles.LABEL_POINTER, true);
    edge.setStyle(Q.Styles.LABEL_PADDING, new Q.Insets(2, 5));
    edge.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT,
            Q.Gradient.LINEAR_GRADIENT_VERTICAL);
</script>
</body>
</html>

Template Design

1. Merge appropriate cells and enter the following text.

<div style="height: 500px;" id="canvas"/>

canvas is the name of the chart defined in the code in Section 2.1.

2. Choose Cell Attributes > Others > Advanced, and set Display Content to Display by HTML.

3. Add a Loading End Event

Choose Template > Web Attribute > Pagination Preview, choose Set for This Template Separately, and add a loading end event. The event content is the code between the second group of <script> and </script> in the Qunee graph code, as shown below.

    var graph = new Q.Graph('canvas');

    var hello = graph.createNode("Hello", -100, -50);
    hello.image = Q.Graphs.server;
    var qunee = graph.createNode("Qunee", 100, 50);
    var edge = graph.createEdge("Hello\nQunee", hello, qunee);
    edge.setStyle(Q.Styles.LABEL_OFFSET_Y, -10);
    edge.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP);
    edge.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM);
    edge.setStyle(Q.Styles.LABEL_BORDER, 1);
    edge.setStyle(Q.Styles.LABEL_POINTER, true);
    edge.setStyle(Q.Styles.LABEL_PADDING, new Q.Insets(2, 5));
    edge.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT,
            Q.Gradient.LINEAR_GRADIENT_VERTICAL);

Note:

Data Entry Preview is also supported, and the steps to add a loading end event are the same.

4. Referencing JavaScript

Choose Template > Web Attribute > Reference JavaScript, select Absolute Path, and enter the path between the first group of <script> and </script> in the Qunee graph code.

http://demo.qunee.com/lib/qunee-min.js

Click Add and then click OK.

Effect View

The PC side preview effect is shown in the Function Description.

Pagination Preview and Data Entry Preview are supported.

It is not supported on mobile devices as mobile devices do not support referencing JavaScript.

Finished Template

Download the template: Qunee.cpt

Next：Update History

Helpful
Not helpful
Only read

中文（简体）中文（繁體）日本語

English

FineReport Introducing Qunee for HTML5