chart

The <chart> component displays line charts, gauge charts, and bar charts.

NOTE

The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

Attributes

In addition to the universal attributes, the following attributes are supported.

Table 1 ChartOptions

Table 2 ChartDataset

Table 3 ChartAxis

Table 4 ChartSeries

Table 5 ChartLineStyle

Table 6 PointStyle

Table 7 ChartLoop

Table 8 Point

Table 9 DataSegment

For the gauge charts, the following attributes are also supported.

Styles

In addition to the universal styles, the following styles are supported.

Events

The universal events are supported.

Example

1. Line chart

   <!-- xxx.hml -->
   <div class="container">
     <stack class="chart-region">
       <image class="chart-background" src="common/background.png"></image>
       <chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
     </stack>
   </div>

   /* xxx.css */
   .container {
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
   .chart-region {
     height: 400px;
     width: 700px;
   }
   .chart-background {
     object-fit: fill;
   }
   .chart-data {
     width: 700px;
     height: 600px;
   }

   // xxx.json
   {
     "data": {
       "lineData": [
         {
           "strokeColor": "#0081ff",
           "fillColor": "#cce5ff",
           "data": [
             763,
             550,
             551,
             554,
             731,
             654,
             525,
             696,
             595,
             628,
             791,
             505,
             613,
             575,
             475,
             553,
             491,
             680,
             657,
             716
           ],
           "gradient": true
         }
       ],
       "lineOps": {
         "xAxis": {
           "min": 0,
           "max": 20,
           "display": false
         },
         "yAxis": {
           "min": 0,
           "max": 1000,
           "display": false
         },
         "series": {
           "lineStyle": {
             "width": "5px",
             "smooth": true
           },
           "headPoint": {
             "shape": "circle",
             "size": 20,
             "strokeWidth": 5,
             "fillColor": "#ffffff",
             "strokeColor": "#007aff",
             "display": true
           },
           "loop": {
             "margin": 2,
             "gradient": true
           }
         }
       }
     }
   }

4 x 4 widget

1. Bar chart

   <!-- xxx.hml -->
   <div class="container">
     <stack class="data-region">
       <image class="data-background" src="common/background.png"></image>
       <chart class="data-bar" type="bar" id="bar-chart" options="{{barOps}}" datasets="{{barData}}"></chart>
     </stack>
   </div>

   /* xxx.css */
   .container {
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
   .data-region {
     height: 400px;
     width: 700px;
   }
   .data-background {
     object-fit: fill;
   }
   .data-bar {
     width: 700px;
     height: 400px;
   }

   {
     "data": {
       "barData": [
         {
           "fillColor": "#f07826",
           "data": [763, 550, 551, 554, 731, 654, 525, 696, 595, 628]
         },
         {
           "fillColor": "#cce5ff",
           "data": [535, 776, 615, 444, 694, 785, 677, 609, 562, 410]
         },
         {
           "fillColor": "#ff88bb",
           "data": [673, 500, 574, 483, 702, 583, 437, 506, 693, 657]
         }
       ],
       "barOps": {
         "xAxis": {
           "min": 0,
           "max": 20,
           "display": false,
           "axisTick": 10
         },
         "yAxis": {
           "min": 0,
           "max": 1000,
           "display": false
         }
       }
     }
   }

4 x 4 widget

1. Gauge chart

   <!-- xxx.hml -->
   <div class="container">
     <div class="gauge-region">
       <chart class="data-gauge" type="gauge" percent = "50"></chart>
     </div>
   </div>

   /* xxx.css */
   .container {
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
   .gauge-region {
     height: 400px;
     width: 400px;
   }
   .data-gauge {
     colors: #83f115, #fd3636, #3bf8ff;
     weights: 4, 2, 1;
   }

4 x 4 widget

你可能感兴趣的鸿蒙文章

harmony 鸿蒙JS Service Widget UI Components

harmony 鸿蒙Data Types

harmony 鸿蒙button

harmony 鸿蒙calendar

harmony 鸿蒙clock

harmony 鸿蒙divider

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙progress

harmony 鸿蒙span