返回发烧友论坛
发 帖  

[文章]基于 HarmonyOS JS UI 实现桌面卡片数据的可视化

时见栖鸦
2021-08-23 11:53:13
阅读量0
HarmonyOS
0
3
1. 介绍      
本篇Codelab主要介绍如何在HarmonyOS上开发一个JS卡片提供方，帮助开发者快速上手JS卡片类应用开发。该卡片包含2*2、2*4两种布局样式，具体效果如下：

卡片的基本概念：
  • 卡片使用方
    显示卡片内容的宿主应用，控制卡片在宿主中展示的位置。
  • 卡片提供方
    提供卡片显示内容的HarmonyOS应用或原子化服务，控制卡片的显示内容、控件布局以及控件点击事件。
详细介绍请参考服务卡片开发指导。
2. 搭建HarmonyOS环境
我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。
  • 安装DevEco Studio，详情请参考下载和安装软件。
  • 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
    • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
    • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
  • 开发者可以参考以下链接，完成设备调试的相关配置：
    • 使用真机进行调试
    • 使用模拟器进行调试

本篇Codelab使用的DevEco Studio版本为DevEco Studio 2.1 Beta4，使用的SDK版本为API Version 5。

3. 代码结构解读      
本篇Codelab内容包括计步器传感器的使用，对象关系映射型数据库的使用，卡片的创建、更新、删除，JS中progress组件和chart组件的使用，DevEco Studio工程代码结构如下：

  • cardEntity：存放chart图表相关对象的目录。
    • ChartPoint：chart图表线型图中的点对象，用于存储点的值，描述，样式等信息。
    • ChartValues：chart图表线型图中的数据对象，用于存储数据点集合，样式信息。
    • PointStyle：chart图表线型图中的点的样式，用于存储点的样式。
  • database：存放对象关系映射数据库相关对象的目录。
    • Form：卡片表对象，用于存储卡片id，卡片名称以及卡片规格。
    • FormDatabase：卡片数据库对象，用于创建卡片数据库。
    • SensorData：传感器数据对象，用于存储步数及日期。
  • slice：存放slice的目录
    • MainAbilitySlice：主页面，卡片router跳转的页面。
    • StepFormAbilitySlice：卡片页面。
  • utils：存放工具类的目录。
    • ChartDataUtils：提供图表数据相关方法。
    • DatabaseUtils：提供对数据库相关操作的方法。
    • DateUtils：提供日期相关操作的方法。
    • LogUtils：日志工具类。
    • PermissionBridge：权限回调。
  • MainAbility：主程序入口，DevEco Studio生成，需要加入向用户申请计步器传感器权限代码。
  • MyApplication：DevEco Studio生成，不需变更。
  • StepFormAbility：卡片功能入口。
  • StepSensorService：计步器传感器service，提供步数的采集，数据的存储，卡片更新等功能。
  • js：存放js资源文件。
    • card2X2：存放2*2卡片页面的资源文件。
      common：存放背景图片等资源。
      backgroud.jpg：背景图片，用户可根据需要自行选择背景图片。
      pages.index：存放页面，样式资源文件。
      index.css：样式文件。
      index.hml：页面布局文件。
      index.json：包含页面默认值以及相关方法。
    • card2X4：存放2*4卡片页面的资源文件，目录结构同card2X2。
   
