In this example, the digital card flip component displays the real-time data addition results of the other two digital card flip components to achieve the dynamic data addition effect.
Procedure
- Log on to the DataV console.
Select a visualization application and click Edit to go to the Canvas Editor page.
Add three Tagging Pair widget components to the canvas.
Click a data ticker board, select the configuration panel, and change the Title> Title Name to First Half Year Sales. In the Layer panel, double-click the name to change the name to Number ticker board-First Half Year. Repeat the operation to configure the other two digital flip card components.
Select all components and right-click Export to Blueprint Editor.
Add a serial processing node and a sequence execution node to connect components.
Serial processing node: implements random data generation by clicking the number flip. The two nodes are processed in the same way, and the data for the second half of the year is generated by adding random numbers again on the basis of the first half of the year.
var value = Math.random() * 10000 return [ { "name": "", "value": 12345 + value } ]
Sequence execution node: First, the data is saved as a temporary variable, and then the two number flip cards are added and imported into the display component.
// Variable A return { data: [ { name: "up", value: data[0].value || 0 } ] };
// variable B return { data: [ { name: "down", value: data[0].value || 0 } ] };
//A + variable B let dowm = getLocalValue('dowm') || 0; let res = data && data.length !== 0 ? data[0].value + dowm : down return [{ value: res }];
//B + variable A let up = getLocalValue('up') || 0; let res = data && data.length !== 0 ? data[0].value + up : up return [{ value: res }];
Click the
icon in the upper-right corner to preview the results.