如何在苍穹PC端的评分控件上实现评分功能并同步饼图

如何在苍穹PC端的评分控件上实现评分功能并同步饼图原创

闫方亮

4人赞赏了该文章 2,503次浏览编辑于2022年04月15日 14:01:27

摘要由AI智能服务提供

本文档描述了实现一个评分功能并将其评分信息渲染到饼图的完整流程。首先，通过Flex面板添加评分控件和饼图控件，支持评分控件的属性评价类型切换。其次，编写插件类代码，注册评分事件监听器，实现评分数据的收集和饼图的动态更新。最后，展示了实现后的效果图，并提供了开发环境版本信息和注意事项。

关键词: 评分控件

一、需求背景

1.1 界面上需要实现一个评分功能

1.2 将评分的信息渲染到饼图

二、实现方案

2.1 可以在页面上添加flex面版，添加评分控件,通过插件更新前端评分信息

2.2 添加饼图控件，通过插件后台将评分的数据展示到前端饼图上

三、实现过程

3.1先在页面上添加Flex面板,在Flex面板下面添加标签控件跟评分控件如下图1所示:

图1

3.2如果需要切换评分控件中的属性评价类型，如是星星或者是笑脸类型的，根据需要切换显示的类型如图2所示:

图2

3.3在页面中继续添加Flex面板控件,在Flex面板控件中添加饼图控件,评分数据使用文本控件，在代码中可以直接setValue;评分控件两种评价类类型有情感化评价和标准评价，此处都有使用。如下图3所示:

图3

3.4 编写插件类代码，将插件注册到页面插件中

public class RateDemoFormPlugin extends AbstractFormPlugin implements RateListener {
   @Override
   public void registerListener(EventObject e) {
      // TODO Auto-generated method stub
      super.registerListener(e);
      Rate rate = this.getControl("kdec_rateap2");
      rate.addRateListener(this);
      Rate rate1 = this.getControl("kdec_rateap3");
      rate1.addRateListener(this);
      Rate rate2 = this.getControl("kdec_rateap4");
      rate2.addRateListener(this);
   }

   @Override
   public void afterCreateNewData(EventObject e) {
      // TODO Auto-generated method stub
      super.afterCreateNewData(e);
      PieChart pieChart = this.getControl("kdec_piechartap");
      this.drawChart(pieChart);
   }

   @Override
   public void beforeBindData(EventObject e) {
      // TODO Auto-generated method stub
      super.beforeBindData(e);
   }

   @Override
   public void update(RateEvent evt) {
      // TODO Auto-generated method stub
      Number rateScore = evt.getRateScore();
      Rate rate = (Rate) evt.getSource();
      String key = rate.getKey();
      this.getPageCache().put(key, rateScore.toString());
      Number sum = this.handleSumRate(rateScore, key);
      this.getModel().setValue("kdec_textfield", sum);
      PieChart pieChart = this.getControl("kdec_piechartap");
      this.drawChart(pieChart);
      //必须刷新，否则不触发签到渲染
      pieChart.refresh();
   }

   public Number handleSumRate(Number score, String key) {
      Number sum = score;
      if (!key.equals("kdec_rateap2")) {
         sum = getSum(sum, "kdec_rateap2");
      }
      if (!key.equals("kdec_rateap3")) {
         sum = getSum(sum, "kdec_rateap3");
      }
      if (!key.equals("kdec_rateap4")) {
         sum = getSum(sum, "kdec_rateap4");
      }
      Number rate5 = sum.intValue() / 3;
      Rate rate = this.getControl("kdec_rateap5");
      rate.setRateScore(rate5);
      return rate5;
   }

   private Number getSum(Number sum, String key) {
      String rate = this.getPageCache().get(key);
      if (rate != null) {
         sum = sum.intValue() + Integer.valueOf(rate);
      }
      return sum;
   }

   public void drawChart(PieChart pieChart) {
      pieChart.clearData();
      pieChart.setShowTooltip(true);
      //设置为位置
      pieChart.setMargin(Position.right, "30px");
      pieChart.setMargin(Position.top, "30px");
      pieChart.setMargin(Position.bottom, "10px");
      pieChart.setMargin(Position.left, "20px");
      //添加数据
      PieSeries series = pieChart.createPieSeries("评分");
      String rateStr = this.getPageCache().get("kdec_rateap2");
      String rate2Str = this.getPageCache().get("kdec_rateap3");
      String rate3Str = this.getPageCache().get("kdec_rateap4");
      ItemValue[] data = new ItemValue[3];
      ItemValue data1 = new ItemValue("物流服务", getRateNumber(rateStr), "#ffb61e");
      ItemValue data2 = new ItemValue("描述相符", getRateNumber(rate2Str), "#ff8936");
      ItemValue data3 = new ItemValue("服务态度", getRateNumber(rate3Str), "#ff7500");
      data[0] = data1;
      data[1] = data2;
      data[2] = data3;
      series.setData(data);
      //series样式
      series.setRoseType(RoseType.radius);
   }

   private Number getRateNumber(String rateStr) {
      Number rate = 0;
      if (rateStr != null) {
         rate = Integer.valueOf(rateStr);
      }
      return rate;
   }