4. 配置文件      
卡片应用是一款特殊的元能力服务，需要在配置文件中声明。以本工程为例，config.json文件中"abilities"配置forms模块的细节如下：
  1. "forms": [
  2.   {
  3.     "jsComponentName": "step_form_card",
  4.     "isDefault": true,
  5.     "scheduledUpdateTime": "10:30",
  6.     "defaultDimension": "2*2",
  7.     "name": "step_form_card",
  8.     "description": "This is a step service widget",
  9.     "colorMode": "auto",
  10.     "type": "JS",
  11.     "supportDimensions": [
  12.       "2*2"
  13.     ],
  14.     "updateEnabled": true,
  15.     "updateDuration": 1
  16.   },
  17.   {
  18.     "jsComponentName": "card2X4",
  19.     "isDefault": false,
  20.     "scheduledUpdateTime": "10:30",
  21.     "defaultDimension": "2*4",
  22.     "name": "card2X4",
  23.     "description": "This is a step service widget",
  24.     "colorMode": "auto",
  25.     "type": "JS",
  26.     "supportDimensions": [
  27.       "2*4"
  28.     ],
  29.     "updateEnabled": true,
  30.     "updateDuration": 1
  31.   }
  32. ]
复制代码
配置JS模块的细节如下：
  1. "js": [         
  2.   {
  3.     "pages": [
  4.       "pages/index/index"
  5.     ],
  6.     "name": "step_form_card",
  7.     "window": {
  8.       "designWidth": 720,
  9.       "autoDesignWidth": true
  10.     },
  11.     "type": "form"
  12.   },
  13.   {
  14.     "pages": [
  15.       "pages/index/index"
  16.     ],
  17.     "name": "card2X4",
  18.     "window": {
  19.       "designWidth": 720,
  20.       "autoDesignWidth": true
  21.     },
  22.     "type": "form"
  23.   }
  24. ]
复制代码
配置文件中，应注意如下配置：
  • "js"模块中的name字段要与"forms"模块中的jsComponentName字段的值一致，为js资源的实例名。
  • "forms"模块中的name为卡片名，即在onCreateForm中根据AbilitySlice.PARAM_FORM_NAME_KEY可取到的值。
  • 除此之外，卡片的Ability中还需要配置"visible": true和"formsEnabled": true。
  • 定时刷新和定点刷新都配置的情况下，定时刷新优先。
  • defaultDimension是默认规格，必须设置。
  • 详细配置可参考JS卡片开发指导。
为了保证程序的正常运行，我们需要在配置文件中声明应用使用的权限，同时也要向用户申请授权，具体代码会在创建卡片章节体现，config.json文件中"reqPermissions"模块的细节如下：
  1. "reqPermissions": [
  2.       {
  3.         "name": "ohos.permission.ACTIVITY_MOTION",
  4.         "reason": "get step count",
  5.         "usedScene": {
  6.           "ability": [
  7.             ".MainAbility",
  8.             ".StepSensorService"
  9.           ],
  10.           "when": "always"
  11.         }
  12.       },
  13.       {
  14.         "name": "ohos.permission.KEEP_BACKGROUND_RUNNING",
  15.         "reason": "keep service ability backgroud running",
  16.         "usedScene": {
  17.           "ability": [
  18.             ".StepSensorService"
  19.           ],
  20.           "when": "always"
  21.         }
  22.       }
  23.     ]
复制代码
5. 开发卡片布局
本篇Codelab为卡片应用设计了2*2和2*4两种布局风格，效果图如下：
                  由于2*2布局内容相对简单，下面以2*4布局为例，进行详细介绍。整个2*4卡片展示的内容分为左右两个部分，其中左边内容从上到下分别显示描述、行走的里程、步数，主要以文字的方式展示；右边从上到下分别显示进度条（步数进度百分比）和近四天步数的线型图，主要以图表的方式展示。
