Realize the Dynamic Style

Procedure

1. Log on to the DataV console.

2. Select a visualization application and click Edit to open the Canvas Editor.

3. Add a tab list widget and a ticker board widget to the canvas.

4. In the left-side navigation pane, click the Tab List widget. On the Data tab, click Configure Data Source in the Static Data Source section and change the data content to two entries.

5. In the Configure panel, change the Title to Change Color by Value.

6. In the Layer panel, select all widgets, right-click, and choose Export to Blueprint Editor.

7. Connect the components and rename the processing method of the Serial Data Processing node.

8. Configure the processing method of the Serial Data Processing node as follows:

   • Update the flip value

     return [{value: data.id == 1 ? 30 : 50}];

   • Configure digit colors

     1. Return to the Canvas Editor page. Click the Tickerboard widget. In the right-side configuration panel, click Copy Configuration to Clipboard.

     2. Paste the copied content into a code editor, examine the data hierarchy, and locate the configuration field you want to update.

     3. Write the configuration script based on the data structure shown in the preceding figure.

        return data[0].value - 40 >= 0 ? {
          "counter": {
            "numbers": {
              "textStyle": {
                "color": {
                  "type":"flat",
                  "value":"red"// The color of the data to be modified.
                }
              }
            }
          }
        } : {
            "counter": {
              "numbers": {
                "textStyle": {
                  "color": {
                  "type":"flat",
                  "value":"rgb(10,115,255)"// The initial color
                }
                  
                }
              }
            }
          }

9. Click the icon in the upper-right corner to preview the result.