From 8a82a30851fe80f3a86c26da8d16a052b2d9b767 Mon Sep 17 00:00:00 2001 From: tenglonghh <146689148+tenglonghh@users.noreply.github.com> Date: Fri, 6 Sep 2024 14:28:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9EchartBackgroundColor?= =?UTF-8?q?=E3=80=81lineWidth=E3=80=81fillFormatter=E5=B1=9E=E6=80=A7=20(#?= =?UTF-8?q?23)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: hongtenglong --- .../src/main/ets/BarLineBaseChart.ets | 5 +++- .../src/main/ets/BaseCharts.ets | 23 +++++++-------- .../src/main/ets/Data/LineData.ets | 29 ++++++++++++++++++- .../src/main/ets/RadarCharts.ets | 10 ++----- 4 files changed, 45 insertions(+), 22 deletions(-) diff --git a/harmony/charts-wrapper/src/main/ets/BarLineBaseChart.ets b/harmony/charts-wrapper/src/main/ets/BarLineBaseChart.ets index 9162f681..3825a555 100644 --- 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 = (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 index 31e605d9..b80fc036 100644 --- 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 index 3ea2516e..565cdefe 100644 --- 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(); + 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(); + 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 index 867c8772..b5c82d5c 100644 --- 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;