hml代码示例如下：
  1. <div class="card_root_layout" on:click="routerEvent">
  2.     <div class="div_basic_container">
  3.     <!-- 左侧布局 -->
  4.         <div class="left_items">
  5.      <!-- 左侧主要以文字方式显示步数，开发者可自行编写 -->
  6.         </div>

  8.         <!-- 右侧布局 -->
  9.         <div class="right_items">
  10.             <!-- 进度条部分 -->
  11.             <div class="progress">
  12.                 <!-- 进度值 -->
  13.                 <div class="progressText">
  14.                     <text id="progressValue" class="text">{{ percent }}</text>
  15.                     <text class="text">%</text>
  16.                 </div>
  17.                 <div class="progressDiv">
  18.                     <!-- 进度条 -->
  19.                     <progress type="horizontal" id="progress" percent="{{ percent }}"></progress>
  20.                 </div>
  21.             </div>
  22.             <!-- 线型图布局 -->
  23.             <div class="chartArea">
  24.                 <chart type="line" id="chart" datasets="{{ datasets }}" options="{{ options }}"></chart>
  25.             </div>
  26.         </div>
  27.     </div>
  28. </div>

  30. css文件中主要配置各组件的样式，代码示例如下：


  33. .card_root_layout {
  34.     width: 100%;
  35.     height: 100%;
  36.     position: relative;
  37. }

  39. .div_basic_container {
  40.     background-image: url('common/backgroundImg1.JPG');
  41.     background-size: 100% 100%;
  42.     background-repeat: no-repeat;
  43.     position: absolute;
  44.     top: 0px;
  45.     left: 0px;
  46.     flex-direction: row;
  47.     width: 100%;
  48.     height: 100%;
  49. }

  51. .left_items {
  52.     width: 40%;
  53.     height: 100%;
  54.     align-content: flex-start;
  55.     flex-direction: column;
  56.     position: absolute;
  57.     left: 20;
  58. }

  60. .right_items {
  61.     align-content: flex-start;
  62.     width: 50%;
  63.     height: 100%;
  64.     position: absolute;
  65.     right: 20px;
  66. }

  68. #stepImg {
  69.     align-content: center;
  70.     margin-top: 10px;
  71.     width: 30px;
  72.     height: 30px;
  73. }

  75. #chart {
  76.     font-size: 10px;
  77.     lineColor: #7CFC00;
  78. }

  80. .chartArea {
  81.     justify-content: flex-end;
  82.     width: 100%;
  83.     height: 50%;
  84.     position: absolute;
  85.     bottom: 10px;
  86. }

  88. .text {
  89.     font-size: 20px;
  90.     font-family: SourceHanSansSC-Regular;
  91.     color: #CDCACA;
  92. }

  94. .progress {
  95.     width: 100%;
  96.     height: 40%;
  97.     flex-direction: row;
  98.     margin-top: 18px;
  99.     align-content: flex-start;
  100. }

  102. .progressDiv {
  103.     flex-direction: row;
  104. }

  106. #progress {
  107.     position: absolute;
  108.     width: 80%;
  109.     stroke-width: 20px;
  110.     background-color: #CDCACA;
  111.     color: #324846;
  112.     margin-top: 2px;
  113. }

  115. .progressText {
  116.     flex-direction: row;
  117.     width: 40px;
  118. }
复制代码
index.json文件中配置了hml中需要用到的默认数据和action配置，代码示例如下：
  1. {
  2.     "data": {
  3.         "datasets": [
  4.                 {
  5.                     "strokeColor": "#CDCACA",
  6.                     "fillColor": "#CDCACA",
  7.                     "data": [
  8.                             {
  9.                                 "value": 0,
  10.                                 "description": "0",
  11.                                 "textLocation": "top",
  12.                                 "textColor": "#CDCACA",
  13.                                 "pointStyle": {
  14.                                     "shape": "circle",
  15.                                     "size": 5,
  16.                                     "fillColor": "#FF9C28",
  17.                                     "strokeColor": "#FF9C28"
  18.                                 }
  19.                             }
  20.                             // 开发者可参考上面数据结构自行设计其他三天的默认数据  
  21.                     ],
  22.                     "gradient": true
  23.                 }
  24.         ],
  25.         "options": {
  26.             "xAxis": {
  27.                 "min": 0,
  28.                 "max": 3,
  29.                 "display": false,
  30.                 "axisTick": 4
  31.             },
  32.             "yAxis": {
  33.                 "min": 0,
  34.                 "max": 1000
  35.             }
  36.         },
  37.         "steps": 0,
  38.         "percent": 0,
  39.         "mileage": 0
  40.     },

  42.     "actions": {
  43.         "routerEvent": {
  44.             "action": "router",
  45.             "bundleName": "com.huawei.cookbook",
  46.             "abilityName": "com.huawei.cookbook.MainAbility"
  47.         }
  48.     }
  49. }
