鸿蒙5.0开发进阶：ArkUI框架-JS基础组件（chart）

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

chart

图表组件，用于呈现线形图、柱状图、量规图界面。

说明

从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

不支持。

属性

除支持通用属性外，还支持如下属性：

表1 ChartOptions

表2 ChartDataset

表3 ChartAxis

表4 ChartSeries

表5 ChartLineStyle

表6 PointStyle

表7 ChartLoop

表8 Point

表9 DataSegment

当类型为量规图时，还支持如下属性：

样式

除支持通用样式外，还支持如下样式：

事件

支持通用事件。

示例

1. 线形图

   <!-- 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*4卡片

1. 柱状图

   <!-- 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*4卡片

1. 量规图

   <!-- 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*4卡片