I. Overview
The role of data visualization in data analysis is self-evident, mainly by means of graphical and it means to convey and communicate information clearly and effectively. Interactive visualization allows decision makers to quickly understand the meaning behind the data, gain insight into the level of detail, and provide accurate opinions for decision analysis.
Through the study of this chapter, you can master the basic skills and learn how to make a large screen quickly and effectively.
II. Related knowledge
1. Understand large-screen data visualization
2. Dashboard
1)Introduction to Dashboard
The FineReport dashboard adopts a canvas-style operation interface, which is specially designed for large screens and mobile terminals. Through simple drag and drop operations, it can help users build a powerful and comprehensive "management cockpit" and integrate different corporate data on the same page. , It perfectly displays all kinds of business indicators of the enterprise and realizes multi-dimensional analysis of data.
For details, please see: Introduction to Decision Reports
2)Introduction to Components
All components have been added to the dashboard to help you understand the meaning of each component, as shown in the following figure:
For details, please refer to: Introduction to Decision Report Component
3. Visualization components
1)Basic chart
The HTML5 chart independently developed by FanRuan has excellent dynamic effects and powerful interactive experience, provides super personalized settings, and can be perfectly displayed on a variety of terminal devices.
We introduced some typical new chart making methods, and introduced how to set the chart style, so that users can independently produce professional and beautiful analysis charts.
For details, please refer to: [New] List of usage scenarios of each chart
2)Extended chart
In order to meet the animation and automatic playback effects in scenes such as large screens, the Fanruan team has newly developed this plugin based on technologies such as WebGL. The plugin contains some new charts with novel display shapes or cool display effects. At the same time, the plugin will be continuously updated to ensure the richness of the content.
For details, please see: Extended Chart Plugin
III. Quick Start
1. Preliminary preparation
Conduct business demand research and extract key indicators based on business scenarios
Determine the type of visualization
The ultimate goal of visualization is to convey information more clearly, that is, what graphics are used to display data is very important. The data of the same indicator can have different results when analyzed from different dimensions. After we determine a certain data relationship type, we can find the corresponding chart and usage suggestions according to the usage scenario of the data, and choose among them.
2. Typographic layout
To clarify the purpose of the large screen display is primarily to serve the business. To display business content and data in a reasonable manner, it is necessary to avoid going astray into crazy stacking of indicators, and to distinguish between primary and secondary. What are the main indicators? It reflects the core business content. What are the secondary indicators? It is usually used to further elaborate the main indicators. We must let the beauty of data bloom on the basis of the value of data.
Here are a few common layouts for everyone:
The above several layouts are not Jinke’s laws, but the usually recommended primary and secondary distribution layouts, which can make the information clear at a glance. In actual projects, more complicated situations may be encountered, and there are more indicators to be displayed.
In addition to the primary and secondary distribution, there is also an average distribution, just fine-tune it according to our basic principles
3. Color matching
A reasonable layout can make business content richer, and a reasonable color scheme can make viewers more comfortable.
1)Body background
The choice of background should follow two basic principles: dark tone & consistency
Here are some recommended color schemes for everyone:
It's not that the background must use colors, but dark pictures can also be used. It can be combined with other realistic features to make the overall look more technological. It is recommended to use pictures with stars, stripes, gradient lines, embellishment effects, etc.
2)Unified chart series and label color matching
Set the background of a single chart is usually None, set the series color uniformly, modify the label and axis color
Tips: Pre-set the pre-defined color of the chart, and uniformly change the color of the chart series
3)Set title font size and color
Set the main title of the big screen
Unified component title size and color
Setting method:Components>Style>Custom>Title
4. Embellishment
On the large-screen display, details will greatly affect the overall effect. It is necessary to add some embellishment effects such as borders, pictures, etc. to the elements, titles, numbers, etc., to help improve the overall aesthetics.
5. Dynamic effects
The range of dynamic effects is very wide and can be interpreted from many angles. The rich dynamic effects can make the big screen look full of technology and make the big screen display more cool. Reasonable use of dynamic effects can help us quickly understand the relationship between data and provide guiding significance for decision-making analysis.
1)Large-screen visualization plug-in (extended chart)
Newly developed based on technologies such as WebGL, the purpose is to allow each user to achieve various effects such as automatic playback, 3D animation special effects, etc. through simple drag and drop. At the same time, it can also display data in multiple dimensions to enhance the visual effect of the large screen.
2)Dynamic Effect Index
tab Block、Chart Manual Switch、Report block monitoring refresh、Chart Data Auto Refresh、Map Automatic Refresh、Chart flashes 、 Report block scrolling、Dynamic border, dynamic background image、The chart opens the automatic data point prompt carousel interface、Automatic linkage with other components during carousel