复制代码
数据说明：
datasets：线型图点集；
options：线型图X轴，Y轴显示；
详情参考JS chart组件开发指导了解相关参数意义；
steps：步数；
percent：步数进度百分比，为方便演示，本篇codelab以1000步为目标步数；mileage：里程（米），计算方式为steps*0.6。
背景图片开发者可自行准备。
6. 创建卡片创建卡片数据库本篇Codelab使用对象关系映射数据库来对卡片的信息和步数进行存储，创建了一个数据库（FormDatabase），两个表（Form和SensorData）分别存储卡片信息和每日行走的步数。
定义数据库类FormDatabase.java，数据库包含了"Form"，"SensorData"两个表，版本号为 "1"，示例代码如下：
  1. /**
  2. * form database
  3. */
  4. @Database(entities = {Form.class, SensorData.class}, version = 1)
  5. public abstract class FormDatabase extends OrmDatabase {
  6. }
复制代码
定义实体类Form.java，对应数据库内的表名为"form"，包含了卡片id"formId"作为主键，卡片名称"formName"和卡片规格"dimension"三个字段，示例代码如下：
  1. @Entity(tableName = "form")
  2. public class Form extends OrmObject {
  3.     @PrimaryKey()
  4.     private Long formId;
  5.     private String formName;
  6.     private Integer dimension;

  8.     /**
  9.      * parametric constructor
  10.      *
  11.      * [url=home.php?mod=space&uid=3142012]@param[/url] formId form Id
  12.      * @param formName form Name
  13.      * @param dimension form dimension  
  14.      */
  15.     public Form(Long formId, String formName, Integer dimension) {
  16.         this.formId = formId;
  17.         this.formName = formName;
  18.         this.dimension = dimension;
  19.     }
  20.     // 开发者自行添加字段的getter和setter 方法。  
  21.    }
复制代码
定义实体类SensorData.java，对应数据库内的表名"sensorData"，包含了日期"date"作为主键和步数"stepValue"两个字段，示例代码如下：
  1. /**
  2. * Sensor Data Storage Table
  3. */
  4. @Entity(tableName = "sensorData")
  5. public class SensorData extends OrmObject {
  6.     @PrimaryKey()
  7.     private String date;
  8.     private Integer stepsValue;
  9.     /**
  10.      * parametric constructor
  11.      *
  12.      * @param date date
  13.      * @param stepsValue stepsValue  
  14.      */
  15.     public SensorData(String date, Integer stepsValue) {
  16.         this.date = date;
  17.         this.stepsValue = stepsValue;
  18.     }
  19.     // 开发者自行添加字段的getter和setter 方法。  
  20. }
复制代码
关于对象关系映射数据库的开发可参考对象关系映射数据库开发指导。

