feat:新增chartBackgroundColor、lineWidth、fillFormatter属性 (#23)

Co-authored-by: hongtenglong <[email protected]>
react-native-oh-library · Sep 6, 2024 · 8a82a30 · 8a82a30
1 parent 71e83b7
commit 8a82a30
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 22 deletions.
diff --git a/harmony/charts-wrapper/src/main/ets/BarLineBaseChart.ets b/harmony/charts-wrapper/src/main/ets/BarLineBaseChart.ets
@@ -71,7 +71,10 @@ export const setBarLineChart = <T extends model, U extends RNChart>(descriptorWr
   if (props.gridBackgroundColor != undefined) {
     model.setGridBackgroundColor(props.gridBackgroundColor)
   }
-
+  //设置图表背景 chartBackgroundColor
+  if(props.chartBackgroundColor!=undefined){
+    model.setGridBackgroundColor(props.chartBackgroundColor)
+  }
   //是否设置边框 drawBorders
   if (props.drawBorders != undefined) {
     model.setDrawBorders(props.drawBorders);

diff --git a/harmony/charts-wrapper/src/main/ets/BaseCharts.ets b/harmony/charts-wrapper/src/main/ets/BaseCharts.ets
@@ -43,6 +43,8 @@ import {
   HorizontalBarChartModel,
   LegendEntry,
   JArrayList,
+  IAxisValueFormatter,
+  AxisBase,
 } from '@ohos/mpchart';
 import { RNC } from "@rnoh/react-native-openharmony/generated"
 import { setAxis } from './AxisBase';
@@ -254,9 +256,6 @@ export const setBaseProps =
       model.setLogEnabled(props.logEnabled)
     }
 
-
-    //chartBackgroundColor  暂无这个方法
-
     //设置高亮 highlightPerTapEnabled
     if (props.highlightPerTapEnabled != undefined) {
       model.setHighlightPerTapEnabled(props.highlightPerTapEnabled);
@@ -327,14 +326,14 @@ export const setBaseProps =
         xAxis?.setYOffset(props.xAxis.yOffset)
       }
 
-      if (props.highlights) {
-        props.highlights.forEach((highlight) => {
-          let x = highlight.x;
-          let dataSetIndex = highlight.dataSetIndex;
-          let stackIndex = highlight.stackIndex;
-          model.highlightValue(x, dataSetIndex, stackIndex)
-        })
-      }
     }
-
+    if (props.highlights != undefined) {
+      props.highlights.forEach((highlight) => {
+        let x = highlight.x;
+        let dataSetIndex = highlight.dataSetIndex;
+        let stackIndex = highlight.stackIndex;
+        model.highlightValue(x, dataSetIndex, stackIndex)
+      })
+    }
   }
+
diff --git a/harmony/charts-wrapper/src/main/ets/Data/LineData.ets b/harmony/charts-wrapper/src/main/ets/Data/LineData.ets
@@ -30,7 +30,8 @@ import {
   LineData,
   LineDataSet,
   Mode,
-  CombinedData
+  CombinedData,
+  ChartColorStop
 } from '@ohos/mpchart';
 import { RNC } from '@rnoh/react-native-openharmony/generated';
 
@@ -178,6 +179,19 @@ export const setLineData = (isLine: string, descriptorWrapper: RNC.RNLineChart.D
         dataSet.setDrawHighlightIndicators(config?.drawHighlightIndicators)
       }
 
+      //  设置折线宽度，以vp为单位 lineWidth
+      if (config?.lineWidth != undefined) {
+        dataSet.setLineWidth(config.lineWidth);
+      }
+
+      //设置填充 fillFormatter
+      if(config?.drawFilled && config.fillColor!=undefined){
+       let gradientFillColor = new JArrayList<ChartColorStop>();
+       let fillColor = config.fillColor.toString();
+       gradientFillColor.add([fillColor,config.fillAlpha]);
+       dataSet.setGradientFillColor(gradientFillColor);
+       dataSet.setDrawFilled(config.drawFilled)
+      }
 
       dataSetList.add(dataSet);
     })
@@ -316,6 +330,19 @@ export const setLineData = (isLine: string, descriptorWrapper: RNC.RNLineChart.D
       if (config?.drawHighlightIndicators != undefined) {
         dataSet.setDrawHighlightIndicators(config?.drawHighlightIndicators)
       }
+      //  设置折线宽度，以vp为单位 lineWidth
+      if (config?.lineWidth != undefined) {
+        dataSet.setLineWidth(config.lineWidth);
+      }
+
+      //设置填充 fillFormatter
+      if(config?.drawFilled && config.fillColor!=undefined){
+        let gradientFillColor = new JArrayList<ChartColorStop>();
+        let fillColor = config.fillColor.toString();
+        gradientFillColor.add([fillColor,config.fillAlpha]);
+        dataSet.setGradientFillColor(gradientFillColor);
+        dataSet.setDrawFilled(config.drawFilled)
+      }
 
 
 

diff --git a/harmony/charts-wrapper/src/main/ets/RadarCharts.ets b/harmony/charts-wrapper/src/main/ets/RadarCharts.ets
@@ -31,6 +31,8 @@ import {
   IAxisValueFormatter,
   AxisBase,
   ChartColor,
+  XAxis,
+  XAxisPosition,
 } from '@ohos/mpchart';
 import { RNC } from "@rnoh/react-native-openharmony/generated"
 import { setBaseProps } from './BaseCharts'
@@ -39,14 +41,6 @@ import { setBasePieChartProps } from './BasePieCharts';
 import { setAxis } from './AxisBase';
 import RadarMarkerView from './utils/RadarMarkerView';
 
-class valueFormatter implements IAxisValueFormatter {
-  private mActivities: string[] = ["Burger", "Steak", "Salad", "Pasta", "Pizza"];
-
-  getFormattedValue(value: number, axis: AxisBase): string {
-    return this.mActivities[Math.floor(value % this.mActivities.length)];
-  }
-}
-
 @Component
 export struct RadarCharts {
   public static readonly NAME = RNC.RNRadarChart.NAME;