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);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
Previous：Common Chart Export Issues and Troubleshooting