卡片应用初始化
卡片程序安装启动后，进入MainAbility，在onStart的时候，需要向用户申请计步器传感器的权限，示例代码如下：
  1. [url=home.php?mod=space&uid=2735960]@Override[/url]
  2. public void onStart(Intent intent) {
  3.     super.onStart(intent);
  4.     super.setMainRoute(MainAbilitySlice.class.getName());
  5.     requestPermission();
  6. }
  7. // 向用户申请相关权限的授权
  8. private void requestPermission() {
  9.     String[] permissions = {
  10.         // 计步器权限
  11.         SystemPermission.ACTIVITY_MOTION
  12.     };
  13.     List<String> permissionFiltereds = Arrays.stream(permissions)
  14.             .filter(permission -> verifySelfPermission(permission) != IBundleManager.PERMISSION_GRANTED)
  15.             .collect(Collectors.toList());
  16.     if (permissionFiltereds.isEmpty()) {
  17.         PermissionBridge.getHandler().sendEvent(EVENT_PERMISSION_GRANTED);
  18.         return;
  19.     }
  20.     // 向用户申请相关权限的授权
  21.     requestPermissionsFromUser(permissionFiltereds.toArray(new String[permissionFiltereds.size()]),
  22.             PERMISSION_REQUEST_CODE);
  23. }

  25. @Override
  26. public void onRequestPermissionsFromUserResult(int requestCode, String[] permissions, int[] grantResults) {
  27.     if (permissions == null || permissions.length == 0 || grantResults == null || grantResults.length == 0) {
  28.         return;
  29.     }
  30.     for (int grantResult : grantResults) {
  31.         if (grantResult != IBundleManager.PERMISSION_GRANTED) {
  32.             PermissionBridge.getHandler().sendEvent(EVENT_PERMISSION_DENIED);
  33.             terminateAbility();
  34.             return;
  35.         }
  36.     }
  37.     // 授权回调
  38.     PermissionBridge.getHandler().sendEvent(EVENT_PERMISSION_GRANTED);
  39. }

  41. 当用户授权后，会拉起计步器service，示例代码如下：


  44. @Override
  45. public void onPermissionGranted() {
  46.     Intent intentService = new Intent();
  47.     Operation operation = new Intent.OperationBuilder()
  48.             .withDeviceId("")
  49.             .withBundleName(getBundleName())
  50.             .withAbilityName(StepSensorService.class.getSimpleName())
  51.             .build();
  52.     intentService.setOperation(operation);
  53.     startAbility(intentService);
  54. }
复制代码
当卡片使用方请求获取卡片时，卡片提供方会被拉起并调用onCreateForm回调函数，完成卡片信息的初始化，在StepFormAbility中有如下示例代码：
  1. @Override
  2. protected ProviderFormInfo onCreateForm(Intent intent) {
  3.     ProviderFormInfo providerFormInfo = new ProviderFormInfo();
  4.     IntentParams params = intent.getParams();
  5.     if (params == null) {
  6.         return providerFormInfo;
  7.     }
  8.     // 获取卡片id
  9.     long formId = parseFormId(params);
  10.     // 获取卡片名称
  11.     String formName = parseFormName(params);
  12.     // 获取卡片规格
  13.     int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2);
  14.     connect = helper.getOrmContext("FormDatabase", "FormDatabase.db", FormDatabase.class);
  15.     // 存储卡片信息
  16.     Form form = new Form(formId, formName, dimension);
  17.     DatabaseUtils.insertForm(form, connect);
  18.     // 获取当天的步数
  19.     SensorData sensorData = DatabaseUtils.getSensorData(connect, DateUtils.getDate(0));
  20.     String stepValue = "";
  21.     if (sensorData != null) {
  22.         stepValue = sensorData.getStepsValue() + "";
  23.     } else {
  24.         stepValue = "0";
  25.     }
  26.     // 获取卡片页面需要的数据
  27.     ZSONObject zsonObject = ChartDataUtils.getZsonObject(stepValue, dimension, connect);
  28.     providerFormInfo.setJsBindingData(new FormBindingData(zsonObject));
  29.     return providerFormInfo;
  30. }
复制代码
当卡片被删除时，需要重写onDeleteForm方法，根据卡片id删除卡片实例数据：
  1. @Override
  2. protected void onDeleteForm(long formId) {
  3.     LogUtils.info(TAG, "onDeleteForm():formId=" + formId);
  4.     super.onDeleteForm(formId);
  5.     // 删除数据库中的卡片信息
  6.     DatabaseUtils.deleteFormData(formId, connect);
  7. }
复制代码
7. 更新卡片创建StepSensorService
为了方便接收和处理计步器传递过来的数据，新建了一个Service类来接收、存储数据和更新卡片。
在StepSensorService的onStart方法中我们会创建计步器对象，示例代码如下：
  1. @Override
  2. public void onStart(Intent intent) {
  3.     super.onStart(intent);
  4.     connect = helper.getOrmContext("FormDatabase", "FormDatabase.db", FormDatabase.class);
  5.     myHandler = new MyEventHandler(EventRunner.getMainEventRunner());
  6.     categoryMotionDataCallback = new ICategoryMotionDataCallback() {
  7.             // 接收数据
  8.         @Override
  9.         public void onSensorDataModified(CategoryMotionData categoryMotionData) {
  10.             float[] values = categoryMotionData.getValues();
  11.             // 处理数据
  12.             handleSensorData(values[0]);
  13.             // 设置前台service通知
  14.             notice();
  15.         }
  16.     };
  17.     // 获取计步器对象
  18.     categoryMotion = categoryMotionAgent.getSingleSensor(CategoryMotion.SENSOR_TYPE_PEDOMETER);
  19.     if (categoryMotion != null) {
  20.         // 设置传感器数据回调
  21.         categoryMotionAgent.setSensorDataCallback(categoryMotionDataCallback, categoryMotion, INTERVAL);
  22.     }
  23. }
复制代码
其中handleSensorData方法包含存储数据、更新卡片和更新页面的操作，示例代码如下：
  1. // 处理传感器数据
  2. private void handleSensorData(float value) {
  3.     SensorData realSensorData =
  4.             DatabaseUtils.getRealSensorData(value, connect,
  5.                     DateUtils.getDate(0), DateUtils.getDate(1));
  6.     float realValue = realSensorData.getStepsValue();
  7.     String stringValue = String.valueOf((int) realValue);
  8.     myHandler.postTask(new Runnable() {
  9.         @Override
  10.         public void run() {
  11.             // 存储数据,开发者可自行实现
  12.             DatabaseUtils.insertValues(realValue, connect);
  13.             // 更新页面，开发者可自行实现
  14.             MainAbilitySlice.updatePage(stringValue);
  15.             // 更新卡片
  16.             updateForms(stringValue);
  17.         }
  18.     });
  19. }

  21. // 更新卡片
  22. private void updateForms(String value) {
  23.     OrmPredicates ormPredicates = new OrmPredicates(Form.class);
  24.     List<Form> forms = connect.query(ormPredicates);
  25.     for (Form form : forms) {
  26.         ZSONObject result = ChartDataUtils.getZsonObject(value, form.getDimension(), connect);
  27.         try {
  28.             updateForm(form.getFormId(), new FormBindingData(result));
  29.         } catch (FormException e) {
  30.             connect.delete(form);
  31.             LogUtils.error("updateForms", "formid not exit");
  32.         }
  33.     }
  34. }

  36. 前台service，为了保持service不被系统销毁，需要使用前台service配合手机管家中的相关配置来达到目的。示例代码如下：


  39. // 前台service
  40. private void notice() {
  41.     // 创建通知
  42.     NotificationRequest request = new NotificationRequest(NOTICE_ID);
  43.     request.setAlertOneTime(true);
  44.     NotificationRequest.NotificationNormalContent content = new NotificationRequest.NotificationNormalContent();
  45.     SensorData sensorData = DatabaseUtils.getSensorData(connect, DateUtils.getDate(0));
  46.     if (sensorData != null) {

  48.         content.setText("今天走了" + sensorData.getStepsValue() + "步");
  49.     }
  50.     NotificationRequest.NotificationContent notificationContent = new NotificationRequest.NotificationContent(content);
  51.     request.setContent(notificationContent);
  52.     // 绑定通知
  53.     keepBackgroundRunning(NOTICE_ID, request);
  54. }
复制代码
关于前台service的详细介绍，可参考前台service开发指导。
手机管家配置步骤如下：
手机管家> 应用启动管理> 计步器服务卡片> 点击右侧滑块> 选择开启"允许后台活动"开启后台运行权限
chart线型图数据获取及样式设置，后面代码将按照下图设置图表样式：

获取卡片更新数据，示例代码如下：
  1. // 获取卡片更新的数据
  2. public static ZSONObject getZsonObject(String value, int dimension, OrmContext connect) {
  3.     ZSONObject result = new ZSONObject();
  4.     // 计算进度条进度，百分比
  5.     int round = (int) Math.round(Double.parseDouble(value) / TARGET_STEPS * PROGRESS_PERCENT);
  6.     result.put("percent", round);
  7.     // 步数
  8.     result.put("steps", value);
  9.     if (dimension == DIMENSION_2X4) {
  10.         // 组装chartdatasets
  11.         List<ChartValues> datasets = new ArrayList<>(1);
  12.         ChartValues chartValues = ChartDataUtils.getChartValues(value, connect);   
  13.         // 获取点集数据
  14.         datasets.add(chartValues);
  15.         // chart图表数据
  16.         result.put("datasets", datasets);
  17.         // 里程
  18.         result.put("mileage", Math.round(Integer.parseInt(value) * METER_PER_STEP));
  19.     }
  20.     return result;
  21. }
复制代码
获取chart线型图点集，示例代码如下：
  1. // 获取chart组件需要的数据点集
  2. public static ChartValues getChartValues(String value, OrmContext connect) {
  3.     ChartValues chartValues = new ChartValues();
  4.     // 设置填充色颜色，即上图紫色框内的样式
  5.     chartValues.setFillColor(GRAY_COLOR);
  6.     // 设置线的颜色，即上图黄色框内线条的颜色
  7.     chartValues.setStrokeColor(GRAY_COLOR);
  8.     chartValues.setGradient(true);
  9.     // 获取点的集合
  10.     // 获取前三天的点的集合,开发者可自行实现
  11.     List<ChartPoint> chartPoints = ChartDataUtils.getChartPoints(connect);
  12.     ChartPoint noewChartPoint = ChartDataUtils.getChartPoint(Integer.parseInt(value));
  13.     // 加入今天的步数点
  14.     chartPoints.add(noewChartPoint);
  15.     chartValues.setData(chartPoints);
  16.     return chartValues;
  17. }
复制代码
根据步数获取某一点数据：
  1. // 获取chart组件点数据
  2. public static ChartPoint getChartPoint(int value) {
  3.     ChartPoint chartPoint = new ChartPoint();
  4.     // 点的数值
  5.     chartPoint.setValue(value);
  6.     // 点的描述
  7.     chartPoint.setDescription(value + "");
  8.     // 点的描述显示位置，此处设置为点的上面
  9.     chartPoint.setTextLocation(ChartPoint.TextLocation.top.toString());
  10.     // 设置描述字体的颜色
  11.     chartPoint.setTextColor(GRAY_COLOR);
  12.     PointStyle pointStyle = new PointStyle();
  13.     // 设置点的大小
  14.     pointStyle.setSize(POINT_SIZE);
  15.     // 设置点的颜色
  16.     pointStyle.setFillColor(ORANGE_COLOR);
  17.     // 设置点的外框颜色
  18.     pointStyle.setStrokeColor(ORANGE_COLOR);
  19.     // 设置点的样式，此处设置为圆形
  20.     pointStyle.setShape(PointStyle.PointShape.CIRCLE.toString()
  21.             .toLowerCase(Locale.ROOT));
  22.     chartPoint.setPointStyle(pointStyle);
  23.     return chartPoint;
  24. }
复制代码
8. 恭喜你
恭喜你已经完成计步器JS卡片应用的开发，并且学到了：
  • JS卡片开发部分接口的使用。
  • 卡片开发如何去配置config.json文件。
  • JS progress组件的使用。
  • JS chart组件的使用。
    9. 参考

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友