From 1f40b8b41961998e19a1f7f8024aa166faa14e9b Mon Sep 17 00:00:00 2001 From: liuhaikang Date: Wed, 18 Sep 2024 19:37:21 +0800 Subject: [PATCH 1/2] =?UTF-8?q?Demo=E5=9B=BD=E9=99=85=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liuhaikang --- entry/src/main/ets/customView/MpSelect.ets | 4 +- entry/src/main/ets/customView/MpSlider.ets | 2 +- .../barCharts/CustomGridLineChartPage.ets | 8 +- .../barCharts/CustomMarkerViewChartPage.ets | 33 +- .../pages/barCharts/ScrollBarChartPage.ets | 282 +++++++----------- .../pages/barCharts/ScrollBarChartPage2.ets | 18 +- .../barCharts/SimpleWaterfallChartPage.ets | 10 +- .../lineCharts/LineChartNotAxisConfigPage.ets | 2 +- .../ets/pages/lineCharts/LineChartPage.ets | 57 ++-- entry/src/main/ets/utils/ImageSaver.ets | 14 +- .../main/resources/base/element/string.json | 212 +++++++++++++ .../main/resources/zh_CN/element/string.json | 225 ++++++++++++++ 12 files changed, 628 insertions(+), 239 deletions(-) create mode 100644 entry/src/main/resources/zh_CN/element/string.json diff --git a/entry/src/main/ets/customView/MpSelect.ets b/entry/src/main/ets/customView/MpSelect.ets index d0d160a..d1bbd60 100644 --- a/entry/src/main/ets/customView/MpSelect.ets +++ b/entry/src/main/ets/customView/MpSelect.ets @@ -15,7 +15,7 @@ @ComponentV2 export default struct MpSelect { - @Require @Param name: string + @Require @Param name: string | Resource @Require @Param selectItem: Object @Event $selectItem: (selectItem: Object) => void = (selectItem: Object) => {}; @Require @Param itemsList: Array @@ -36,6 +36,6 @@ export default struct MpSelect { } export class ValueObject { - value: string = '' + value: string | Resource = '' } diff --git a/entry/src/main/ets/customView/MpSlider.ets b/entry/src/main/ets/customView/MpSlider.ets index 3871270..580d567 100644 --- a/entry/src/main/ets/customView/MpSlider.ets +++ b/entry/src/main/ets/customView/MpSlider.ets @@ -15,7 +15,7 @@ @ComponentV2 export default struct MpSlider { - @Require @Param name: string + @Require @Param name: string | Resource private step?: number @Require @Param value: number @Event $value: (value: number) => void = (value: number) => {}; diff --git a/entry/src/main/ets/pages/barCharts/CustomGridLineChartPage.ets b/entry/src/main/ets/pages/barCharts/CustomGridLineChartPage.ets index 6925e14..8106acb 100644 --- a/entry/src/main/ets/pages/barCharts/CustomGridLineChartPage.ets +++ b/entry/src/main/ets/pages/barCharts/CustomGridLineChartPage.ets @@ -249,15 +249,15 @@ struct CustomGridLineChartPage { // 网格线设置 @Builder gridLineSettings() { Row() { - Text('默认网格线设置： ') + Text($r("app.string.grid_line_color")) ForEach([ { - colorText: '红色:', + colorText: $r('app.string.red'), color: Color.Red, colorVal: 'red' }, { - colorText: '蓝色:', + colorText: $r('app.string.blue'), color: Color.Blue, colorVal: 'blue' } @@ -285,7 +285,7 @@ struct CustomGridLineChartPage { }.alignSelf(ItemAlign.Start) Row() { - Text('自定义网格线:'); + Text($r('app.string.custom_gridlines')); Checkbox({ name: 'customGridLine', group: 'gridLine' }) .select(false) .onChange((isChecked: boolean) => { diff --git a/entry/src/main/ets/pages/barCharts/CustomMarkerViewChartPage.ets b/entry/src/main/ets/pages/barCharts/CustomMarkerViewChartPage.ets index 707ba74..3e556ad 100644 --- a/entry/src/main/ets/pages/barCharts/CustomMarkerViewChartPage.ets +++ b/entry/src/main/ets/pages/barCharts/CustomMarkerViewChartPage.ets @@ -194,6 +194,10 @@ struct CustomMarkerViewChartPage { this.titleModel.setIndex(-1) } + getResourceString(res:Resource){ + return getContext().resourceManager.getStringSync(res.id) + } + public animate() { if (this.model) { if (this.titleSelectString == 'X') { @@ -403,10 +407,10 @@ struct CustomMarkerViewChartPage { @Builder eventSettings() { Row() { - Text(`自定义点击：${this.eventText}`) + Text(`${this.getResourceString($r('app.string.custom_click'))}${this.eventText}`) } Row() { - Text('是否启用所有事件：') + Text($r('app.string.enable_all_events')) Checkbox({ name: 'disable' }) .select(this.model?.getTouchEnabled()) .onChange((isChecked: boolean) => { @@ -414,10 +418,10 @@ struct CustomMarkerViewChartPage { this.lineChartModel?.setTouchEnabled(isChecked); }) } - Row() { - Text('事件是否开启： ') + Column() { + Text($r('app.string.event_activated')) Row() { - Text('单击: ') + Text($r('app.string.single_tap')) Checkbox({ name: 'leftYAxis', group: 'yAxis' }) .select(this.model?.eventControl.eventIsEnable(EventType.SingleTap)) .onChange((isChecked: boolean) => { @@ -426,7 +430,7 @@ struct CustomMarkerViewChartPage { } Row() { - Text('双击: ') + Text($r('app.string.double_tap')) Checkbox({ name: 'rightYAxis', group: 'yAxis' }) .select(this.model?.eventControl.eventIsEnable(EventType.DoubleTap)) .onChange((isChecked: boolean) => { @@ -435,7 +439,7 @@ struct CustomMarkerViewChartPage { } Row() { - Text('长按: ') + Text($r("app.string.long_press")) Checkbox({ name: 'rightYAxis', group: 'yAxis' }) .select(this.model?.eventControl.eventIsEnable(EventType.LongPress)) .onChange((isChecked: boolean) => { @@ -444,12 +448,12 @@ struct CustomMarkerViewChartPage { } }.alignSelf(ItemAlign.Start) - Row() { - Text('自定义ui事件触发类型：') + Column() { + Text($r('app.string.event_trigger')) ForEach([ - { text: '单击', type: EventType.SingleTap }, - { text: '双击', type: EventType.DoubleTap }, - { text: '长按', type: EventType.LongPress }, + { text: $r('app.string.single_tap'), type: EventType.SingleTap }, + { text: $r('app.string.double_tap'), type: EventType.DoubleTap }, + { text: $r('app.string.long_press'), type: EventType.LongPress }, ], (item: uiTriggerType) => { Row() { Text(item.text) @@ -549,8 +553,9 @@ struct CustomMarkerViewChartPage { Column() { this.eventSettings() } - }.align(Alignment.TopEnd); - } + }.align(Alignment.TopEnd) + }.layoutWeight(1) + .margin({bottom: 50}) } } } diff --git a/entry/src/main/ets/pages/barCharts/ScrollBarChartPage.ets b/entry/src/main/ets/pages/barCharts/ScrollBarChartPage.ets index 081590f..c2bf033 100644 --- a/entry/src/main/ets/pages/barCharts/ScrollBarChartPage.ets +++ b/entry/src/main/ets/pages/barCharts/ScrollBarChartPage.ets @@ -45,6 +45,8 @@ import LongPressMarkerView from '../../customcomponents/LongPressMarkerView'; import Constants from '../../constants/Constants'; import Utils from '../../utils/Utils'; import { LogUtil } from '../../utils/LogUtil'; +import MpSlider from '../../customView/MpSlider'; +import MpSelect, { ValueObject } from '../../customView/MpSelect'; @Entry @ComponentV2 @@ -59,7 +61,7 @@ struct ScrollBarChartPage { private mBarWidth: string = '85'; private mBackgroundColor: string = '#500000ff'; private mLastMaxVisibleXCount: string = '20'; - private mCurrentMaxVisibleXCount: string = '20'; + @Local maxLabelSize: number = 20; private normalMarker: MarkerView | null = null; private stackMarker: CustomMarkerView | null = null; private isChangedMaxVisibleXCount: boolean = false; @@ -73,7 +75,67 @@ struct ScrollBarChartPage { private title: string = 'BarChart' @Local titleModel: ChartTitleModel = new ChartTitleModel() private pixelMap:ChartPixelMap=new ChartPixelMap() + @Local bgColors: Array = ['#C7EDCC', '#FDE6E0', '#FAF9DE', '#DCE2F1', '#E9EBFE', Color.White] + @Local limitLinePosition: number = 3; + @Local limitLinePositionList: number[] = [ + 0, 1, 2, 3 + ] + @Local limitLinePositionValueList: Array = [ + { value: 'none' }, + { value: 'above' }, + { value: 'below' }, + { value: 'both' } + ] + @Local widthPercentage: number = 85; + + @Monitor("maxLabelSize") + setMaxLabelSize() { + if (this.model) { + this.model.setVisibleXRangeMaximum(this.maxLabelSize); + this.model.setVisibleXRangeMinimum(this.maxLabelSize); + this.model.notifyDataSetChanged(); + this.model.invalidate(); + } + } + + @Monitor("widthPercentage") + setWidthPercentage() { + if (this.model && this.data) { + this.data.setBarWidth(this.widthPercentage / 100); + this.model.invalidate(); + } + } + + @Monitor("limitLinePosition") + changeLimitLine() { + this.leftAxis?.removeAllLimitLines(); + switch (this.limitLinePosition) { + case 0: + break; + case 1: + this.limitLine1 && this.leftAxis?.addLimitLine(this.limitLine1); + break; + case 2: + this.limitLine2 && this.leftAxis?.addLimitLine(this.limitLine2); + break; + case 3: + this.limitLine1 && this.leftAxis?.addLimitLine(this.limitLine1); + this.limitLine2 && this.leftAxis?.addLimitLine(this.limitLine2); + break; + } + this.model?.invalidate(); + } + @Builder + colorButton(color: string | number) { + Button().backgroundColor(color).borderWidth(1).aspectRatio(1).onClick(() => { + if (this.model) { + this.model.setGridBackgroundColor(color); + this.model.setDrawGridBackground(true); + this.model.invalidate(); + } + }) + } //标题栏菜单回调 @Monitor("titleModel.index") menuCallback() { @@ -263,7 +325,7 @@ struct ScrollBarChartPage { // //设置是否支持点击高亮 // this.model.setHighlightPerTapEnabled(false); - this.limitLine1 = new LimitLine(120, 'Upper Limit'); + this.limitLine1 = new LimitLine(80, 'Upper Limit'); this.limitLine1.setLineWidth(4); this.limitLine1.enableDashedLine(10, 10, 0); this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP); @@ -448,10 +510,17 @@ struct ScrollBarChartPage { Scroll() { Stack() { Column() { + Button($r('app.string.refresh')) + .onClick(() => { + if (this.model) { + this.model.notifyDataSetChanged(); + this.model.invalidate(); + } + }) Row() { - Text('数据类型： ') + Text($r('app.string.data_type')) Row() { - Text('普通: ') + Text($r('app.string.normal')) Radio({ value: 'normal', group: 'dataType' }) .checked(true) .onChange(async (isChecked: boolean) => { @@ -476,7 +545,7 @@ struct ScrollBarChartPage { } Row() { - Text('渐变: ') + Text($r('app.string.gradient')) Radio({ value: 'gradient', group: 'dataType' }) .checked(false) .onChange(async (isChecked: boolean) => { @@ -501,7 +570,7 @@ struct ScrollBarChartPage { } Row() { - Text('堆叠: ') + Text($r('app.string.stack')) Radio({ value: 'stack', group: 'dataType' }) .checked(false) .onChange(async(isChecked: boolean) => { @@ -527,7 +596,7 @@ struct ScrollBarChartPage { }.alignSelf(ItemAlign.Start) Row() { - Text('数据类型： ') + Text($r('app.string.data_type')) Row() { Text('NoData: ') Radio({ value: 'noData', group: 'dataType' }) @@ -558,9 +627,9 @@ struct ScrollBarChartPage { }.alignSelf(ItemAlign.Start) Row() { - Text('Y轴是否显示： ') + Text($r('app.string.show_y_axis')) Row() { - Text('左Y轴: ') + Text($r('app.string.left_y_axis')) Checkbox({ name: 'leftYAxis', group: 'yAxis' }) .select(true) .onChange((isChecked: boolean) => { @@ -571,7 +640,7 @@ struct ScrollBarChartPage { } Row() { - Text('右Y轴: ') + Text($r('app.string.right_y_axis')) Checkbox({ name: 'rightYAxis', group: 'yAxis' }) .onChange((isChecked: boolean) => { if (this.rightAxis) { @@ -582,9 +651,9 @@ struct ScrollBarChartPage { }.alignSelf(ItemAlign.Start) Row() { - Text('左Y轴位置： ') + Text($r('app.string.left_y_axis_position')) Row() { - Text('表外: ') + Text($r('app.string.outside')) Radio({ value: 'outSideChart', group: 'leftYAxisLabelPosition' }) .checked(true) .onChange((isChecked: boolean) => { @@ -595,7 +664,7 @@ struct ScrollBarChartPage { } Row() { - Text('表内: ') + Text($r('app.string.inside')) Radio({ value: 'inSideChart', group: 'leftYAxisLabelPosition' }) .checked(false) .onChange((isChecked: boolean) => { @@ -607,9 +676,9 @@ struct ScrollBarChartPage { }.alignSelf(ItemAlign.Start) Row() { - Text('右Y轴位置： ') + Text($r('app.string.right_y_axis_position')) Row() { - Text('表外: ') + Text($r('app.string.outside')) Radio({ value: 'outSideChart', group: 'rightYAxisLabelPosition' }) .checked(true) .onChange((isChecked: boolean) => { @@ -620,7 +689,7 @@ struct ScrollBarChartPage { } Row() { - Text('表内: ') + Text($r('app.string.inside')) Radio({ value: 'inSideChart', group: 'rightYAxisLabelPosition' }) .checked(false) .onChange((isChecked: boolean) => { @@ -632,9 +701,8 @@ struct ScrollBarChartPage { }.alignSelf(ItemAlign.Start) Row() { - Text('X轴是否显示： ') + Text($r('app.string.show_x_axis')) Row() { - Text('X轴: ') Checkbox({ name: 'isShowXAxis', group: 'xAxis' }) .select(true) .onChange((isChecked: boolean) => { @@ -645,7 +713,7 @@ struct ScrollBarChartPage { } }.alignSelf(ItemAlign.Start) - Text('X轴位置') + Text($r('app.string.x_axis_position')) .alignSelf(ItemAlign.Start) Row() { @@ -706,61 +774,28 @@ struct ScrollBarChartPage { }) }.layoutWeight(1) }.alignSelf(ItemAlign.Start) + MpSlider({ name: $r('app.string.width_percentage'), min: 1, max: 100, value: this.widthPercentage!! }) + + + Text($r('app.string.background')) + GridRow({ + columns: 6, + gutter: { x: 5, y: 10 }, + breakpoints: { + value: ["100vp", "200vp", "300vp"], + reference: BreakpointsReference.WindowSize + }, + direction: GridRowDirection.Row + }) { + ForEach(this.bgColors, (color: Color | string) => { + GridCol({ span: { xs: 4, sm: 3, md: 2, lg: 1 } }) { + this.colorButton(color) + } + }) + } Row() { - Text('X轴标签最大显示数： ') - TextInput({ text: this.mLastMaxVisibleXCount, placeholder: 'please input xAxis labels count.' }) - .layoutWeight(1) - .type(InputType.Number) - .onChange((value) => { - this.mCurrentMaxVisibleXCount = value; - }) - .onSubmit(() => { - if (this.model && this.data && Number(this.mCurrentMaxVisibleXCount)) { - let numValue: number = Number(this.mCurrentMaxVisibleXCount); - if (numValue <= Number(this.mLastMaxVisibleXCount) && numValue > 0) { - this.isChangedMaxVisibleXCount = true; - this.mLastMaxVisibleXCount = this.mCurrentMaxVisibleXCount; - this.model.setVisibleXRangeMaximum(numValue); - this.data.notifyDataChanged(); - promptAction.showToast({ message: 'X轴标签最大显示数已设置为： ' + this.mLastMaxVisibleXCount }) - } else { - promptAction.showToast({ message: '请输入小于等于' + this.mLastMaxVisibleXCount + '的正整数' }) - } - } else { - promptAction.showToast({ message: '请输入小于等于' + this.mLastMaxVisibleXCount + '的正整数' }) - } - }) - }.alignSelf(ItemAlign.Start) - - Row() { - Text('是否绘制背景色： ') - Checkbox({ name: 'isDrawBackground', group: 'isDrawBackground' }) - .select(false) - .onChange((isChecked: boolean) => { - if (this.model) { - this.model.setDrawGridBackground(isChecked); - } - }) - }.alignSelf(ItemAlign.Start) - - Row() { - Text('背景色： ') - TextInput({ text: '#500000ff', placeholder: 'please input background color.ex:#500000ff/#0000ff' }) - .layoutWeight(1) - .onChange((value) => { - this.mBackgroundColor = value; - }) - .onSubmit(() => { - if (this.model && this.mBackgroundColor) { - this.model.setGridBackgroundColor(this.mBackgroundColor); - promptAction.showToast({ message: '背景色已设置为： ' + this.mBackgroundColor }) - } - }) - }.alignSelf(ItemAlign.Start) - - Row() { - Text('是否设置MarkerView: ') + Text($r("app.string.show_mark_view")) Checkbox({ name: 'isShowMarkerView', group: 'isShowMarkerView' }) .select(true) .onChange((isChecked: boolean) => { @@ -770,31 +805,10 @@ struct ScrollBarChartPage { }) }.alignSelf(ItemAlign.Start) - Row() { - Text('设置柱状图显示宽度百分比： ') - TextInput({ text: '85', placeholder: 'please input bar width percent.' }) - .layoutWeight(1) - .type(InputType.Number) - .onChange((value) => { - this.mBarWidth = value; - }) - .onSubmit(() => { - if (this.data && this.mBarWidth) { - let percent: number = Number(this.mBarWidth); - if (percent > 0 && percent <= 100) { - this.data.setBarWidth(percent / 100); - promptAction.showToast({ message: '柱状图显示宽度百分比已设置为： ' + this.mBarWidth }) - } else { - promptAction.showToast({ message: '请输入1-100之间的正整数' }) - } - } else { - promptAction.showToast({ message: '请输入1-100之间的正整数' }) - } - }) - }.alignSelf(ItemAlign.Start) + MpSlider({ name: $r('app.string.visible_xrange_maximum'), min: 8, max: 20, value: this.maxLabelSize!! }) Row() { - Text('LimitLine是否在数据后： ') + Text($r('app.string.limit_line_after_data')) Checkbox({ name: 'isShowLimitLineBehindData', group: 'isShowLimitLineBehindData' }) .select(false) .onChange((isChecked: boolean) => { @@ -804,79 +818,13 @@ struct ScrollBarChartPage { }) }.alignSelf(ItemAlign.Start) - Row() { - Column() { - Text('左Y轴') - Text('LimitLine') - Text('位置') - } - - Column() { - Text('both') - Radio({ value: 'both', group: 'limitLinePosition' }) - .checked(true) - .onChange((isChecked: boolean) => { - if (this.leftAxis && isChecked) { - this.leftAxis.removeAllLimitLines(); - if (this.limitLine1) { - this.leftAxis.addLimitLine(this.limitLine1); - } - if (this.limitLine2) { - this.leftAxis.addLimitLine(this.limitLine2); - } - } - }) - }.layoutWeight(1) - - Column() { - Text('none') - Radio({ value: 'none', group: 'limitLinePosition' }) - .checked(false) - .onChange((isChecked: boolean) => { - if (this.leftAxis && isChecked) { - this.leftAxis.removeAllLimitLines(); - } - }) - }.layoutWeight(1) - - Column() { - Text('upper') - Radio({ value: 'upper', group: 'limitLinePosition' }) - .checked(false) - .onChange((isChecked: boolean) => { - if (this.leftAxis && isChecked) { - this.leftAxis.removeAllLimitLines(); - if (this.limitLine1) { - this.leftAxis.addLimitLine(this.limitLine1); - } - } - }) - }.layoutWeight(1) - - Column() { - Text('lower') - Radio({ value: 'lower', group: 'limitLinePosition' }) - .checked(false) - .onChange((isChecked: boolean) => { - if (this.leftAxis && isChecked) { - this.leftAxis.removeAllLimitLines(); - if (this.limitLine2) { - this.leftAxis.addLimitLine(this.limitLine2); - } - } - }) - }.layoutWeight(1) - }.alignSelf(ItemAlign.Start) + MpSelect({ + name: $r('app.string.left_y_axis_limitLine_position'), + selectItem: this.limitLinePosition!!, + itemsList: this.limitLinePositionList, + valuesList: this.limitLinePositionValueList + }) } - - Button('刷新') - .margin({ top: 100 }) - .onClick(() => { - if (this.model) { - this.model.notifyDataSetChanged(); - this.model.invalidate(); - } - }) }.align(Alignment.TopEnd); }.layoutWeight(1) .margin({bottom: 50}) diff --git a/entry/src/main/ets/pages/barCharts/ScrollBarChartPage2.ets b/entry/src/main/ets/pages/barCharts/ScrollBarChartPage2.ets index 0e91a0b..36c4cee 100644 --- a/entry/src/main/ets/pages/barCharts/ScrollBarChartPage2.ets +++ b/entry/src/main/ets/pages/barCharts/ScrollBarChartPage2.ets @@ -35,7 +35,7 @@ import Utils from '../../utils/Utils'; import { LogUtil } from '../../utils/LogUtil'; interface XAxisColorSetter { - colorText: string + colorText: string | Resource colorVal: string color: number } @@ -62,8 +62,8 @@ struct ScrollBarChartPage2 { private data: BarData | null = null; @Local colorSetter: XAxisColorSetter[] = [ - { colorText: '红色', color: Color.Red, colorVal: 'red' }, - { colorText: '蓝色', color: Color.Blue, colorVal: 'blue' }, + { colorText: $r('app.string.red'), color: Color.Red, colorVal: 'red' }, + { colorText: $r('app.string.blue'), color: Color.Blue, colorVal: 'blue' }, ] //标题栏菜单文本 private menuItemArr: Array = [Constants.TOGGLE_BAR_BORDERS, Constants.TOGGLE_DRAW_ICON,Constants.TOGGLE_VALUES, @@ -265,7 +265,7 @@ struct ScrollBarChartPage2 { @Builder yAxisExtensionLineSettings() { Row() { - Text('y轴延伸是否开启： ') + Text($r('app.string.y_axis_extension')) Row() { Checkbox({ name: 'yExtensionLine', group: 'YE'}) .select(this.model?.yAxisExtensionLineIsEnable()) @@ -279,9 +279,9 @@ struct ScrollBarChartPage2 { @Builder yAxisVisibleSettings() { Row() { - Text('y轴是否显示： ') + Text($r('app.string.show_y_axis')) Row() { - Text('左y轴： ') + Text($r('app.string.left_y_axis')) Checkbox({ name: 'leftYAxis', group: 'yAxis'}) .select(true) .onChange((isChecked: boolean) => { @@ -294,7 +294,7 @@ struct ScrollBarChartPage2 { } Row() { - Text('右y轴： ') + Text($r('app.string.right_y_axis')) Checkbox({ name: 'rightYAxis', group: 'yAxis'}) .onChange((isChecked: boolean) => { if (this.rightAxis) { @@ -309,7 +309,7 @@ struct ScrollBarChartPage2 { @Builder axisColorSettings() { Row() { - Text('轴线文字和颜色: ') + Text($r('app.string.axis_color')) ForEach(this.colorSetter, (item: XAxisColorSetter) => { Row() { Text(item.colorText) @@ -346,7 +346,7 @@ struct ScrollBarChartPage2 { @Builder axisLineWidthSettings() { Row() { - Text('y轴线宽： ') + Text($r('app.string.line_width')) ForEach([ { text: '0.5', lineWidth: 0.5, lineWidthValue: 'l1' }, { text: '1', lineWidth: 1, lineWidthValue: 'l2' } diff --git a/entry/src/main/ets/pages/barCharts/SimpleWaterfallChartPage.ets b/entry/src/main/ets/pages/barCharts/SimpleWaterfallChartPage.ets index 0dafff9..cfe6fda 100644 --- a/entry/src/main/ets/pages/barCharts/SimpleWaterfallChartPage.ets +++ b/entry/src/main/ets/pages/barCharts/SimpleWaterfallChartPage.ets @@ -358,9 +358,9 @@ struct SimpleWaterfallChartPage { .height('70%') } - Row() { + Column() { Row() { - Text('普通: ') + Text($r('app.string.normal')) Radio({ value: 'CUBIC_BEZIER', group: 'dataType' }) .checked(true) .onChange(async (isChecked: boolean) => { @@ -374,7 +374,7 @@ struct SimpleWaterfallChartPage { } Row() { - Text('通过Y轴分段: ') + Text($r('app.string.segmented_by_y_axis')) Radio({ value: 'CUBIC_BEZIER', group: 'dataType' }) .checked(false) .onChange(async (isChecked: boolean) => { @@ -388,7 +388,7 @@ struct SimpleWaterfallChartPage { } Row() { - Text('最高最低点高亮: ') + Text($r('app.string.highlight_the_highest_and_lowest_points')) Radio({ value: 'CUBIC_BEZIER', group: 'dataType' }) .checked(false) .onChange(async (isChecked: boolean) => { @@ -403,7 +403,7 @@ struct SimpleWaterfallChartPage { }.alignSelf(ItemAlign.Center) Row() { - Text('测试数据: ') + Text($r('app.string.test_data')) Radio({ value: 'test', group: 'dataType' }) .checked(false) .onChange((isChecked: boolean) => { diff --git a/entry/src/main/ets/pages/lineCharts/LineChartNotAxisConfigPage.ets b/entry/src/main/ets/pages/lineCharts/LineChartNotAxisConfigPage.ets index 95a14c4..cfb2c4b 100644 --- a/entry/src/main/ets/pages/lineCharts/LineChartNotAxisConfigPage.ets +++ b/entry/src/main/ets/pages/lineCharts/LineChartNotAxisConfigPage.ets @@ -174,7 +174,7 @@ struct LineChartNotAxisConfigPage { .padding({ top: 5 }) Flex({justifyContent: FlexAlign.Center, direction: FlexDirection.Column}) { - Text('演示不设置任何Axis轴的默认情况!') + Text($r('app.string.display_no_axis')) .fontSize(14).fontWeight(FontWeight.Medium).fontColor(Color.Orange) }.margin(10) diff --git a/entry/src/main/ets/pages/lineCharts/LineChartPage.ets b/entry/src/main/ets/pages/lineCharts/LineChartPage.ets index 3a44e76..29c96b8 100644 --- a/entry/src/main/ets/pages/lineCharts/LineChartPage.ets +++ b/entry/src/main/ets/pages/lineCharts/LineChartPage.ets @@ -99,10 +99,10 @@ struct LineChartPage { Mode.HORIZONTAL_BEZIER ] @Local modeValueList: Array = [ - { value: '直线' }, - { value: '步进' }, - { value: '贝塞尔曲线' }, - { value: '橫向贝塞尔曲线' }, + { value: $r('app.string.linear') }, + { value: $r('app.string.stepped') }, + { value: $r('app.string.cubic') }, + { value: $r('app.string.horizon_cubic') }, ] @Local xPositionList: number[] = [ XAxisPosition.TOP, @@ -466,14 +466,14 @@ struct LineChartPage { value: this.gridLineAlpha!! }) MpSelect({ - name: '数据类型', + name: $r('app.string.data_type'), selectItem: this.mode!!, itemsList: this.modeList, valuesList: this.modeValueList }) Row() { - Text('多颜色(曲线不支持）： ') + Text($r('app.string.multi_color')) Row() { Checkbox() .select(false) @@ -491,9 +491,7 @@ struct LineChartPage { Row() { - Text('X轴是否显示： ') - Row() { - Text('X轴: ') + Text($r('app.string.show_x_axis')) Checkbox({ name: 'isShowXAxis', group: 'xAxis' }) .select(true) .onChange((isChecked: boolean) => { @@ -503,11 +501,10 @@ struct LineChartPage { this.model.invalidate(); } }) - } }.alignSelf(ItemAlign.Start) Row() { - Text('多颜色数据点：') + Text($r('app.string.multi_color_data_points')) Checkbox() .onChange((isChecked: boolean) => { if (isChecked) { @@ -522,18 +519,18 @@ struct LineChartPage { if (this.xAxisVisible) { MpSelect({ - name: 'X轴位置', + name: $r('app.string.x_axis_position'), selectItem: this.xPosition!!, itemsList: this.xPositionList, valuesList: this.xPositionValueList }) - Text('X轴标签样式') + Text($r('app.string.x_axis_label_style')) .alignSelf(ItemAlign.Start) Row() { Column() { - Text('普通') + Text($r('app.string.normal')) Radio({ value: 'top', group: 'xAxisLabelStyle' }) .checked(true) .onChange((isChecked: boolean) => { @@ -547,7 +544,7 @@ struct LineChartPage { }.layoutWeight(1) Column() { - Text('加长、旋转') + Text($r('app.string.extend_and_rotate')) Radio({ value: 'bottom', group: 'xAxisLabelStyle' }) .checked(false) .onChange((isChecked: boolean) => { @@ -560,7 +557,7 @@ struct LineChartPage { }) }.layoutWeight(1) Column() { - Text('藏语') + Text($r('app.string.Tibetan')) Radio({ value: 'bottom', group: 'xAxisLabelStyle' }) .checked(false) .onChange((isChecked: boolean) => { @@ -574,7 +571,7 @@ struct LineChartPage { }.alignSelf(ItemAlign.Start) } - MpSlider({ name: 'X轴最大可见范围：', min: 3, max: 10, value: this.maxLabelSize!! }) + MpSlider({ name: $r('app.string.visible_xrange_maximum'), min: 3, max: 10, value: this.maxLabelSize!! }) Button('moveViewTo(6,100)') .onClick(()=>{ @@ -590,9 +587,9 @@ struct LineChartPage { }).margin(10) Row() { - Text('Y轴是否显示： ') + Text($r('app.string.show_y_axis')) Row() { - Text('左Y轴: ') + Text($r('app.string.left_y_axis')) Checkbox({ name: 'leftYAxis', group: 'yAxis' }) .select(true) .onChange((isChecked: boolean) => { @@ -606,7 +603,7 @@ struct LineChartPage { } Row() { - Text('右Y轴: ') + Text($r('app.string.right_y_axis')) Checkbox({ name: 'rightYAxis', group: 'yAxis' }) .onChange((isChecked: boolean) => { if (this.rightAxis) { @@ -621,9 +618,9 @@ struct LineChartPage { if (this.leftAxisVisible) { Row() { - Text('左Y轴位置： ') + Text($r('app.string.left_y_axis_position')) Row() { - Text('表外: ') + Text($r('app.string.outside')) Radio({ value: 'outSideChart', group: 'leftYAxisLabelPosition' }) .checked(true) .onChange((isChecked: boolean) => { @@ -636,7 +633,7 @@ struct LineChartPage { } Row() { - Text('表内: ') + Text($r('app.string.inside')) Radio({ value: 'inSideChart', group: 'leftYAxisLabelPosition' }) .checked(false) .onChange((isChecked: boolean) => { @@ -652,9 +649,9 @@ struct LineChartPage { if (this.rightAxisVisible) { Row() { - Text('右Y轴位置： ') + Text($r('app.string.right_y_axis_position')) Row() { - Text('表外: ') + Text($r('app.string.outside')) Radio({ value: 'outSideChart', group: 'rightYAxisLabelPosition' }) .checked(true) .onChange((isChecked: boolean) => { @@ -667,7 +664,7 @@ struct LineChartPage { } Row() { - Text('表内: ') + Text($r('app.string.inside')) Radio({ value: 'inSideChart', group: 'rightYAxisLabelPosition' }) .checked(false) .onChange((isChecked: boolean) => { @@ -683,7 +680,7 @@ struct LineChartPage { if (this.leftAxisVisible) { MpSelect({ - name: '左Y轴LimitLine位置', + name: $r('app.string.left_y_axis_limitLine_position'), selectItem: this.limitLinePosition!!, itemsList: this.limitLinePositionList, valuesList: this.limitLinePositionValueList @@ -692,7 +689,7 @@ struct LineChartPage { if(this.limitLinePosition != 0) { Row() { - Text('LimitLine是否在数据后： ') + Text('app.string.limit_line_after_data') Checkbox({ name: 'isShowLimitLineBehindData', group: 'isShowLimitLineBehindData' }) .select(false) .onChange((isChecked: boolean) => { @@ -705,7 +702,7 @@ struct LineChartPage { } Row() { - Text('是否允许高亮线为虚线： ') + Text($r('app.string.highlight_dashed_line')) Checkbox({ name: 'enableDashedHighlightLine'}) .select(false) .onChange((isChecked: boolean) => { @@ -718,7 +715,7 @@ struct LineChartPage { }) }.alignSelf(ItemAlign.Start) - Text('背景色：') + Text($r('app.string.background')) GridRow({ columns: 6, gutter: { x: 5, y: 10 }, diff --git a/entry/src/main/ets/utils/ImageSaver.ets b/entry/src/main/ets/utils/ImageSaver.ets index e309042..757a327 100644 --- a/entry/src/main/ets/utils/ImageSaver.ets +++ b/entry/src/main/ets/utils/ImageSaver.ets @@ -22,7 +22,9 @@ import { LogUtil } from './LogUtil'; export default class ImageSaver { private imageString: string | null = null; private uri: string | null = null; - + getResourceString(res:Resource){ + return getContext().resourceManager.getStringSync(res.id) + } public saveImage(filename: string, context: CanvasRenderingContext2D | null) { this.imageString = context?.toDataURL() ?? null; try { @@ -36,8 +38,8 @@ export default class ImageSaver { this.uri = PhotoSaveResult[0]; } AlertDialog.show({ - title: '保存图像', - message: '路径：' + this.uri, + title: $r('app.string.save_image'), + message: this.getResourceString($r('app.string.route')) + this.uri, autoCancel: true, alignment: DialogAlignment.Bottom, gridCount: 4, @@ -45,12 +47,12 @@ export default class ImageSaver { dx: 0, dy: -20 }, primaryButton: { - value: '取消', + value: $r('app.string.cancel'), action: () => { } }, secondaryButton: { - value: '确认', + value: $r('app.string.confirm'), action: () => { this.saveFile(); } @@ -81,7 +83,7 @@ export default class ImageSaver { fs.closeSync(file); try { promptAction.showToast({ - message: '保存成功', + message: $r('app.string.save_successful'), duration: 1200, }); } catch (error) { diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index d6c4ec3..cb3ac24 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -7,6 +7,218 @@ { "name": "description_mainability", "value": "Empty Ability" + }, + { + "name": "linear", + "value": "LINEAR" + }, + { + "name": "stepped", + "value": "STEPPED" + }, + { + "name": "cubic", + "value": "CUBIC_BEZIER" + }, + { + "name": "horizon_cubic", + "value": "HORIZONTAL_BEZIER" + }, + { + "name": "data_type", + "value": "data type:" + }, + { + "name": "multi_color", + "value": "Multi color (not supported for curves)" + }, + { + "name": "show_x_axis", + "value": "display x-axis:" + }, + { + "name": "show_y_axis", + "value": "display y-axis:" + }, + { + "name": "multi_color_data_points", + "value": "Multi color data points" + }, + { + "name": "x_axis_position", + "value": "X-axis position" + }, + { + "name": "x_axis_label_style", + "value": "X-axis_label style" + }, + { + "name": "normal", + "value": "normal" + }, + { + "name": "extend_and_rotate", + "value": "extend and rotate" + }, + { + "name": "Tibetan", + "value": "Tibetan" + }, + { + "name": "visible_xrange_maximum", + "value": "Maximum visible range of X-axis" + }, + { + "name": "left_y_axis", + "value": "Left Y-axis:" + }, + { + "name": "right_y_axis", + "value": "Right Y-axis:" + }, + { + "name": "left_y_axis_position", + "value": "Left Y-axis position:" + }, + { + "name": "right_y_axis_position", + "value": "Right Y-axis position:" + }, + { + "name": "outside", + "value": "Outside" + }, + { + "name": "inside", + "value": "Inside" + }, + { + "name": "left_y_axis_limitLine_position", + "value": "Left Y-axis LimitLine position" + }, + { + "name": "highlight_dashed_line", + "value": "highlight line is a dashed line" + }, + { + "name": "background", + "value": "Background" + }, + { + "name": "limit_line_after_data", + "value": "Set whether the limitLine after the data" + }, + { + "name": "save_image", + "value": "save image" + }, + { + "name": "route", + "value": "route: " + }, + { + "name": "save_successful", + "value": "save successful" + }, + { + "name": "cancel", + "value": "cancel" + }, + { + "name": "confirm", + "value": "confirm" + }, + { + "name": "display_no_axis", + "value": "Demonstrate the default situation of not setting any Axis!" + }, + { + "name": "gradient", + "value": "Gradient" + }, + { + "name": "stack", + "value": "Stack" + }, + { + "name": "refresh", + "value": "refresh" + }, + { + "name": "show_mark_view", + "value": "Set MarkerView" + }, + { + "name": "width_percentage", + "value": "width percentage" + }, + { + "name": "custom_click", + "value": "custom click" + }, + { + "name": "enable_all_events", + "value": "Enable all events: " + }, + { + "name": "event_activated", + "value": "Is the event activated: " + }, + { + "name": "single_tap", + "value": "Single Tap" + }, + { + "name": "double_tap", + "value": "Double Tap" + }, + { + "name": "long_press", + "value": "Long press" + }, + { + "name": "event_trigger", + "value": "Custom UI event trigger type:" + }, + { + "name": "red", + "value": "red" + }, + { + "name": "blue", + "value": "blue" + }, + { + "name": "y_axis_extension", + "value": "y-axis extension" + }, + { + "name": "axis_color", + "value": "Axis text and color: " + }, + { + "name": "line_width", + "value": "line width: " + }, + { + "name": "grid_line_color", + "value": "Grid line color: " + }, + { + "name": "custom_gridlines", + "value": "Custom gridlines" + }, + { + "name": "segmented_by_y_axis", + "value": "Segmented by Y-axis" + }, + { + "name": "highlight_the_highest_and_lowest_points", + "value": "Highlight the highest and lowest points" + }, + { + "name": "test_data", + "value": "test data:" } ] } diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json new file mode 100644 index 0000000..3ff080e --- /dev/null +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -0,0 +1,225 @@ +{ + "string": [ + { + "name": "entry_MainAbility", + "value": "MPChart" + }, + { + "name": "description_mainability", + "value": "Empty Ability" + }, + { + "name": "linear", + "value": "直线" + }, + { + "name": "stepped", + "value": "步进" + }, + { + "name": "cubic", + "value": "贝塞尔曲线" + }, + { + "name": "horizon_cubic", + "value": "橫向贝塞尔曲线" + }, + { + "name": "data_type", + "value": "数据类型：" + }, + { + "name": "multi_color", + "value": "多颜色（曲线不支持）" + }, + { + "name": "show_x_axis", + "value": "x轴是否显示：" + }, + { + "name": "show_y_axis", + "value": "y轴是否显示：" + }, + { + "name": "multi_color_data_points", + "value": "多颜色数据点" + }, + { + "name": "x_axis_position", + "value": "X轴位置" + }, + { + "name": "x_axis_label_style", + "value": "X轴标签样式" + }, + { + "name": "normal", + "value": "普通：" + }, + { + "name": "extend_and_rotate", + "value": "加长、旋转：" + }, + { + "name": "Tibetan", + "value": "藏语：" + }, + { + "name": "visible_xrange_maximum", + "value": "X轴最大可见范围" + }, + { + "name": "left_y_axis", + "value": "左y轴" + }, + { + "name": "right_y_axis", + "value": "右y轴" + }, + { + "name": "left_y_axis_position", + "value": "左y轴位置:" + }, + { + "name": "right_y_axis_position", + "value": "右y轴位置:" + }, + { + "name": "outside", + "value": "表外" + }, + { + "name": "inside", + "value": "表内" + }, + { + "name": "left_y_axis_limitLine_position", + "value": "左y轴limitline位置" + }, + { + "name": "highlight_dashed_line", + "value": "高亮线是否为虚线" + }, + { + "name": "background", + "value": "背景色" + }, + { + "name": "limit_line_after_data", + "value": "limit line是否在数据后" + }, + { + "name": "save_image", + "value": "保存图像" + }, + { + "name": "route", + "value": "路径：" + }, + { + "name": "save_successful", + "value": "保存成功" + }, + { + "name": "cancel", + "value": "取消" + }, + { + "name": "confirm", + "value": "确认" + }, + { + "name": "display_no_axis", + "value": "演示不设置任何Axis轴的默认情况!" + }, + { + "name": "gradient", + "value": "渐变" + }, + { + "name": "stack", + "value": "堆叠" + }, + { + "name": "refresh", + "value": "刷新" + }, + { + "name": "show_mark_view", + "value": "是否设置markview" + }, + { + "name": "width_percentage", + "value": "宽度百分比" + }, + { + "name": "custom_click", + "value": "自定义点击" + }, + { + "name": "enable_all_events", + "value": "是否启用所有事件：" + }, + { + "name": "event_activated", + "value": "事件是否开启：" + }, + { + "name": "single_tap", + "value": "单击" + }, + + { + "name": "double_tap", + "value": "双击" + }, + { + "name": "long_press", + "value": "长按" + }, + { + "name": "event_trigger", + "value": "自定义ui事件触发类型：" + }, + { + "name": "red", + "value": "红色" + }, + { + "name": "blue", + "value": "蓝色" + }, + { + "name": "y_axis_extension", + "value": "y轴延申是否开启" + }, + { + "name": "axis_color", + "value": "轴线文字和颜色: " + }, + { + "name": "line_width", + "value": "line width: " + }, + { + "name": "grid_line_color", + "value": "网格线颜色：" + }, + { + "name": "custom_gridlines", + "value": "自定义网格线" + }, + { + "name": "segmented_by_y_axis", + "value": "通过y轴分段：" + }, + { + "name": "highlight_the_highest_and_lowest_points", + "value": "最高最低点高亮：" + }, + { + "name": "test_data", + "value": "测试数据：" + } + ] +} -- Gitee From b6f17572104be8700a9019881da4861b4c235bd1 Mon Sep 17 00:00:00 2001 From: liuhaikang Date: Mon, 23 Sep 2024 10:51:11 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=8B=B1=E6=96=87?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liuhaikang --- README.md | 2778 ++++++++++++++++---------------- README_zh.md | 4361 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 5750 insertions(+), 1389 deletions(-) create mode 100644 README_zh.md diff --git a/README.md b/README.md index b434fbd..3d3c590 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,51 @@ # mpchart -## 简介 -mpchart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI，mpchart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。 +## Introduction +mpchart is a chart library that contains various types of custom charts, including line charts, bar charts, pie charts, candle charts, bubble charts, radar charts, and waterfall charts. These charts are mainly used to summarize service data, such as the sales data trend chart and stock price trend chart, helping you quickly implement the chart user interface (UI). -## 效果展示： +## Effects ![gif](preview/preview.gif) -## 安装教程 +## How to Install ``` ohpm install @ohos/mpchart ``` -OpenHarmony ohpm环境配置等更多内容，请参考 [如何安装OpenHarmony ohpm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md) 。 +For details, see [Installing an OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md). -## 使用说明 +## How to Use -### 柱状图 +### Bar Chart -1. 柱状图数据初始化： +1. Initialize the bar chart data. ``` import { - BarChart, // 柱状图图表类 - BarChartModel, // 柱状图配置构建类 - BarData, // 柱状图数据包 - BarDataSet, // 柱状图数据集合 - BarEntry, // 柱状图数据结构 - ChartGesture, // 手势事件模式 - Description, // 图表Description(描述)部件 - EntryOhos, // 图表数据结构基础类 - Fill, // 图表填充类型构建类 - Highlight, // 图表高亮数据 - IBarDataSet, // 柱状图数据集合的操作类 - JArrayList, // 工具类：数据集合 - Legend, // 图表Legend(图例)部件 - LimitLabelPosition, // 图表的LimitLine标签位置枚举类 - LimitLine, // 图表LimitLine - MarkerView, // 图表的Marker(标志气泡)部件 - OnChartGestureListener, // 手势事件监听 - OnChartValueSelectedListener, // 数据选择监听 - XAxis, // 图表X轴部件 - XAxisPosition, // 图表X轴标签位置枚举类 - YAxis, // 图表Y轴部件 - YAxisLabelPosition // 图表Y轴标签位置枚举类 + BarChart, // Bar chart class. + BarChartModel, // Configuration builder class of the bar chart. + BarData, // Data packet of the bar chart. + BarDataSet, // Dataset of the bar chart. + BarEntry, // Data structure of the bar chart. + ChartGesture, // Gesture event mode. + Description, // The Description component. + EntryOhos, // Base class of the chart data structure. + Fill, // Builder class of the chart filling type. + Highlight, // Highlighted data in the chart. + IBarDataSet, // Operation class of the bar chart data set. + JArrayList, // Utility class of the dataset. + Legend, // The Legend component. + LimitLabelPosition, // Enum class of the LimitLine label position. + LimitLine, // The LimitLine component. + MarkerView, // The Markerview component. + OnChartGestureListener, // Gesture event listener. + OnChartValueSelectedListener, // Value selection listener. + XAxis, // The X-axis component. + XAxisPosition, // Enum class of the X-axis label position. + YAxis, // The Y-axis component. + YAxisLabelPosition // Enum class of the Y-axis label position. } from '@ohos/mpchart'; -// 构造数据选择监听器 +// Construct a listener for value selection events. private valueSelectedListener: OnChartValueSelectedListener = { onValueSelected: (e: EntryOhos, h: Highlight) => { // ...todoSomething @@ -55,7 +55,7 @@ OpenHarmony ohpm环境配置等更多内容，请参考 [如何安装OpenHarmony } } - // 构造手势识别事件监听器 + // Construct a listener for gesture events. private chartGestureListener: OnChartGestureListener = { onChartGestureStart: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => { }, @@ -82,41 +82,41 @@ OpenHarmony ohpm环境配置等更多内容，请参考 [如何安装OpenHarmony } } - // 图表数据初始化 + // Initialize the chart data. aboutToAppear() { - // Step1:必须：初始化图表配置构建类 + // Initialize the configuration builder class of the chart. This step is mandatory. this.model = new BarChartModel(); - // Step2:配置图表指定样式，各部件间没有先后之分 + // Configure the chart style. The components can be configured in any sequence. - // 为图表添加数据选择的监听器 + // Add a value selection listener for the chart. this.model.setOnChartValueSelectedListener(this.valueSelectedListener); - // 为图表添加手势识别监听器 + // Add a gesture listener for the chart. this.model.setOnChartGestureListener(this.chartGestureListener); - // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件 + // Obtain the Description component and disable it. That is, the Description component is not drawn in the chart. let description: Description | null = this.model.getDescription() if (description) { description.setEnabled(false); } - // 获取图表图例部件，设置图表图例部件不可用 + // Obtain the Legend component and disable it. let l: Legend | null = this.model.getLegend(); if (l) { l.setEnabled(false); } - // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签 + // Set the maximum visible number of value labels drawn on the chart. If the data number exceeds this value, the value label of the chart is not drawn. this.model.setMaxVisibleValueCount(40); - // 是否绘制图表的背景色，绘制范围为图表柱状图的绘制范围，不包含轴线之外的部分 + // Set whether to draw the background color of the chart. The background color is drawn in the bar chart, excluding the part outside the axis. this.model.setDrawGridBackground(false); - // 设置图表的背景色，颜色的规格需要满足CanvasRenderingContext2D.fillstyle/strokestyle规格 + // Set the background color of the chart. The color must meet the CanvasRenderingContext2D.fillstyle/strokestyle specifications. this.model.setGridBackgroundColor('#500000ff') - // 设置不绘制柱状图的柱体阴影背景 + // Set whether to draw the bar shadow. this.model.setDrawBarShadow(false); - // 设置柱状图的数值在柱体上方 + // Set whether to draw the value above the bar. this.model.setDrawValueAboveBar(false); - // 设置柱状图的高亮范围是否为整个柱体，只在堆叠柱状图中有区别 + // Set whether to highlight the full bar. This function can only be used in stacked bar chart. this.model.setHighlightFullBarEnabled(false); - // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等 + // Set LimitLine of the left Y-axis. You can set the line width, line segment style, label position, and text size. this.limitLine1 = new LimitLine(120, 'Upper Limit'); this.limitLine1.setLineWidth(4); this.limitLine1.enableDashedLine(10, 10, 0); @@ -130,37 +130,37 @@ OpenHarmony ohpm环境配置等更多内容，请参考 [如何安装OpenHarmony this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM); this.limitLine2.setTextSize(10); - // 设置图表左Y轴信息 + // Set the information of the left Y-axis. this.leftAxis = this.model.getAxisLeft(); if (this.leftAxis) { this.leftAxis.setAxisMinimum(0); // this replaces setStartAtZero(true) this.leftAxis.setDrawLimitLinesBehindData(false); - // 添加LimitLines + // Add LimitLines to the left Y-axis. this.leftAxis.addLimitLine(this.limitLine1); this.leftAxis.addLimitLine(this.limitLine2); } - // 设置图表右Y轴信息 + // Set the information of the right Y-axis. this.rightAxis = this.model.getAxisRight(); if (this.rightAxis) { this.rightAxis.setEnabled(false); this.rightAxis.setAxisMinimum(0); } - // 设置X轴信息 + // Set the information of the X-axis. this.xAxis = this.model.getXAxis(); if (this.xAxis) { this.xAxis.setPosition(XAxisPosition.BOTTOM); } - // 为图表设置markerView + // Set the MarkerView component. this.normalMarker = new MarkerView(); this.model.setMarker(this.normalMarker); - // 也可设置定义图表MarkerView + // Set a custom MarkerView. This step is optional. this.stackMarker = new CustomMarkerView(); - // 生成单一颜色数据 + // Generate normal data. this.data = this.getNormalData(); - // 将数据与图表配置类绑定 + // Bind the data to the chart configuration class. this.model.setData(this.data); - // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据 + // Set the maximum visible range of the X-axis. By default, all the data in X-axis is visible. this.model.setVisibleXRangeMaximum(20); } @@ -172,16 +172,16 @@ OpenHarmony ohpm环境配置等更多内容，请参考 [如何安装OpenHarmony let dataSet: BarDataSet = new BarDataSet(values, 'DataSet'); dataSet.setHighLightColor(Color.Black); dataSet.setDrawIcons(false); - // 为柱体添加颜色信息 + // Set the color of the bar. dataSet.setColorByColor(Color.Pink); let dataSetList: JArrayList = new JArrayList(); dataSetList.add(dataSet); let barData: BarData = new BarData(dataSetList); - //设置柱状图宽度 + // Set the width of the bar. barData.setBarWidth(0.85); - //设置顶部圆角半径 + // Set the top radius of the bar. barData.setTopRadius(5); return barData; } @@ -210,7 +210,7 @@ OpenHarmony ohpm环境配置等更多内容，请参考 [如何安装OpenHarmony gradientFills.add(new Fill(startColor3, endColor3)); gradientFills.add(new Fill(startColor4, endColor4)); gradientFills.add(new Fill(startColor5, endColor5)); - // 为柱体添加渐变的颜色信息 + // Set the gradient color of the bar. dataSet.setFills(gradientFills); let dataSetList: JArrayList = new JArrayList(); @@ -229,7 +229,7 @@ OpenHarmony ohpm环境配置等更多内容，请参考 [如何安装OpenHarmony let set1: BarDataSet | null = null; set1 = new BarDataSet(values, "Statistics Vienna 2014"); set1.setDrawIcons(false); - // 为柱体添加指定分段的颜色信息 + // Set the color for the specified segments of the bar. set1.setColorsByArr([Color.Red, Color.Green, Color.Pink]); set1.setStackLabels(["Births", "Divorces", "Marriages"]); @@ -242,48 +242,48 @@ OpenHarmony ohpm环境配置等更多内容，请参考 [如何安装OpenHarmony } ``` -2. 添加数据到自定义竖向柱状图表组件 +2. Add the data to the custom vertical bar chart component. ``` -// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 -// 如果在之后通过事件触发， -// 可通过barData.notifyDataSetChanged();来触发数据更新， -// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， -// 可通过this.model.invalidate();来触发绘制更新。 +// Set the configuration builder class for the component. If the chart needs to be displayed during page initialization, use aboutToAppear to build the chart data. +// If the chart is triggered by event, +// you can use barData.notifyDataSetChanged(); to update data, +// use this.model.notifyDataSetChanged(); to update axis data, +// and use This.model.invalidate(); to update chart model. BarChart({ model: this.model }) .width('100%') .height('30%') ``` -### 线形图 +### Line chart -1. 线形图数据初始化： +1. Initialize the line chart data. ``` import { - JArrayList, // 工具类：数据集合 - XAxis, // 图表X轴部件 - XAxisPosition, // 图表X轴标签位置枚举类 - YAxis, // 图表Y轴部件 - Description, // 图表描述标签 - Legend, // 图表Legend(图例)部件 - OnChartValueSelectedListener, // - Highlight,// 图表高亮数据 - EntryOhos,// 图表数据结构基础类 - YAxisLabelPosition,// 图表Y轴标签位置枚举类 - LineDataSet, //线形图数据集合 - ILineDataSet, // 线形图数据集合的操作类 - LineData, //线形图数据包 - Mode, //线形图形状 - LineChart, // 线形图图表类 - LineChartModel,// 线形图配置构建类 - LimitLine, // 图表LimitLine - LimitLabelPosition, // 图表的LimitLine标签位置枚举类 - ChartColorStop, //颜色类 - LegendForm, //图例形状 + JArrayList, // Utility class of the dataset. + XAxis, // The X-axis component. + XAxisPosition, // Enum class of the X-axis label position. + YAxis, // The Y-axis component. + Description, // The Description component. + Legend, // The Legend component. + OnChartValueSelectedListener, // Value selection listener. + Highlight, // Highlighted data in the chart. + EntryOhos, // Base class of the chart data structure. + YAxisLabelPosition, // Enum class of the Y-axis label position. + LineDataSet, // Dataset of the line chart. + ILineDataSet, // Operation class of the line data set. + LineData, // Data packet of the line chart. + Mode, // Enum class of the line chart shape. + LineChart, // Line chart class. + LineChartModel,// Configuration builder class of the line chart. + LimitLine, // The LimitLine component. + LimitLabelPosition, // Enum class of the LimitLine label position. + ChartColorStop, // Color class. + LegendForm, // Enum class of the legend form. } from '@ohos/mpchart'; -// 构造数据选择监听器 +// Construct a listener for value selection events. private valueSelectedListener: OnChartValueSelectedListener = { onValueSelected: (e: EntryOhos, h: Highlight) => { // ...todoSomething @@ -293,23 +293,23 @@ import { } } - // 图表数据初始化 + // Initialize the chart data. aboutToAppear() { - // Step1:必须：初始化图表配置构建类 + // Initialize the configuration builder class of the chart. This step is mandatory. this.model = new LineChartModel(); - // Step2:配置图表指定样式，各部件间没有先后之分 + // Configure the chart style. The components can be configured in any sequence. - // 为图表添加数据选择的监听器 + // Add a value selection listener for the chart. this.model.setOnChartValueSelectedListener(this.valueSelectedListener); - // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件 + // Obtain the Description component and disable it. That is, the Description component is not drawn in the chart. let description: Description | null = this.model.getDescription() if (description) { description.setEnabled(false); } - // 获取图表图例部件，设置图表图例形状为线形 + // Obtain the Legend component and set the legend form to line. let legend: Legend | null = this.model.getLegend(); if (legend) { legend.setEnabled(true); @@ -317,15 +317,15 @@ import { legend.setForm(LegendForm.LINE); } - // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签 + // Set the maximum visible number of value labels drawn on the chart. If the data number exceeds this value, the value label of the chart is not drawn. this.model.setMaxVisibleValueCount(60); - // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等 + // Set the LimitLine component of the left Y-axis, which includes the line width, line segment style, label position, and label font size. this.limitLine1 = new LimitLine(120, 'Upper Limit'); this.limitLine1.setLineWidth(4); - //设置虚线样式 + // Set the dashed line style. this.limitLine1.enableDashedLine(10, 10, 0); - //设置标签位置 + // Set the label position. this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP); this.limitLine1.setTextSize(10); @@ -336,22 +336,22 @@ import { this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM); this.limitLine2.setTextSize(10); - // 设置图表左Y轴信息 + // Set the information of the left Y-axis. this.leftAxis = this.model.getAxisLeft(); if (this.leftAxis) { - //设置绘制标签个数 + // Set the number of labels. this.leftAxis.setLabelCount(8, false); - //设置标签位置 + // Set the label position. this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART) - //设置距离顶部距离 + // Set the distance between the highest data point and the top of the chart. this.leftAxis.setSpaceTop(15); - //设置最大值 + // Set the maximum value. this.leftAxis.setAxisMinimum(0); - //设置最小值 + // Set the minimum value. this.leftAxis.setAxisMaximum(200); } - // 设置图表右Y轴信息 + // Set the information of the right Y-axis. this.rightAxis = this.model.getAxisRight(); if (this.rightAxis) { this.rightAxis.setLabelCount(8, false); @@ -362,7 +362,7 @@ import { this.rightAxis.setEnabled(false); } - // 设置X轴信息 + // Set the information of the X-axis. this.xAxis = this.model.getXAxis(); if (this.xAxis) { this.xAxis.setPosition(XAxisPosition.BOTTOM); @@ -371,16 +371,16 @@ import { this.xAxis.setLabelCount(7); } - // 为图表设置markerView + // Set the MarkerView component. this.normalMarker = new MarkerView(); this.model.setMarker(this.normalMarker); - // 也可设置定义图表MarkerView + // Set a custom MarkerView. This step is optional. this.stackMarker = new CustomMarkerView(); - // 生成图表数据 + // Generate the chart data. let lineData: LineData = this.getLineData(); - // 将数据与图表配置类绑定 + // Bind the data to the chart configuration class. this.model.setData(lineData); - // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据 + // Set the maximum visible range of the X-axis. By default, all the data in X-axis is visible. this.model.setVisibleXRangeMaximum(20); } @@ -402,12 +402,12 @@ import { this.dataSet.setHighLightColor(Color.Black); this.dataSet.setDrawIcons(false); - this.dataSet.setMode(Mode.LINEAR); //直线模式 - this.dataSet.setDrawCircles(true); //折线点画圆圈 - this.dataSet.setDrawCircleHole(false); //设置内部孔 - this.dataSet.setColorByColor(Color.Black); //设置折线颜色 + this.dataSet.setMode (Mode.LINEAR); // Set the linear mode. + this.dataSet.setDrawCircles(true); // Set whether to draw circles for the entries. + this.dataSet.setDrawCircleHole (false); // Set whether to draw the circle hole. + this.dataSet.setColorByColor(Color.Black); // Set the line color. - //渐变色填充 + // Set the gradient fill color. let gradientFillColor = new JArrayList(); gradientFillColor.add(["#0C0099CC", 0.2]); gradientFillColor.add(["#7F0099CC", 0.4]); @@ -416,12 +416,12 @@ import { this.dataSet.setDrawFilled(true); - // 设置数据点的颜色 - this.dataSet.setCircleColor(Color.Blue); // 可以设置为你想要的颜色 + // Set the circle color. + this.dataSet.setCircleColor(Color.Blue); // Set the color as required. - // 设置数据点的半径 - this.dataSet.setCircleRadius(4); // 设置半径大小 - this.dataSet.setCircleHoleRadius(2); //设置内径 + // Set the radius of the data point. + this.dataSet.setCircleRadius(4); // Set the circle radius. + this.dataSet.setCircleHoleRadius(2); // Set the radius of the circle hole. let dataSetList: JArrayList = new JArrayList(); dataSetList.add(this.dataSet); @@ -432,86 +432,86 @@ import { ``` -2. 添加数据到自定义线形图表组件 +2. Add the data to the custom line chart component. ``` -// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 -// 如果在之后通过事件触发， -// 可通过lineData.notifyDataSetChanged();来触发数据更新， -// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， -// 可通过this.model.invalidate();来触发绘制更新。 +// Set the configuration builder class for the component. If the chart needs to be displayed during page initialization, use aboutToAppear to build the chart data. +// If the chart is triggered by event, +// you can use lineData.notifyDataSetChanged(); to update data, +// use this.model.notifyDataSetChanged(); to update axis data, +// and use This.model.invalidate(); to update chart model. LineChart({ model: this.model }) .width('100%') .height('30%') ``` -### 饼状图 +### Pie Chart -1. 饼状图数据初始化： +1. Initialize the pie chart data. ``` import { - ChartGesture, // 图表手势 - ColorTemplate, // 颜色模板 - EntryOhos, // 图表数据结构基础类 - Highlight, // 高亮 - IPieDataSet, // 饼状图数据集接口 - JArrayList, // 工具类：数据集合 - Legend, // 图表Legend(图例)部件 - MPPointF, // MPPointF - OnChartGestureListener, // 图表手势监听器接口 - OnChartValueSelectedListener, // 图表数值选择监听器接口 - PieChart, // 饼状图组件 - PieChartModel, // 饼状图配置构建类 - PieData, // 饼状图数据包 - PieDataSet, // 饼状图数据集合 - PieEntry, // 饼状图数据结构 + ChartGesture, // Chart gesture. + ColorTemplate, // Color template. + EntryOhos, // Base class of the chart data structure. + Highlight, // Highlighted data in the chart. + IPieDataSet, // Pie dataset API. + JArrayList, // Utility class of the data set. + Legend, // The Legend component. + MPPointF, // The MPPointF class. + OnChartGestureListener, // Gesture event listener. + OnChartValueSelectedListener, // Value selection listener. + PieChart, // The PieChart component. + PieChartModel, // The configuration builder class of the pie chart. + PieData, // Data packet of the pie chart. + PieDataSet, // Dataset of the pie chart. + PieEntry, // Data structure of the pie chart. } from '@ohos/mpchart'; - // 图表数据初始化 + // Initialize the chart data. - // Step1:必须：初始化图表配置构建类 + // Initialize the configuration builder class of the chart. This step is mandatory. private model: PieChartModel = new PieChartModel(); aboutToAppear() { - // Step2：配置图表的特定样式，各部件间没有先后之分 + // Configure the chart style. The components can be configured in any sequence. let l: Legend | null = this.model.getLegend(); if (l) { l.setEnabled(true); } - this.model.animateX(1000); // 启用X轴动画效果，动画持续时间为1000毫秒 - this.model.setUsePercentValues(true); // 使用百分比值 - this.model.getDescription()?.setEnabled(false); // 禁用描述信息 - this.model.setExtraOffsets(5, 10, 5, 5); // 设置额外偏移量 + this.model.animateX(1000); // Animates the charts values on the X-axis and set the animation duration to 1000 ms. + this.model.setUsePercentValues(true); // Set whether to use the percent value. + this.model.getDescription()? .setEnabled(false); // Set whether to enable the Description component. + this.model.setExtraOffsets(5, 10, 5, 5); // Set the extra offsets. - this.model.setOnChartGestureListener(this.chartGestureListener); // 设置图表手势监听器 + this.model.setOnChartGestureListener(this.chartGestureListener); // Set the listener for the gesture events. - this.model.setDragDecelerationFrictionCoef(0.95); // 设置拖动减速摩擦系数 + this.model.setDragDecelerationFrictionCoef(0.95); // Set the drag deceleration friction coefficient. - this.model.setCenterText("mpchart"); // 设置中心文本 - this.model.setCenterTextSize(22); // 设置中心文本大小 + this.model.setCenterText("mpchart"); // Set the center text. + this.model.setCenterTextSize(22); // Set the size of the center text. - this.model.setDrawHoleEnabled(true); // 启用绘制中心孔 - this.model.setHoleColor(Color.White); // 设置中心孔颜色 + this.model.setDrawHoleEnabled(true); // Set whether to draw the center hole. + this.model.setHoleColor(Color.White); // Set the color of the center hole. - this.model.setTransparentCircleColor(Color.Red); // 设置透明圆环颜色 - this.model.setTransparentCircleAlpha(110); // 设置透明圆环透明度 + this.model.setTransparentCircleColor(Color.Red); // Set the color of the transparent circle. + this.model.setTransparentCircleAlpha(110); // Set the alpha of the transparent circle. - this.model.setHoleRadius(58); // 设置中心孔半径 - this.model.setTransparentCircleRadius(61); // 设置透明圆环半径 + this.model.setHoleRadius(58); // Set the radius of the center hole. + this.model.setTransparentCircleRadius(61); // Set the radius of the transparent circle. - this.model.setDrawCenterText(true); // 绘制中心文本 + this.model.setDrawCenterText (true); // Set whether to draw the center text. - this.model.setRotationAngle(0); // 设置旋转角度 - // 通过触摸启用图表的旋转 + this.model.setRotationAngle(0); // Set the rotation angle. + // Set whether to enable the rotation gestures on the chart. this.model.setRotationEnabled(true); - this.model.setHighlightPerTapEnabled(true); // 启用点击高亮效果 + this.model.setHighlightPerTapEnabled(true); // Set whether to enable the highlight effect. - this.setData(4, 10); // 设置图表数据 + this.setData (4, 10); // Set the chart data. } - // 初始化饼状图数据 + // Initialize the pie chart data. private setData(count: number, range: number): void { let entries: JArrayList = new JArrayList(); @@ -522,17 +522,17 @@ LineChart({ model: this.model }) this.parties[i % this.parties.length], undefined, undefined)); } - // 创建饼状图数据集对象，设置数据项和数据集名称 + // Create a pie data set object and set the names of data item and data set. let dataSet: PieDataSet = new PieDataSet(entries, "Election Results"); - // 设置是否绘制数据项图标 + // Set whether to draw icons for the data items. dataSet.setDrawIcons(false); - // 设置数据项之间的间隙 + // Set the gap between data items. dataSet.setSliceSpace(1); - // 设置数据项图标的偏移量 + // Set the offset of the icons. dataSet.setIconsOffset(new MPPointF(0, 40)); - // 设置选中时数据项的偏移距离 + // Set the offset of the selected data item. dataSet.setSelectionShift(5); - // 设置数据项文本颜色 + // Set the text color of the data item. dataSet.setValueTextColor(Color.White); @@ -557,55 +557,55 @@ LineChart({ model: this.model }) } colors.add(ColorTemplate.getHoloBlue()); dataSet.setColorsByList(colors); - // 生成图表数据 + // Generate the chart data. let data: PieData = new PieData(dataSet); - // 将数据与图表配置类绑定 + // Bind the data to the chart configuration class. this.model.setData(data); } ``` -2. 添加数据到自定义饼状图图表组件 +2. Add data to the custom pie chart component. ``` -// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 -// 如果在之后通过事件触发， -// 可通过dataSet.notifyDataSetChanged();来触发数据更新， -// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， -// 可通过this.model.invalidate();来触发绘制更新。 +// Set the configuration builder class for the component. If the chart needs to be displayed during page initialization, use aboutToAppear to build the chart data. +// If the chart is triggered by event, +// use dataSet.notifyDataSetChanged(); to update data, +// use this.model.notifyDataSetChanged(); to update axis data, +// and use this.model.invalidate(); to update drawing. PieChart({ model: this.model }) .width('100%') .height('70%') ``` -### 气泡图 +### Bubble Chart -1. 气泡图数据初始化： +1. Initialize the bubble chart data. ``` - // 导入一些图表相关的组件和类 + // Import the chart-related components and classes. import { - JArrayList, //工具类：数据集合 - XAxis, // 图表X轴部件 - XAxisPosition, // 图表X轴标签位置枚举类 - YAxis, // 图表Y轴部件 - Description, // 图表的描述信息 - Legend, // 图例 - OnChartValueSelectedListener, // 图表数值选中的监听器 - Highlight, // 高亮显示 - EntryOhos, // 图表数据结构基础类 - YAxisLabelPosition, // 图表Y轴标签位置枚举类 - BubbleEntry, // 气泡图数据结构 - ChartPixelMap, // 图表像素映射 - IBubbleDataSet, // 气泡图数据集的接口 - BubbleDataSet, // 气泡图数据集 + JArrayList, // Utility class of the data set. + XAxis, // The X-axis component. + XAxisPosition, // Enum class of the X-axis label position. + YAxis, // The Y-axis component. + Description, // The Description component. + Legend, // The Legend component. + OnChartValueSelectedListener, // Value selection listener. + Highlight, // Highlighted data. + EntryOhos, // Base class of the chart data structure. + YAxisLabelPosition // Enum class of the Y-axis label position. + BubbleEntry, // Data structure of the bubble chart. + ChartPixelMap, // Chart pixel mapping class. + IBubbleDataSet, // API of the bubble dataset. + BubbleDataSet, // Dataset of the bubble chart. MPPointF, // MPPonitF - BubbleChart, // 气泡图组件 - BubbleChartModel, // 气泡图配置构建类 - BubbleData // 气泡图数据 + BubbleChart, // The BubbleChart component. + BubbleChartModel, // Configuration builder class of the bubble chart. + BubbleData // Bubble data. } from '@ohos/mpchart'; - // 构造数据选择监听器 + // Construct a listener for value selection events. private valueSelectedListener: OnChartValueSelectedListener = { onValueSelected: (e: EntryOhos, h: Highlight) => { // ...todoSomething @@ -615,90 +615,90 @@ PieChart({ model: this.model }) } } - // 图表数据初始化 + // Initialize the chart data. private model: BubbleChartModel | null = null; aboutToAppear() { - // Step1:必须：初始化图表配置构建类 + // Initialize the configuration builder class of the chart. This step is mandatory. this.model = new BubbleChartModel(); - // Step2：配置图表的特定样式，各部件间没有先后之分 + // Configure the chart style. The components can be configured in any sequence. - //设置图例 + // Set the Legend component. let l: Legend | null = this.model.getLegend(); if (l) { l.setEnabled(true); } - //设置描述 + // Set the Description component. let description: Description | null = this.model.getDescription(); if (description) { description.setEnabled(false); } - // 设置最大可见条目数量为60 + // Set the maximum visible value to 60. this.model.setMaxVisibleValueCount(60); - // 禁用x和y轴方向同时缩放，但是可以单独x轴方向或者y轴方向缩放 + // Set whether to enable pinch-zooming. If the value is set to false, X- and Y-axis can be zoomed separately. this.model.setPinchZoom(false); - // 获取X轴对象 + // Obtain the X-axis object. let xAxis: XAxis | null = this.model.getXAxis(); if (xAxis) { - // 设置X轴位置在底部 + // Set the position of the X-axis. xAxis.setPosition(XAxisPosition.BOTTOM); - // 不绘制X轴网格线 + // Set whether to draw gridlines on the X-axis. xAxis.setDrawGridLines(false); - // 设置X轴坐标的最小间隔为1 + // Set the minimum interval of the X-axis coordinate. xAxis.setGranularity(1); - // 设置X轴标签数量为7 + // Set the number of labels on the X-axis. xAxis.setLabelCount(7); } - // 获取左侧Y轴对象 + // Obtain the left Y-axis object. let leftAxis: YAxis | null = this.model.getAxisLeft(); if (leftAxis) { - // 设置左侧Y轴标签数量为8，不强制使用整数标签 + // Set the number of labels on the left Y-axis and set whether to use integer values. leftAxis.setLabelCount(8, false); - // 设置左侧Y轴标签位置在图表外部 + // Set the position of the left Y-axis label. leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART); - // 设置顶部空白区域为15个单位 + // Set the top space. leftAxis.setSpaceTop(15); - // 设置左侧Y轴的最小值为0 + // Set the minimum value of the left Y-axis. leftAxis.setAxisMinimum(0); } - // 获取右侧Y轴对象 + // Obtain the right Y-axis object. let rightAxis: YAxis | null = this.model.getAxisRight(); if (rightAxis) { - // 设置右侧Y轴标签数量为8，不强制使用整数标签 + // Set the number of labels on the right Y-axis and set whether to use integer values. rightAxis.setLabelCount(8, false); - // 不绘制右侧Y轴网格线 + // Set whether to draw gridlines on the right Y-axis. rightAxis.setDrawGridLines(false); - // 设置顶部空白区域为15个单位 + // Set the top space. rightAxis.setSpaceTop(15); - // 设置右侧Y轴的最小值为0 + // Set the minimum value of the right Y-axis. rightAxis.setAxisMinimum(0); } - // 初始化起始值为1 + // Initialize the start value. let start: number = 1; - // 创建气泡图数据集 + // Create a bubble dataset. let values: JArrayList = new JArrayList(); for (let i = start; i < 20; i++) { - // 生成随机值（0到40之间） + // Generate a random value (between 0 and 40). let val = Number(Math.random() * 41); - // 按照一定概率添加气泡数据 + // Add bubble data based on a certain probability. if (Math.random() * 100 < 25) { values.add(new BubbleEntry(i, val)); } else { @@ -706,81 +706,81 @@ PieChart({ model: this.model }) } } - // 创建气泡图数据集 + // Create a bubble dataset. let dataSet: BubbleDataSet = new BubbleDataSet(values, 'DataSet'); dataSet.setHighLightColor(Color.Black); dataSet.setDrawIcons(false); - // 创建气泡图数据集列表 + // Create a bubble dataset list. let dataSetList: JArrayList = new JArrayList(); dataSetList.add(dataSet); - // 设置图表数据 + // Set the chart data. this.setData(5, 50); - // 设置图表最大的X轴显示范围为7个单位 + // Set the maximum visible range of the X-axis. this.model.setVisibleXRangeMaximum(7); } - // 初始化气泡图数据 + // Initialize the bubble data. /** - * 设置气泡图表的数据 - * @param count 数据点的数量 - * @param range 数据点的范围 + * Set the data, + * @param count number of data points, + * @param range and range of data points for the bubble chart. */ private setData(count: number, range: number): void { - // 创建三个气泡图数据集 + // Create three bubble datasets. let values1 = new JArrayList(); let values2 = new JArrayList(); let values3 = new JArrayList(); - // 创建图标绘制对象 + // Create an icon drawing object. let imgePaint: ChartPixelMap = new ChartPixelMap(); - // 设置图标的宽度和高度 + // Set the width and height of the icon. imgePaint.setWidth(32); imgePaint.setHeight(32); - // 循环生成数据点 + // Generate a data point cyclically. for (let i = 0; i < count; i++) { - // 向数据集添加带有图标的气泡数据点 + // Add the bubble data points with icons to the dataset. values1.add(new BubbleEntry(i, Math.random() * range, Math.random() * range, imgePaint)); values2.add(new BubbleEntry(i, Math.random() * range, Math.random() * range, imgePaint)); - // 向数据集添加不带图标的气泡数据点 + // Add the bubble data point without an icon to the dataset. values3.add(new BubbleEntry(i, Math.random() * range, Math.random() * range)); } - // 创建气泡数据集1 + // Create the bubble dataset 1. let set1: BubbleDataSet = new BubbleDataSet(values1, "DS 1"); set1.setDrawIcons(false); set1.setColorByColor(0x88c12552); set1.setIconsOffset(new MPPointF(0, 0)); set1.setDrawValues(this.isDrawValuesEnable); - // 创建气泡数据集2 + // Create the bubble dataset 2. let set2: BubbleDataSet = new BubbleDataSet(values2, "DS 2"); set2.setDrawIcons(false); set2.setIconsOffset(new MPPointF(0, 0)); set2.setColorByColor(0x88ff6600); set2.setDrawValues(this.isDrawValuesEnable); - // 创建气泡数据集3 + // Create the bubble dataset 3. let set3: BubbleDataSet = new BubbleDataSet(values3, "DS 3"); set3.setDrawIcons(false); set3.setIconsOffset(new MPPointF(0, 0)); set3.setColorByColor(0x88f5c700); set3.setDrawValues(this.isDrawValuesEnable); - // 创建气泡图数据集列表 + // Create a bubble dataset list. let dataSets = new JArrayList(); dataSets.add(set1); dataSets.add(set2); dataSets.add(set3); - // 创建气泡图数据对象 + // Create a bubble data object. let dataResult: BubbleData = new BubbleData(dataSets); dataResult.setDrawValues(this.isDrawValuesEnable); dataResult.setValueTextSize(8); @@ -789,7 +789,7 @@ PieChart({ model: this.model }) dataResult.setHighlightEnabled(true); dataResult.notifyDataChanged(); - // 如果存在图表模型，则设置图表数据 + // Set the chart data if a chart model exists. if (this.model) { this.model.setData(dataResult); } @@ -797,93 +797,93 @@ PieChart({ model: this.model }) ``` -2. 添加数据到自定义气泡图图表组件 +2. Add data to the custom bubble chart component. ``` -// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 -// 如果在之后通过事件触发， -// 可通过dataResult.notifyDataSetChanged();来触发数据更新， -// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， -// 可通过this.model.invalidate();来触发绘制更新。 +// Set the configuration builder class for the component. If the chart needs to be displayed during page initialization, use aboutToAppear to build the chart data. +// If the chart is triggered by event, +// use dataResult.notifyDataSetChanged(); to update data, +// use this.model.notifyDataSetChanged(); to update axis data, +// and use this.model.invalidate(); to update drawing. BubbleChart({ model: this.model }) .width('100%') .height('70%') ``` -### 蜡烛图 +### Candle Chart -1. 蜡烛图数据初始化： +1. Initialize the candle data. ``` - // 导入一些图表相关的组件和类 + // Import the chart-related components and classes. import { - AxisDependency, // 轴依赖类 - CandleData, // 蜡烛图数据包 - CandleDataSet, // 蜡烛图数据集合 - CandleEntry, // 蜡烛图数据结构 - CandleStickChart, // 蜡烛图图表类 - CandleStickChartModel, // 蜡烛图配置构建类 - ChartPixelMap, // 图表像素映射类 - Description, // 图表Description(描述)部件 - JArrayList, // 工具类：数据集合 - Legend, // 图表Legend(图例)部件 - Style, // 图表样式类 - XAxis, // 图表X轴部件 - XAxisPosition, // 图表X轴标签位置枚举类 - YAxis // 图表Y轴部件 + AxisDependency, // The axis dependency class. + CandleData, // Data packet of the candlestick chart. + CandleDataSet, // Dataset of the candlestick chart. + CandleEntry, // Data structure of the candlestick chart. + CandleStickChart, // Candlestick chart class. + CandleStickChartModel, // Configuration builder class of the candlestick chart. + ChartPixelMap, // Chart pixel mapping class. + Description, // The Description component. + JArrayList, // Utility class of the dataset. + Legend, // The Legend component. + Style, // Chart style class. + XAxis, // The X-axis component. + XAxisPosition, // Enum class of the X-axis label position. + YAxis, // The Y-axis component. } from '@ohos/mpchart'; aboutToAppear() { - // 图表数据初始化 - // Step1:必须：初始化图表配置构建类 + // Initialize the chart data. + // Initialize the configuration builder class of the chart. This step is mandatory. this.model = new CandleStickChartModel(); - // Step2：配置图表的特定样式，各部件间没有先后之分 - //设置描述 + // Configure the chart style. The components can be configured in any sequence. + // Set the Description component. let description: Description | null = this.model.getDescription(); if (description) { description.setEnabled(false); } - //设置图例 + // Set the Legend component. let l: Legend | null = this.model.getLegend(); if (l) { l.setEnabled(true); } - this.model.setMaxVisibleValueCount(60); // 设置图表最大可见数值数量为60 - this.model.setPinchZoom(false); // 禁用捏合缩放 - this.model.setDrawGridBackground(true); // 启用绘制网格背景 - this.model.setGridBackgroundColor(Color.White); // 设置网格背景颜色为白色 - this.setData(40, 100); // 设置图表数据 + this.model.setMaxVisibleValueCount(60); // Set the maximum visible value in the chart. + this.model.setPinchZoom(false); // Set whether to enable pinch zooming. + this.model.setDrawGridBackground(true); // Set whether to draw grid background. + this.model.setGridBackgroundColor(Color.White); // Set the grid background color. + this.setData (40, 100); // Set the chart data. let xAxis: XAxis | null = this.model.getXAxis(); if (xAxis) { - xAxis.setPosition(XAxisPosition.BOTTOM); // 设置X轴位置在底部 - xAxis.setDrawGridLines(true); // 启用绘制X轴网格线 + xAxis.setPosition(XAxisPosition.BOTTOM); // Set the position of X-axis. + xAxis.setDrawGridLines(true); // Set whether to draw gridlines on the X-axis. } let leftAxis: YAxis | null = this.model.getAxisLeft(); if (leftAxis) { - leftAxis.setLabelCount(7, false); // 设置左侧Y轴标签数量为7，不强制使用整数标签 - leftAxis.setDrawGridLines(true); // 启用绘制左侧Y轴网格线 - leftAxis.setDrawAxisLine(true); // 启用绘制左侧Y轴轴线 + leftAxis.setLabelCount(7, false); // Set the number of labels on the left Y-axis. The value can be a non-integer. + leftAxis.setDrawGridLines(true); // Set whether to draw gridlines on the left Y-axis. + leftAxis.setDrawAxisLine(true); // Set whether to draw the left Y-axis. } let rightAxis: YAxis | null = this.model.getAxisRight(); if (rightAxis) { - rightAxis.setLabelCount(7, false); // 设置右侧Y轴标签数量为7，不强制使用整数标签 - rightAxis.setDrawGridLines(true); // 启用绘制右侧Y轴网格线 - rightAxis.setDrawAxisLine(true); // 启用绘制右侧Y轴轴线 + rightAxis.setLabelCount(7, false); // Set the number of labels on the right Y-axis. The value can be a non-integer. + rightAxis.setDrawGridLines(true); // Set whether to draw gridlines on the right Y-axis. + rightAxis.setDrawAxisLine(true); // Set whether to draw the right Y-axis. } let legend: Legend | null = this.model.getLegend(); if (legend) { - legend.setEnabled(true); // 启用图例 + legend.setEnabled(true); // Set whether to enable the legend. } } - // 初始化蜡烛图数据 + // Initialize the candle data. private setData(count: number, range: number):void{ let values: JArrayList = new JArrayList(); @@ -908,25 +908,25 @@ BubbleChart({ model: this.model }) new ChartPixelMap())); } - // 创建蜡烛图数据集，并设置数据集的名称为 "Data Set" + // Create a candle dataset and set the dataset name to Data Set. let dataSet: CandleDataSet = new CandleDataSet(values, "Data Set"); - // 设置是否绘制图标为 false + // Set whether to draw icons. dataSet.setDrawIcons(false); - // 设置数据集的轴依赖为左侧Y轴 + // Set the dependent axis of the dataset. dataSet.setAxisDependency(AxisDependency.LEFT); - // 设置蜡烛图阴影颜色为灰色 + // Set the shadow color of the candle chart. dataSet.setShadowColor(Color.Gray); - // 设置蜡烛图阴影宽度为 0.7 + // Set the shadow width of the candle chart. dataSet.setShadowWidth(0.7); - // 设置蜡烛图下跌蜡烛的绘制样式为填充 + // Set the paint style of the decreasing candle. dataSet.setDecreasingPaintStyle(Style.FILL); - // 设置蜡烛图下跌蜡烛的颜色为红色 + // Set the color of the decreasing candle. dataSet.setDecreasingColor(Color.Red); - // 设置蜡烛图上涨蜡烛的颜色为绿色 + // Set the color of the increasing candle. dataSet.setIncreasingColor(Color.Green); - // 设置蜡烛图上涨蜡烛的绘制样式为描边 + // Set the paint style of the increasing candle. dataSet.setIncreasingPaintStyle(Style.STROKE); - // 设置蜡烛图中性蜡烛的颜色为蓝色 + // Set the color of the neutral candle. dataSet.setNeutralColor(Color.Blue); let data: CandleData = new CandleData([dataSet]); @@ -939,152 +939,152 @@ BubbleChart({ model: this.model }) ``` -### 组合图 +### Combined Chart -1. 组合图数据初始化： +1. Initialize the data. ``` - // 导入一些图表相关的组件和类 + // Import the chart-related components and classes. import { - ColorTemplate, // 颜色模板 - CombinedChart, // 组合图表类 - CombinedChartModel, // 组合图表配置构建类 - CombinedData, // 组合图表数据包 - EntryOhos, // 图表数据结构基础类 - JArrayList, // 工具类：数据集合 - LineData, // 折线图数据包 - LineDataSet, // 折线图数据集合 - Color, // 颜色类 - Mode, // 图表模式枚举类 - AxisDependency, // 轴依赖类 - BarEntry, // 柱状图数据结构 - BarData, // 柱状图数据包 - BarDataSet, // 柱状图数据集合 - IBarDataSet, // 柱状图数据集合的操作类 - ScatterData, // 散点图数据包 - ScatterDataSet, // 散点图数据集合 - CandleData, // 蜡烛图数据包 - CandleEntry, // 蜡烛图数据结构 - CandleDataSet, // 蜡烛图数据集合 - BubbleData, // 气泡图数据包 - BubbleEntry, // 气泡图数据结构 - BubbleDataSet, // 气泡图数据集合 - YAxisLabelPosition, // 图表Y轴标签位置枚举类 - XAxisPosition, // 图表X轴标签位置枚举类 - XAxis, // 图表X轴部件 - YAxis, // 图表Y轴部件 - LegendHorizontalAlignment, // 图例水平对齐方式枚举类 - LegendVerticalAlignment // 图例垂直对齐方式枚举类 + ColorTemplate, // Color template. + CombinedChart, // The combined chart class. + CombinedChartModel, // The configuration builder class of the combined chart. + CombinedData, // Data packet of the combined chart. + EntryOhos, // Base class of the chart data structure. + JArrayList, // Utility class of the dataset. + LineData, // Data packet of the line chart. + LineDataSet, // Dataset of the line chart. + Color, // The color class. + Mode, // Enum class of the chart mode. + AxisDependency, // The axis dependency class. + BarEntry, // Data structure of the bar chart. + BarData, // Data packet of the bar chart. + BarDataSet, // Dataset of the bar chart. + IBarDataSet, // Operation class of the bar chart dataset. + ScatterData, // Data packet of the scatter chart. + ScatterDataSet, // Dataset of the scatter chart. + CandleData, // Data packet of the candle chart. + CandleEntry, // Data structure of the candle chart. + CandleDataSet, // Dataset of the candle chart. + BubbleData, // Data packet of the bubble chart. + BubbleEntry, // Data structure of the bubble chart. + BubbleDataSet, // Dataset of the bubble chart. + YAxisLabelPosition // Enum class of the Y-axis label position. + XAxisPosition, // Enum class of the X-axis label position. + XAxis, // The X-axis component. + YAxis, // The Y-axis component. + LegendHorizontalAlignment, // Enum class of the legend horizontal alignment mode. + LegendVerticalAlignment // Enum class of the legend vertical alignment mode. } from '@ohos/mpchart'; - // Step1:必须：初始化图表配置构建类 + // Initialize the configuration builder class of the chart. This step is mandatory. private model: CombinedChartModel = new CombinedChartModel(); aboutToAppear() { - // Step2：配置图表的特定样式，各部件间没有先后之分 + // Configure the chart style. The components can be configured in any sequence. - // 禁用图表描述 + // Set whether to enable the chart description. this.model.getDescription()?.setEnabled(false); - // 获取图例对象 + // Obtain the legend object. let l = this.model.getLegend(); if (l) { - // 启用图例 + // Set whether to enable the legend. l.setEnabled(true); - // 启用图例文字自动换行 + // Set whether to enable the text wrap function of the legend. l.setWordWrapEnabled(true); - // 设置图例水平对齐方式为左侧 + // Set the horizontal alignment mode of the legend. l.setHorizontalAlignment(LegendHorizontalAlignment.LEFT); - // 设置图例垂直对齐方式为底部 + // Set the vertical alignment mode of the legend. l.setVerticalAlignment(LegendVerticalAlignment.BOTTOM); - // 设置图例不绘制在图表内部 + // Set whether to draw the legend in the chart. l.setDrawInside(false); } - // 设置图表最大可见数值数量为60 + // Set the maximum visible value in the chart. this.model.setMaxVisibleValueCount(60); - // 禁用图表的捏合缩放功能 + // Set whether to enable the pinch zoom function of the chart. this.model.setPinchZoom(false); - // 禁用图表绘制网格背景 + // Set whether to draw the grid background of the chart. this.model.setDrawGridBackground(false); - // 获取X轴对象 + // Obtain the X-axis object. let xAxis: XAxis | null = this.model.getXAxis(); if (xAxis) { - // 设置X轴位置在底部 + // Set the position of the X-axis. xAxis.setPosition(XAxisPosition.BOTTOM); - // 不绘制X轴网格线 + // Set whether to draw gridlines on the X-axis. xAxis.setDrawGridLines(false); - // 设置X轴坐标的最小间隔为1 + // Set the minimum interval of the X-axis coordinate. xAxis.setGranularity(1); - // 设置X轴标签数量为7 + // Set the number of labels on the X-axis. xAxis.setLabelCount(7); } - // 获取左侧Y轴对象 + // Obtain the left Y-axis object. let leftAxis: YAxis | null = this.model.getAxisLeft(); if (leftAxis) { - // 设置左侧Y轴标签数量为8，不强制使用整数标签 + // Set the number of labels on the left Y-axis and set whether to use integer values. leftAxis.setLabelCount(8, false); - // 设置左侧Y轴标签位置在图表外部 + // Set the position of the left Y-axis label. leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART); - // 设置顶部空白区域为15个单位 + // Set the top space. leftAxis.setSpaceTop(15); - // 设置左侧Y轴的最小值为0 + // Set the minimum value of the left Y-axis. leftAxis.setAxisMinimum(0); } - // 获取右侧Y轴对象 + // Obtain the right Y-axis object. let rightAxis: YAxis | null = this.model.getAxisRight(); if (rightAxis) { - // 设置右侧Y轴标签数量为8，不强制使用整数标签 + // Set the number of labels on the right Y-axis and set whether to use integer values. rightAxis.setLabelCount(8, false); - // 不绘制右侧Y轴网格线 + // Set whether to draw gridlines on the right Y-axis. rightAxis.setDrawGridLines(false); - // 设置顶部空白区域为15个单位 + // Set the top space. rightAxis.setSpaceTop(15); - // 设置右侧Y轴的最小值为0 + // Set the minimum value of the right Y-axis. rightAxis.setAxisMinimum(0); } - // 创建组合图表数据对象 + // Create a combined chart data object. let data: CombinedData = new CombinedData(); - // 生成线形图数据 + // Generate line data. this.generateLineData(data); - // 生成柱状图数据 + // Generate bar data. this.generateBarData(data); - // 生成气泡图数据 + // Generate bubble data. this.generateBubbleData(data); - // 生成散点图数据 + // Generate scatter data. this.generateScatterData(data); - // 生成蜡烛图数据 + // Generate candle data. this.generateCandleData(data); - // 设置图表数据 + // Set the chart data. this.model.setData(data); } - // 生成线形图数据 + // Generate line data. private generateLineData(data: CombinedData): void { let d: LineData = new LineData(); @@ -1113,7 +1113,7 @@ BubbleChart({ model: this.model }) } - // 生成柱状图数据 + // Generate bar data. private generateBarData(data: CombinedData): void { let entries1: JArrayList = new JArrayList(); @@ -1156,7 +1156,7 @@ BubbleChart({ model: this.model }) } - // 生成散点图数据 + // Generate scatter data. private generateScatterData(data: CombinedData): void { let d: ScatterData = new ScatterData(); @@ -1175,7 +1175,7 @@ BubbleChart({ model: this.model }) data.setScatterData(d); } - // 生成蜡烛图数据 + // Generate candle data. private generateCandleData(data: CombinedData): void { let d: CandleData = new CandleData(); @@ -1197,7 +1197,7 @@ BubbleChart({ model: this.model }) data.setCandleData(d); } - //生成气泡图数据 + // Generate bubble data. private generateBubbleData(data: CombinedData): void { let bd: BubbleData = new BubbleData(); @@ -1219,180 +1219,180 @@ BubbleChart({ model: this.model }) bd.addDataSet(set); data.setBubbleData(bd); } - //生成随机数据 + // Generate random data. getRandom(range: number, start: number): number { return (Math.random() * range) + start; } ``` -2. 添加数据到自定义组合图图表组件 +2. Add data to the custom combined chart component. ``` -// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 -// 如果在之后通过事件触发， -// 可通过data.notifyDataSetChanged();来触发数据更新， -// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， -// 可通过this.model.invalidate();来触发绘制更新。 +// Set the configuration builder class for the component. If the chart needs to be displayed during page initialization, use aboutToAppear to build the chart data. +// If the chart is triggered by event, +// use data.notifyDataSetChanged(); to update data, +// use this.model.notifyDataSetChanged(); to update axis data, +// and use this.model.invalidate(); to update drawing. CombinedChart({ model: this.model }) .width('100%') .height('70%') ``` -### 雷达图 +### Radar Chart -1. 雷达图数据初始化： +1. Initialize the radar data. ``` - // 导入一些图表相关的组件和类 + // Import the chart-related components and classes. import { - ChartColor, // 图表颜色类 - JArrayList, // 工具类：数据集合 - XAxis, // 图表X轴部件 - XAxisPosition, // 图表X轴标签位置枚举类 - Description, // 图表Description(描述)部件 - Legend, // 图表Legend(图例)部件 - OnChartValueSelectedListener, // 数据选择监听 - Highlight, // 图表高亮数据 - EntryOhos, // 图表数据结构基础类 - RadarEntry, // 雷达图数据结构 - RadarChart, // 雷达图图表类 - RadarDataSet, // 雷达图数据集合 - RadarChartModel, // 雷达图配置构建类 - IRadarDataSet, // 雷达图数据集合的操作类 - RadarData, // 雷达图数据包 - YAxis, // 图表Y轴部件 - IAxisValueFormatter, // 轴数值格式化接口 - AxisBase, // 轴基础类 - LegendVerticalAlignment, // 图例垂直对齐方式枚举类 - LegendHorizontalAlignment, // 图例水平对齐方式枚举类 - LegendOrientation, // 图例方向枚举类 + ChartColor, // The color class. + JArrayList, // Utility class of the dataset. + XAxis, // The X-axis component. + XAxisPosition, // Enum class of the X-axis label position. + Description, // The Description component. + Legend, // The Legend component. + OnChartValueSelectedListener, // Value selection listener. + Highlight, // Highlighted data in the chart. + EntryOhos, // Base class of the chart data structure. + RadarEntry, // Data structure of the radar chart. + RadarChart, // The radar chart class. + RadarDataSet, // Dataset of the radar chart. + RadarChartModel, // Configuration builder class of the radar chart. + IRadarDataSet, // Operation class of the radar dataset. + RadarData, // Data packet of the radar chart. + YAxis, // The Y-axis component. + IAxisValueFormatter, // Axis value formatting API. + AxisBase, // Axis base class. + LegendVerticalAlignment, // Enum class of the legend vertical alignment mode. + LegendHorizontalAlignment, // Enum class of the legend horizontal alignment mode. + LegendOrientation, // Enum class of the legend orientation. } from '@ohos/mpchart'; - // Step1:必须：初始化图表配置构建类 + // Initialize the configuration builder class of the chart. This step is mandatory. private model: RadarChartModel = new RadarChartModel(); aboutToAppear() { - // Step2：配置图表的特定样式，各部件间没有先后之分 - // 设置雷达图数值选择监听器 + // Configure the chart style. The components can be configured in any sequence. + // Set a value selection listener for the radar chart. this.model.setOnChartValueSelectedListener(this.valueSelectedListener); - // 获取图表描述对象 + // Obtain the chart description object. let description: Description | null = this.model.getDescription(); if (description) { - // 禁用图表描述 + // Set whether to enable the chart description. description.setEnabled(false); } - // 获取图例对象 + // Obtain the legend object. let l: Legend | null = this.model.getLegend(); if (l) { - // 启用图例 + // Set whether to enable the legend. l.setEnabled(true); - // 设置图例垂直对齐方式为顶部 + // Set the vertical alignment mode of the legend. l.setVerticalAlignment(LegendVerticalAlignment.TOP); - // 设置图例水平对齐方式为居中 + // Set the horizontal alignment mode of the legend. l.setHorizontalAlignment(LegendHorizontalAlignment.CENTER); - // 设置图例方向为水平 + // Set the legend orientation. l.setOrientation(LegendOrientation.HORIZONTAL); - // 设置图例不绘制在图表内部 + // Set whether to draw the legend in the chart. l.setDrawInside(false); - // 设置图例X轴方向间隔 + // Set the interval of the legend on the X-axis. l.setXEntrySpace(7); - // 设置图例Y轴方向间隔 + // Set the interval of the legend on the Y-axis. l.setYEntrySpace(5); - // 设置图例文字颜色为白色 + // Set the text color of the legend. l.setTextColor(Color.White); } - // 设置雷达图网格线宽度、颜色和透明度 + // Set the gridline width, color, and alpha of the radar chart. this.model.setWebLineWidth(0.3); this.model.setWebColor(0xFFCCCCCC); this.model.setWebLineWidthInner(0.3); this.model.setWebColorInner(0xFFCCCCCC); this.model.setWebAlpha(100); - // 设置雷达图顶部的额外偏移量 + // Set the extra offset at the top of the radar chart. this.model.setExtraTopOffset(-100); - // 创建雷达图标记视图对象 + // Create a radar marker view object. this.normalMarker = new RadarMarkerView(); - // 设置雷达图标记 + // Set the radar mark. this.model.setMarker(this.normalMarker); - // 获取X轴对象 + // Obtain the X-axis object. let xAxis: XAxis | null = this.model.getXAxis(); if (xAxis) { - // 设置X轴位置在底部 + // Set the position of the X-axis. xAxis.setPosition(XAxisPosition.BOTTOM); - // 不绘制X轴网格线 + // Set whether to draw gridlines on the X-axis. xAxis.setDrawGridLines(false); - // 设置X轴标签文字大小 + // Set the text size of the X-axis label. xAxis.setTextSize(20); - // 设置X轴Y轴方向的偏移量 + // Set the offset of the X-axis and Y-axis. xAxis.setYOffset(0); xAxis.setXOffset(0); - // 设置X轴坐标的最小间隔为1 + // Set the minimum interval of the X-axis coordinate. xAxis.setGranularity(1); - // 设置X轴标签数量为7 + // Set the number of labels on the X-axis. xAxis.setLabelCount(7); - // 设置X轴数值格式化器 + / /Set the X-axis value formatter. xAxis.setValueFormatter(new valueFormatter()); - // 设置X轴标签文字颜色为白色 + // Set the text color of the X-axis label. xAxis.setTextColor(Color.White); } - // 获取Y轴对象 + // Obtain the Y-axis object. let yAxis: YAxis | null = this.model.getYAxis(); if (yAxis) { - // 设置Y轴标签数量为5，不强制使用整数标签 + // Set the number of labels on the Y-axis and set whether to use integer values. yAxis.setLabelCount(5, false); - // 设置Y轴标签文字大小 + // Set the text size of the X-axis label. yAxis.setTextSize(20); - // 设置Y轴的最小值为0 + // Set the minimum value of the Y-axis. yAxis.setAxisMinimum(0); - // 设置Y轴的最大值为80 + // Set the maximum value of the Y-axis. yAxis.setAxisMaximum(80); - // 不绘制Y轴标签 + // Set whether to draw the Y-axis labels. yAxis.setDrawLabels(false); } - // 设置雷达图数据 + // Set the radar data. this.setData(); } /** - * 设置雷达图的数据 + * Set the radar data. */ private setData(): void { - let mul = 80; // 随机值的放大倍数 - let min = 20; // 随机值的最小基准 - let cnt = 5; // 数据点数量 + let mul = 80; // Magnification of the random value. + let min = 20; // Minimum value of the random value + let cnt = 5; // Number of data points. - // 创建雷达图数据点集合 + // Create array lists for radar data. let entries1: JArrayList = new JArrayList(); let entries2: JArrayList = new JArrayList(); - // 注意: 将数据点添加到数据点数组中的顺序决定它们在图表中心周围的位置。 + // Note: The order in which data points are added to the array determines their positions around the center of the chart. for (let i = 0; i < cnt; i++) { let val1 = (Math.random() * mul) + min; entries1.add(new RadarEntry(val1)); @@ -1401,7 +1401,7 @@ CombinedChart({ model: this.model }) entries2.add(new RadarEntry(val2)); } - // 创建雷达图数据集 + // Create a radar dataset. let set1: RadarDataSet = new RadarDataSet(entries1, "Last Week"); set1.setColorByColor(ChartColor.rgb(103, 110, 129)); set1.setFillColor(ChartColor.rgb(103, 110, 129)); @@ -1411,7 +1411,7 @@ CombinedChart({ model: this.model }) set1.setDrawHighlightCircleEnabled(true); set1.setDrawHighlightIndicators(false); - // 创建雷达图数据集 + // Create another radar dataset. let set2: RadarDataSet = new RadarDataSet(entries2, "This Week"); set2.setColorByColor(ChartColor.rgb(121, 162, 175)); set2.setFillColor(ChartColor.rgb(121, 162, 175)); @@ -1421,142 +1421,142 @@ CombinedChart({ model: this.model }) set2.setDrawHighlightCircleEnabled(true); set2.setDrawHighlightIndicators(false); - // 创建雷达图数据集合 + // Create array lists for radar datasets. let sets: JArrayList = new JArrayList(); sets.add(set1); sets.add(set2); - // 创建雷达图数据对象 + // Create a radar data object. let data: RadarData = new RadarData(sets); data.setValueTextSize(20); - // 不绘制数据值 + // Set whether to draw data values. data.setDrawValues(false); - // 设置数据值文字颜色为白色 + // Set the text color of the data value. data.setValueTextColor(Color.White); - // 设置图表数据 + // Set the chart data. this.model.setData(data); } ``` -2. 添加数据到雷达图图表组件 +2. Add data to the radar chart component. ``` -// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 -// 如果在之后通过事件触发， -// 可通过data.notifyDataSetChanged();来触发数据更新， -// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， -// 可通过this.model.invalidate();来触发绘制更新。 +// Set the configuration builder class for the component. If the chart needs to be displayed during page initialization, use aboutToAppear to build the chart data. +// If the chart is triggered by event, +// use data.notifyDataSetChanged(); to update data, +// use this.model.notifyDataSetChanged(); to update axis data, +// and use this.model.invalidate(); to update drawing. RadarChart({ model: this.model }) .width('100%') .height('70%') ``` -### 散点图 +### Scatter Chart -1. 散点图数据初始化： +1. Initialize the scatter data. ``` - // 导入一些图表相关的组件和类 + // Import the chart-related components and classes. import { - JArrayList, // 工具类：数据集合 - XAxis, // 图表X轴部件 - XAxisPosition, // 图表X轴标签位置枚举类 - YAxis, // 图表Y轴部件 - Description, // 图表Description(描述)部件 - Legend, // 图表Legend(图例)部件 - OnChartValueSelectedListener, // 数据选择监听 - Highlight, // 图表高亮数据 - EntryOhos, // 图表数据结构基础类 - YAxisLabelPosition, // 图表Y轴标签位置枚举类 - ScatterChart, // 散点图图表类 - ScatterChartModel, // 散点图配置构建类 - ScatterData, // 散点图数据包 - ScatterDataSet, // 散点图数据集合 - IScatterDataSet, // 散点图数据集合的操作类 - ColorTemplate, // 颜色模板 - ChartShape, // 图表形状枚举类 + JArrayList, // Utility class of the dataset. + XAxis, // The X-axis component. + XAxisPosition, // Enum class of the X-axis label position. + YAxis, // The Y-axis component. + Description, // The Description component. + Legend, // The Legend component. + OnChartValueSelectedListener, // Value selection listener. + Highlight, // Highlighted data in the chart. + EntryOhos, // Base class of the chart data structure. + YAxisLabelPosition // Enum class of the Y-axis label position. + ScatterChart, // The scatter chart class. + ScatterChartModel, // Configuration builder class of the scatter chart. + ScatterData, // Data packet of the scatter chart. + ScatterDataSet, // Dataset of the scatter chart. + IScatterDataSet, // Operation class of the scatter dataset. + ColorTemplate, // Color template. + ChartShape, // Enum class of the chart shape. } from '@ohos/mpchart'; aboutToAppear() { - // Step1:必须：初始化图表配置构建类 + // Initialize the configuration builder class of the chart. This step is mandatory. this.model = new ScatterChartModel(); - // Step2：配置图表的特定样式，各部件间没有先后之分 - // 获取图例对象 + // Configure the chart style. The components can be configured in any sequence. + // Obtain the legend object. let l: Legend | null = this.model.getLegend(); if (l) { - // 启用图例 + // Set whether to enable the legend. l.setEnabled(true); } - // 设置散点图数值选择监听器 + // Set a value selection listener for the scatter chart. this.model.setOnChartValueSelectedListener(this.valueSelectedListener); - // 获取描述对象 + // Obtain the description object. let description: Description | null = this.model.getDescription(); if (description) { - // 禁用图表描述 + // Set whether to enable the chart description. description.setEnabled(false); } - // 设置图表最大可见数值数量、是否支持缩放、是否绘制网格背景 + // Set the maximum visible value in a chart, whether to enable pinch zooming, and whether to draw the grid background. this.model.setMaxVisibleValueCount(160); this.model.setPinchZoom(false); this.model.setDrawGridBackground(false); - // 获取X轴对象 + // Obtain the X-axis object. let xAxis: XAxis | null = this.model.getXAxis(); if (xAxis) { - // 设置X轴位置在底部 + // Set the position of the X-axis. xAxis.setPosition(XAxisPosition.BOTTOM); - // 不绘制X轴网格线 + // Set whether to draw gridlines on the X-axis. xAxis.setDrawGridLines(false); - // 设置X轴坐标的最小间隔为1 + // Set the minimum interval of the X-axis coordinate. xAxis.setGranularity(1); - // 设置X轴标签数量为7 + // Set the number of labels on the X-axis. xAxis.setLabelCount(7); } - // 获取左侧Y轴对象 + // Obtain the left Y-axis object. let leftAxis: YAxis | null = this.model.getAxisLeft(); if (leftAxis) { - // 设置左侧Y轴标签数量为8，不强制使用整数标签 + // Set the number of labels on the left Y-axis and set whether to use integer values. leftAxis.setLabelCount(8, false); - // 设置左侧Y轴标签位置在图表外部 + // Set the position of the left Y-axis label. leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART); - // 设置左侧Y轴顶部空白区域大小 + // Set the top space of the left Y-axis. leftAxis.setSpaceTop(15); - // 设置左侧Y轴的最小值为0 + // Set the minimum value of the left Y-axis. leftAxis.setAxisMinimum(0); } - // 获取右侧Y轴对象 + // Obtain the right Y-axis object. let rightAxis: YAxis | null = this.model.getAxisRight(); if (rightAxis) { - // 设置右侧Y轴标签数量为8，不绘制右侧Y轴网格线 + // Set the number of labels on the right Y-axis and whether to draw gridlines on the right Y-axis. rightAxis.setLabelCount(8, false); rightAxis.setDrawGridLines(false); - // 设置右侧Y轴顶部空白区域大小 + // Set the top space of the right Y-axis. rightAxis.setSpaceTop(15); - // 设置右侧Y轴的最小值为0 + // Set the minimum value of the right Y-axis. rightAxis.setAxisMinimum(0); } - // 生成随机数据 + // Generate random data. let start: number = 1; let values: JArrayList = new JArrayList(); for (let i = start; i < 20; i++) { @@ -1569,87 +1569,87 @@ RadarChart({ model: this.model }) } } - // 创建散点图数据集 + // Create a scatter dataset. let dataSet: ScatterDataSet = new ScatterDataSet(values, 'DataSet'); dataSet.setHighLightColor(Color.Black); dataSet.setDrawIcons(false); - // 创建散点图数据集合 + // Create a scatter dataset list. let dataSetList: JArrayList = new JArrayList(); dataSetList.add(dataSet); - // 设置图表数据 + // Set the chart data. this.setData(20, 100); } /** - * 设置散点图数据 - * @param xRange - X轴数据范围 - * @param yRange - Y轴数据范围 + * Set the scatter data. + * @param xRange - Data range of the X-axis. + * @param yRange - Data range of the Y-axis. */ private setData(xRange: number, yRange: number): void { - // 生成随机数据集合 + // Generate a random dataset. let values1 = this.generateRandomData(xRange, yRange); let values2 = this.generateRandomData(xRange, yRange); let values3 = this.generateRandomData(xRange, yRange); - // 创建散点图数据集1 + // Create scatter dataset 1. let set1 = new ScatterDataSet(values1, "DS 1"); set1.setScatterShape(ChartShape.SQUARE); set1.setColorByColor(ColorTemplate.COLORFUL_COLORS[0]); - // 创建散点图数据集2 + // Create scatter dataset 2. let set2 = new ScatterDataSet(values2, "DS 2"); set2.setScatterShape(ChartShape.CIRCLE); set2.setScatterShapeHoleColor(ColorTemplate.COLORFUL_COLORS[3]); set2.setScatterShapeHoleRadius(3); set2.setColorByColor(ColorTemplate.COLORFUL_COLORS[1]); - // 创建散点图数据集3 + // Create scatter dataset 3. let set3 = new ScatterDataSet(values3, "DS 3"); set3.setShapeRenderer(new CustomScatterShapeRenderer()); set3.setColorByColor(ColorTemplate.COLORFUL_COLORS[2]); - // 设置散点图数据集形状大小 + // Set the shape size of the scatter datasets. set1.setScatterShapeSize(8); set2.setScatterShapeSize(8); set3.setScatterShapeSize(8); - // 创建散点图数据集合 + // Create a scatter dataset list. let dataSets: JArrayList = new JArrayList(); - dataSets.add(set1); // 添加数据集 + dataSets.add(set1); // Add a dataset. dataSets.add(set2); dataSets.add(set3); - // 创建散点图数据 + // Create a scatter data. let dataResult: ScatterData = new ScatterData(dataSets); dataResult.setDrawValues(this.isDrawValuesEnable); dataResult.setValueTextSize(8); dataResult.setHighlightEnabled(true); - // 设置数据项文本大小 + // Set the text size of the data. dataResult.setValueTextSize(10); - // 设置图表数据 + // Set the chart data. if (this.model) { this.model.setData(dataResult); } } /** - * 生成随机散点图数据 - * @param xRange - X轴数据范围 - * @param yRange - Y轴数据范围 - * @returns 随机散点图数据集合 + * Generate random scatter data. + * @param xRange - Data range of the X-axis. + * @param yRange - Data range of the Y-axis. + * @returns Random scatter dataset. */ private generateRandomData(xRange: number, yRange: number): JArrayList { let values = new JArrayList(); - // 循环生成随机数据 + // Generate random data cyclically. for (let i = 0; i < xRange; i++) { - let x = i; // 在指定范围内生成随机X值 - let y = Math.random() * yRange; // 在指定范围内生成随机Y值 + let x = i; // Generate a random X value within the specified range. + let y = Math.random() * yRange; // Generate a random Y value within the specified range. values.add(new EntryOhos(x, y)); } return values; @@ -1657,49 +1657,49 @@ RadarChart({ model: this.model }) ``` -2. 添加数据到散点图图表组件 +2. Add data to the scatter chart component. ``` -// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 -// 如果在之后通过事件触发， -// 可通过dataResult.notifyDataSetChanged();来触发数据更新， -// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， -// 可通过this.model.invalidate();来触发绘制更新。 +// Set the configuration builder class for the component. If the chart needs to be displayed during page initialization, use aboutToAppear to build the chart data. +// If the chart is triggered by event, +// use dataResult.notifyDataSetChanged(); to update data, +// use this.model.notifyDataSetChanged(); to update axis data, +// and use this.model.invalidate(); to update drawing. ScatterChart({ model: this.model }) .width('100%') .height('70%') ``` -### 瀑布图 +### Waterfall Chart -1. 瀑布图数据初始化： +1. Initialize the waterfall data. ``` import { - WaterfallChart, // 瀑布图图表类 - WaterfallChartModel, // 瀑布图配置构建类 - BarData, // 瀑布图数据包 - WaterfallDataSet, // 瀑布图数据集合 - WaterfallEntry, // 瀑布图数据结构 - ChartGesture, // 手势事件模式 - Description, // 图表Description(描述)部件 - EntryOhos, // 图表数据结构基础类 - Fill, // 图表填充类型构建类 - Highlight, // 图表高亮数据 - IBarDataSet, // 瀑布图数据集合的操作类 - JArrayList, // 工具类：数据集合 - Legend, // 图表Legend(图例)部件 - LimitLabelPosition, // 图表的LimitLine标签位置枚举类 - LimitLine, // 图表LimitLine - MarkerView, // 图表的Marker(标志气泡)部件 - OnChartGestureListener, // 手势事件监听 - OnChartValueSelectedListener, // 数据选择监听 - XAxis, // 图表X轴部件 - XAxisPosition, // 图表X轴标签位置枚举类 - YAxis, // 图表Y轴部件 - YAxisLabelPosition // 图表Y轴标签位置枚举类 + WaterfallChart, // The waterfall chart class. + WaterfallChartModel, // Configuration builder class of the waterfall chart. + WaterfallData, // Data packet of the waterfall chart. + WaterfallDataSet, // Dataset of the waterfall chart. + WaterfallEntry, // Data structure of the waterfall chart. + ChartGesture, // Gesture event mode. + Description, // The Description component. + EntryOhos, // Base class of the chart data structure. + Fill, // Builder class of the chart filling type. + Highlight, // Highlighted data in the chart. + IBarDataSet, // Operation class of the waterfall dataset. + JArrayList, // Utility class of the dataset. + Legend, // The Legend component. + LimitLabelPosition, // Enum class of the LimitLine label position. + LimitLine, // The LimitLine component. + MarkerView, // The Markerview component. + OnChartGestureListener, // Gesture event listener. + OnChartValueSelectedListener, // Value selection listener. + XAxis, // The X-axis component. + XAxisPosition, // Enum class of the X-axis label position. + YAxis, // The Y-axis component. + YAxisLabelPosition // Enum class of the Y-axis label position. } from '@ohos/mpchart'; - // 构造数据选择监听器 + // Construct a listener for value selection events. private valueSelectedListener: OnChartValueSelectedListener = { onValueSelected: (e: EntryOhos, h: Highlight) => { LogUtil.log("SimpleWaterfallChartPage onValueSelected: " + e.getX()); @@ -1709,7 +1709,7 @@ ScatterChart({ model: this.model }) } } - // 构造手势识别事件监听器 + // Construct a listener for gesture events. private chartGestureListener: OnChartGestureListener = { onChartGestureStart: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => { }, @@ -1736,39 +1736,39 @@ ScatterChart({ model: this.model }) } } - // 图表数据初始化 + // Initialize the chart data. aboutToAppear() { - // Step1:必须：初始化图表配置构建类 + // Initialize the configuration builder class of the chart. This step is mandatory. this.model = new WaterfallChartModel(); - // Step2:配置图表指定样式，各部件间没有先后之分 + // Configure the chart style. The components can be configured in any sequence. - // 为图表添加数据选择的监听器 + // Add a value selection listener for the chart. this.model.setOnChartValueSelectedListener(this.valueSelectedListener); - // 为图表添加手势识别监听器 + // Add a gesture listener for the chart. this.model.setOnChartGestureListener(this.chartGestureListener); - // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件 + // Obtain the Description component and disable it. That is, the Description component is not drawn in the chart. let description: Description | null = this.model.getDescription() if (description) { description.setEnabled(false); } - // 获取图表图例部件，设置图表图例部件不可用 + // Obtain the Legend component and disable it. let l: Legend | null = this.model.getLegend(); if (l) { l.setEnabled(false); } - // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签 + // Set the maximum visible number of value labels drawn on the chart. If the data number exceeds this value, the value label of the chart is not drawn. this.model.setMaxVisibleValueCount(40); - // 是否绘制图表的背景色，绘制范围为图表瀑布图的绘制范围，不包含轴线之外的部分 + // Set whether to draw the background color of the chart. The background color is drawn in the waterfall chart, excluding the part outside the axis. this.model.setDrawGridBackground(false); - // 设置图表的背景色，颜色的规格需要满足CanvasRenderingContext2D.fillstyle/strokestyle规格 + // Set the background color of the chart. The color must meet the CanvasRenderingContext2D.fillstyle/strokestyle specifications. this.model.setGridBackgroundColor('#500000ff') - // 设置不绘制瀑布图的柱体阴影背景 + // Set whether to draw the bar shadow. this.model.setDrawBarShadow(false); - // 设置瀑布图的数值在柱体上方 + // Set whether to draw the value above the bar. this.model.setDrawValueAboveBar(false); - // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等 + // Set the LimitLine component of the left Y-axis, which includes the line width, line segment style, label position, and label font size. this.limitLine1 = new LimitLine(120, 'Upper Limit'); this.limitLine1.setLineWidth(4); this.limitLine1.enableDashedLine(10, 10, 0); @@ -1782,50 +1782,50 @@ ScatterChart({ model: this.model }) this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM); this.limitLine2.setTextSize(10); - // 设置图表左Y轴信息 + // Set the information of the left Y-axis. this.leftAxis = this.model.getAxisLeft(); if (this.leftAxis) { this.leftAxis.setAxisMinimum(0); // this replaces setStartAtZero(true) this.leftAxis.setDrawLimitLinesBehindData(false); - // 添加LimitLines + // Add LimitLines to the left Y-axis. this.leftAxis.addLimitLine(this.limitLine1); this.leftAxis.addLimitLine(this.limitLine2); } - // 设置图表右Y轴信息 + // Set the information of the right Y-axis. this.rightAxis = this.model.getAxisRight(); if (this.rightAxis) { this.rightAxis.setEnabled(false); this.rightAxis.setAxisMinimum(0); } - // 设置X轴信息 + // Set the information of the X-axis. this.xAxis = this.model.getXAxis(); if (this.xAxis) { this.xAxis.setPosition(XAxisPosition.BOTTOM); } - // 为图表设置markerView + // Set the MarkerView component. this.normalMarker = new MarkerView(); this.model.setMarker(this.normalMarker); - // 也可设置定义图表MarkerView + // Set a custom MarkerView. This step is optional. this.stackMarker = new CustomMarkerView(); - // 生成单一颜色数据 + // Generate normal data. this.data = this.getNormalData(); - // 按Y轴刻度范围绘制多种颜色数据 + // Draw data of multiple colors based on the scale range of the Y-axis. this.data = this.getSegmentationData(); - // 高亮最高点最低点数据 + // Highlight the top and bottom data. this.data = this.getTopAndBottomHighlightData(); - // 将数据与图表配置类绑定 + // Bind the data to the chart configuration class. this.model.setData(this.data); - // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据 + // Set the maximum visible range of the X-axis. By default, all the data in X-axis is visible. this.model.setVisibleXRangeMaximum(20); } private getNormalData(): BarData { let values: JArrayList = new JArrayList(); - // 设置标记点位置及颜色 + // Set the position and color of the mark point. let h1 = new WaterfallHighlight(20, 30, Color.Gray); let h2 = new WaterfallHighlight(30, 40, Color.Gray); let h3 = new WaterfallHighlight(40, 60, Color.Green); @@ -1839,7 +1839,7 @@ ScatterChart({ model: this.model }) this.dataSet = new WaterfallDataSet(values, 'DataSet'); this.dataSet.setHighLightColor(Color.Gray); this.dataSet.setDrawIcons(false); - // 为柱体添加颜色信息 + // Set the color of the bar. this.dataSet.setColorByColor(Color.Pink); this.dataSet.setValueTextSize(10) @@ -1847,9 +1847,9 @@ ScatterChart({ model: this.model }) dataSetList.add(this.dataSet); let barData: BarData = new BarData(dataSetList); - //设置瀑布图宽度 + // Set the width of the waterfall chart. barData.setBarWidth(0.3); - //设置顶部圆角半径 + // Set the top radius of the bar. barData.setTopRadius(1); return barData; } @@ -1866,7 +1866,7 @@ ScatterChart({ model: this.model }) this.dataSet.setColorByColor(Color.Pink); this.dataSet.setValueTextSize(10) - // 根据Y刻度范围设置颜色 + // Set the color based on the Y-axis scale range. let highlightList: WaterfallHighlight[] = []; highlightList.push(new WaterfallHighlight(0, 40, Color.Green)); highlightList.push(new WaterfallHighlight(40, 60, Color.Orange)); @@ -1884,29 +1884,29 @@ ScatterChart({ model: this.model }) private getTopAndBottomHighlightData(): BarData { let values: JArrayList = new JArrayList(); let highlightList: WaterfallHighlight[] = []; - // Y刻度范围颜色设置 + // Set the color of the Y-axis scale range. highlightList.push(new WaterfallHighlight(0, 40, Color.Green)); highlightList.push(new WaterfallHighlight(40, 60, Color.Orange)); highlightList.push(new WaterfallHighlight(60, 100, Color.Pink)); - // 瀑布图数据封装 + // Encapsulate the waterfall data. values.add(new WaterfallEntry(1, 10, 90)); values.add(new WaterfallEntry(2, 15, 80)); values.add(new WaterfallEntry(3, 20, 90)); this.dataSet = new WaterfallDataSet(values, 'DataSet'); - // 设置瀑布图选中时颜色 + // Set the color of the waterfall chart when it is selected. this.dataSet.setHighLightColor(Color.Gray); this.dataSet.setDrawIcons(false); - // 设置瀑布图颜色 + // Set the color of the waterfall chart. this.dataSet.setColorByColor(Color.Pink); - // Y刻度范围颜色设置 + // Set the color of the Y-axis scale range. this.dataSet.setYAxisSegmentationColors(highlightList); - // 最高点最低点是否高亮 + // Set whether to highlight the maximum value and the minimum value. this.dataSet.setEnableMaxOrMinHighlightColor(true); - // 最高点高亮时颜色设置 + // Set the highlight color of the maximum value. this.dataSet.setMaxyHighlightColor(Color.Brown); - // 最低点高亮时颜色设置 + // Set the highlight color of the minimum value. this.dataSet.setMinyHighlightColor(Color.Yellow); let dataSetList: JArrayList = new JArrayList(); @@ -1917,20 +1917,20 @@ ScatterChart({ model: this.model }) return barData; } ``` -2. 添加数据到瀑布图表组件 +2. Add data to the waterfall chart component. ``` -// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 -// 如果在之后通过事件触发， -// 可通过dataResult.notifyDataSetChanged();来触发数据更新， -// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， -// 可通过this.model.invalidate();来触发绘制更新。 +// Set the configuration builder class for the component. If the chart needs to be displayed during page initialization, use aboutToAppear to build the chart data. +// If the chart is triggered by event, +// use dataResult.notifyDataSetChanged(); to update data, +// use this.model.notifyDataSetChanged(); to update axis data, +// and use this.model.invalidate(); to update drawing. WaterfallChart({ model: this.model }) .width('100%') .height('70%') ``` -### 添加自定义图标(以柱状图为例) +### Adding a Custom Icon (to a Bar Chart) ``` let charPixelMap: ChartPixelMap = new ChartPixelMap(); @@ -1938,13 +1938,13 @@ WaterfallChart({ model: this.model }) const buffer:ArrayBuffer =fileData.buffer.slice(0,fileData.buffer.byteLength); const imageSource = image.createImageSource(buffer) let pixelMap=await imageSource.createPixelMap() - //设置自定义图标资源 PixelMap + // Set the custom icon resource (PixelMap). charPixelMap.setIcon(pixelMap) - //设置自定义图标资源 resId + // Set the resId of the custom icon resource. //charPixelMap.setIcon($r('app.media.star').id) - //设置自定义图标宽度 + // Set the width of the custom icon. charPixelMap.setWidth(20) - //设置自定义图标高度 + // Set the height of the custom icon. charPixelMap.setHeight(20); let values: JArrayList = new JArrayList(); @@ -1954,42 +1954,42 @@ WaterfallChart({ model: this.model }) let dataSet: BarDataSet = new BarDataSet(values, 'DataSet'); dataSet.setHighLightColor(Color.Black); - //设置显示自定义图标 + // Set whether to draw the custom icons. dataSet.setDrawIcons(true); - //设置自定义图标偏移量 + // Set the offset of the custom icon. dataSet.setIconsOffset(new MPPointF(0, 40)); dataSet.setColorsByVariable(ColorTemplate.VORDIPLOM_COLORS); dataSet.setDrawValues(false) ``` -### 自定义图表 +### Custom Chart -1. 定制数据结构 +1. Customize the data structure - 图表数据分为三层 ，分别对应基类：EntryOhos, DataSet,ChartData + Chart data consists of three base classes, including EntryOhos, DataSet, and ChartData. - - CustomEntry: 定制图表基础数据实体 + - CustomEntry: basic data entity of the custom chart. - 继承自EntryOhos,类，对外提供数据实体类的属性的get,set方法。 + Inherited from EntryOhos, this class provides the **get** and **set** functions to obtain and set the properties of the data entity class. - - CustomDataSet: 定制图表实体的集合类 + - CustomDataSet: collection class of the custom chart entities. - 继承自DataSet, 描述一组实体信息，每个entry通用的属性可在此类中配置及处理，如获取数据集合中的X轴/Y轴最大最小值，设置图表高亮颜色等。 + Inherited from DataSet, this class describes the information of a group of entities and manages the common properties of each entry. For example, you can obtain the maximum and minimum values of the X-axis and Y-axis in the dataset, and set the highlight color of the chart. - - CustomData: 定制图表数据容器 + - CustomData: data container of the custom chart. - 继承自ChartData,处理通用的实体集合(Dataset)的信息，如计算获取最终显示时的X轴/Y轴最大最小值，或者如柱状图的柱体宽度等。 + Inherited from ChartData, this class processes the information of common entity set (dataset). For example, you can calculate the maximum and minimum values of the X-axis and Y-axis during final display, and the bar width of a bar chart. -2. 定制图表配置构建类 +2. Customize the configuration builder class. - 继承自ChartModel基础类，根据需要可以继承子类BarLineChartBaseModel，PieRadarChartBaseModel，同时需要实现各自图表的 DataProvoder接口，主要用于获取图表数据容器CustomData，DataProvider 继承自ChartInterface。 + Inherited from the **ChartModel** class, the child classes **BarLineChartBaseModel** and **PieRadarChartBaseModel** can be used as required. In addition, this class need to implement the **DataProvider** API of the corresponding chart to obtain the chart data container (CustomData). The **DataProvider** is inherited from **ChartInterface**. - 图表配置构建类，需要重写以下重要方法： + To customize the chart configuration builder class, the following functions need to be overridden: - - setContext2D 必须 + - setContext2D Mandatory - 由于图表绘制依赖于Canvas组件，所以需要在绘制的流程中获取到绑定到Canvas组件上的操作上下文CanvasRenderingContext2D，通过此方法将Canvas的操作上下文与图表绘制流程进行绑定，用于后续图表绘制操作。 + Binds **CanvasRenderingContext2D** with the chart drawing process for subsequent chart drawing operations. Since chart drawing depends on the Canvas component, it is necessary to obtain the **CanvasRenderingContext2D** API of the Canvas component during the drawing process. ``` public setContext2D(context2d: CanvasRenderingContext2D) { @@ -1997,11 +1997,11 @@ WaterfallChart({ model: this.model }) } ``` - - onChartSizeChanged 必须 + - onChartSizeChanged Mandatory - 如果想要在页面初始化时就显示图表，需要在aboutToAppear()方法中进行图表数据构建及配置，例如此种情况下，图表绘制流程获取到的组件宽高数据就是不正确的。 + Obtains the size change of the component. To display a chart during page initialization, you must use **aboutToAppear()** to build and configure the chart data. However, in this case, the width and height of the component obtained in the chart drawing process will be incorrect. - 所以需要Canvas组件完成布局之后通过监听组件Size变化回调onAreaChange()通知绘制流程根据组件当前正确的Size进行计算缩放比例，坐标校正等。 + Therefore, after the Canvas component completes the layout, you need to use **onAreaChange()** to notify the drawing process of the component size change, so that the drawing process can calculate the scaling ratio and correct coordinates based on the correct component size. ``` public onChartSizeChanged(newWidth: number, newHeight: number, oldWidth: number, oldHeight: number) { @@ -2009,9 +2009,9 @@ WaterfallChart({ model: this.model }) } ``` - - invalidate 必须 + - invalidate Mandatory - 用于手动触发图表重新绘制，如图表数据，轴边界，显示设置更新等操作之后，需要手动触发重新绘制，刷新最新显示效果。 + Triggers chart redrawing. After operations such as updating chart data, axis boundaries, and display settings, you need to manually trigger chart redrawing to refresh the latest display effect. ``` public invalidate(): void { @@ -2021,15 +2021,15 @@ WaterfallChart({ model: this.model }) } ``` - - init 必须 + - init Mandatory - 此方法用于初始化图表的各个部件及其渲染类 + Initializes the components of a chart and their rendering classes. - 定制部件如：XAxis，YAxis，Description，Legend等， + You need to customize components such as **XAxis**, **YAxis**, **Description**, and **Legend**, - 定制坐标转换类如：Transformer + coordinate conversion class such as **Transformer**, - 定制渲染类如：XAxisRenderer,YAxisRenderer,DataRenderer等。 + and rendering classes such as **XAxisRenderer**, **YAxisRenderer**, and **DataRenderer**. ``` public init(): void { @@ -2047,25 +2047,25 @@ WaterfallChart({ model: this.model }) } ``` - - onDraw 必须 + - onDraw Mandatory - 用于规定图表绘制流程，一般BarLineChartBaseModel，PieRadarChartBaseModel基本符合绘制要求，也可根据业务进行定制，每次图表刷新本质上就是调用此方法进行重新绘制。 + Specifies the chart drawing process. **BarLineChartBaseModel** and **PieRadarChartBaseModel** meet the general drawing requirements and they can also be customized based on services. This function is used to refresh the chart by redrawing the chart. - 注意 + NOTE - 不要在onDraw方法做耗时操作; + Do not perform time-consuming operations in **onDraw**. - 不要在onDraw方法中新建对象; + Do not create an object in **onDraw**. -3. 定制图表部件 +3. Customize the chart components. - 图表各部件(Description，Legend，LimitLine，XAxis，YAxis)都继承自基类ComponentBase，提供图表部件的基础属性，xOffset，yOffset，enabled，textSize，textColor等，同时各部件可以根据特性进行添加定制属性，如X轴/Y轴通过calculate()计算出预期的坐标轴最大最小值（与Dataset里面的最大最小值可能会有差异，X轴/Y轴的最大最小值可以设置预留空间）。 + The chart components such as **Description**, **Legend**, **LimitLine**, **XAxis**, **YAxis** inherit from the base class ComponentBase and provides the basic properties such as **xOffset**, **yOffset**, **enabled**, **textSize**, and **textColor**. In addition, custom properties can be added for each component based on features. For example, **calculate()** is used to calculate the expected maximum and minimum values of the X-axis and Y-axis. (The maximum and minimum values may be different from those in the dataset. You can set the reserved space for the maximum and minimum values of the X-axis and Y-axis.) ``` /** - * 计算要显示的坐标轴最大最小值 - * @param dataMin: 实际的数据最小值 - * @param dataMax: 实际的数据最大值 + * Calculate the maximum and minimum values of the coordinate axis to be displayed. + * @param dataMin: minimum value. + * @param dataMax: maximum value. */ public calculate(dataMin: number, dataMax: number): void { @@ -2090,20 +2090,20 @@ WaterfallChart({ model: this.model }) } ``` -4. 定制渲染类 +4. Customize the rendering classes - CustomXAxisRenderer/CustomYAxisRenderer ：坐标轴渲染器 + CustomXAxisRenderer/CustomYAxisRenderer: axis renderer. - computeAxis - 根据配置信息判断是否需要再次校正要显示的X轴/Y轴的最大最小值 + Determines whether to correct the maximum and minimum values of the X-axis and Y-axis to be displayed based on the configuration information. ``` /** - * X轴渲染器计算要显示的X轴最小值和最大值 - * @param min : XAxis的calculate中计算获取的预期显示的X轴刻度最小值 - * @param max : XAxis的calculate中计算获取的预期显示的X轴刻度最大值 - * @param inverted: 是否反转坐标轴 + * Use X-axis renderer to calculate the minimum and maximum values of the X-axis to be displayed. + * @param min: minimum scale value of the X-axis that is expected to be displayed, which is obtained through calculate() of X-axis renderer. + * @param max: maximum scale value of the X-axis that is expected to be displayed, which is obtained through calculate() of X-axis renderer. + * @param inverted: whether to invert the coordinate axis. */ public computeAxis(min: number, max: number, inverted: boolean) { @@ -2113,7 +2113,7 @@ WaterfallChart({ model: this.model }) return; } - // 如果修改过X轴比例，则根据当前组件宽度，和scalex重新计算新的X轴最大最小值 + // If the ratio of the X-axis is changed, recalculate the maximum and minimum values of the X-axis based on the width of the current component and scalex. if (this.mViewPortHandler.contentWidth() > 10 && !this.mViewPortHandler.isFullyZoomedOutX()) { let p1: MPPointD | undefined = this.mTrans?.getValuesByTouchPoint(this.mViewPortHandler.contentLeft(), this.mViewPortHandler.contentTop()); @@ -2141,49 +2141,49 @@ WaterfallChart({ model: this.model }) - computeAxisValues - 根据确定好的X轴/Y轴的最大最小值，再进行计算在最大最小值之间应该显示多少个刻度标签，对应的值都应该是多少。 + Calculates the number of scale labels to be displayed between the maximum and minimum values and the corresponding values. This function is used after the maximum and minimum values of the X-axis and Y-axis are determined. - renderAxisLabels - 用于绘制坐标轴的刻度标签。 + Draws the scale labels of the coordinate axes. - renderGridLines - 用于绘制坐标轴的网格线。 + Draws the gridlines of the coordinate axes. - renderAxisLine - 用于绘制坐标轴的轴线。 + Draws the axis lines of the coordinate axes. - renderLimitLines - 用于绘制坐标轴数据的限制线。 + Draws the limit lines of the coordinate axes. - CustomDataRender：数据渲染器 + CustomDataRender: data renderer. - initBuffers - 用于处理图表的缓存数据，此方法会分配内存，请谨慎使用，非必要不要使用此方法。 + Processes cached data of the chart. Since this method allocates memory, exercise caution when using it. - drawData - 用于绘制图表，将数据转换为图形。 + Draws charts and convert data into charts. - drawValues - 用于绘制图表数据数值显示。 + Displays data values in charts. - drawExtras - 额外绘制图表内容。 + Draws extra chart content. - drawHighlighted - 绘制图表高亮显示样式。 + Draws the chart highlight style. -5. 定制图表组件 +5. Customize a chart component - 图表绘制基于Canvas组件实现，所以自定义的图表布局需要包含Canvas画布，在Canvas的onReady中开启绘制，通过onAreaChange回调方法校正图表Size。 + Chart drawing is implemented based on the **Canvas** component. Therefore, the custom chart model must contain the **Canvas** component. Enable drawing in **onReady()** of the **Canvas** component and use **onAreaChange()** to correct the chart size. ``` import CustomModel from '../xx/CustomModel'; @@ -2200,21 +2200,21 @@ WaterfallChart({ model: this.model }) .onReady(() => { if (this.model) { - // 画布上下文绑定到图表绘制流程 + / /Bind the CanvasRenderingContext2D to the chart drawing process. this.model.setContext2D(this.context2D); - // 开始绘制图表 + // Start to draw a chart. this.model.onDraw(this.context2D); } }) .onAreaChange((oldArea: Area, newArea: Area) => { if (this.model && ((newArea.width !== oldArea.width) || (newArea.height !== oldArea.height))) { - // 校正图表Size + // Correct the chart size. this.model.onChartSizeChanged(Number(newArea.width), Number(newArea.height), Number(oldArea.width), Number(oldArea.height)); } }) - // 绑定手势识别事件 + // Bind the gesture recognition events. .priorityGesture(GestureGroup(GestureMode.Parallel, TapGesture({ count: 1 }) .onAction((event?: GestureEvent) => { @@ -2244,15 +2244,15 @@ WaterfallChart({ model: this.model }) } ``` -6. 图表显示 +6. Display the chart. - 初始化数据，设置UI显示。 + Initialize data and set the UI display. ``` aboutToAppear() { this.model = new CustomModel(); - // ... 配置各部件样式 - // ... 初始化数据 + // ... Configure the style of each component. + // ... Initialize the data. } build() { @@ -2264,1181 +2264,1181 @@ WaterfallChart({ model: this.model }) } ``` -## 接口说明 -**一、ChartModel** +## Available APIs +**1. ChartModel** -所有图表配置构建类的基类。 +Indicates the base class for all chart configuration builder classes. -| 方法名 | 描述 | +| API | Description | | -------------------------- | ------------------------------------------------------------ | -| animateX | 展示图表时带有X轴动画。 | -| animateXY | 展示图表时同时带有X轴，Y轴动画。 | -| animateY | 展示图表时带有Y轴动画。 | -| calcMinMax | 计算 y-min 和 y-max 值以及 y-delta 和 x-delta 值。 | -| calculateOffsets | 计算图表到边框的偏移量，具体取决于图例的位置，x轴y轴的长度，及其的标签位置。 | -| clear | 清空图表的所有数据，将其置空null，并刷新图表。 | -| clearValues | 从图表中删除所有数据集（以及条目），并刷新图表。 | -| getAnimator | 返回负责对图表值进行动画处理的动画制作者。 | -| getCenter | 返回图表(整个视图)的中心点的可回收的MPPointF实例。 | -| getCenterOffsets | 返回图表的图形绘制的中心区域的可回收的MPPointF实例。 | -| getCenterOfView | 返回图表(整个视图)的中心点的可回收的MPPointF实例。 | -| getContentRect | 返回图表绘制的内容区域的矩形。 | -| getData | 返回已为图表设置的 ChartData 对象。 | -| getDefaultValueFormatter | 返回默认的数据格式化接口实现类。 | -| getHighlightByTouchPoint | 返回 LineChart，ScatterChart，CandleStickChart等图表触摸屏幕时的Highlight 对象（包含 x-index 和 DataSet 索引）。 | -| getHighlighted | 返回当前高亮显示值的数组。这可能是空值，如果没有突出显示，则为空数组。 | -| getHighlighter | 返回当前高亮显示条目接口。 | -| getLegend | 获取图例对象，通过该对象的setEnable(false)方法可以关闭图例显示。 | -| getLegendRenderer | 获取图例渲染器。 | -| getRenderer | 获取图表数据渲染器。 | -| getXAxis | 获取X轴对象。 | -| invalidate | 重绘图表。 | -| notifyDataSetChanged | 图表数据刷新。 | -| onChartSizeChanged | 更新图表正确Size。 | -| onDraw | 图表绘制方法。 | -| setContext2D | 设置图表绘制的画布。 | -| setData | 设置图表数据。 | -| setDragDecelerationEnabled | 设置是否开启惯性滑动。 | -| setHitTestMode | 设置触摸测试类型。 | -| getHitTestMode | 获取触摸测试类型。 | +| animateX | Animates the chart values on the X-axis. | +| animateXY | Animates the chart values on the X-axis and Y-axis. | +| animateY | Animates the chart values on the Y-axis. | +| calcMinMax | Calculates the values of y-min and y-max, and the values of y-delta and x-delta. | +| calculateOffsets | Calculates the offset of the chart to the border, which depends on the position of the legend, the length of the X-axis and Y-axis, and the position of their labels.| +| clear | Deletes all data of a chart, sets the data to null, and refreshes the chart. | +| clearValues | Deletes all datasets (and entries) from the chart and refreshes the chart. | +| getAnimator | Returns the animator responsible for animating chart values. | +| getCenter | Returns a recyclable MPPointF instance of the center point of the chart (the entire view). | +| getCenterOffsets | Returns a recyclable MPPointF instance of the central drawing area of the chart. | +| getCenterOfView | Returns a recyclable MPPointF instance of the center point of the chart (the entire view). | +| getContentRect | Returns the rectangle of the content area of the chart. | +| getData | Returns the ChartData object that has been set for the chart. | +| getDefaultValueFormatter | Returns the default implementation class of the data formatting APIs. | +| getHighlightByTouchPoint | Returns the **Highlight** object (including x-index and DataSet index) of the LineChart, ScatterChart, CandleStickChart, when the chart is touched on the screen.| +| getHighlighted | Returns the array of currently highlighted values. The value may be null, or an empty array if there is no highlighted values.| +| getHighlighter | Returns the API used to highlight the items. | +| getLegend | Obtains the legend object. You can set the value of **setEnable()** to **false** to disable the legend.| +| getLegendRenderer | Obtains the legend renderer. | +| getRenderer | Obtains the chart data renderer. | +| getXAxis | Obtains the X-axis object. | +| invalidate | Refreshes the chart. | +| notifyDataSetChanged | Notifies that the dataset is refreshed. | +| onChartSizeChanged | Updates the size of the chart. | +| onDraw | Draws a chart. | +| setContext2D | Sets the canvas for drawing a chart. | +| setData | Sets the chart data. | +| setDragDecelerationEnabled | Sets whether to enable scrolling with deceleration when the chart is dragged. | +| setHitTestMode | Sets the hit test mode. | +| getHitTestMode | Obtains the hit test mode. | **1.animateX** public animateX(durationMillis: number): void; -展示图表时带有X轴动画。 +Animates the chart values on the X-axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | -------------- | ------ | ---- | -------------------------- | -| durationMillis | number | 是 | 动画播放的时长，单位毫秒。 | +| durationMillis | number | Yes | Duration of the animation, in milliseconds.| public animateX(durationMillis: number, easing: string): void; -展示图表时带有X轴动画。 +Animates the X-axis with the easing curve specified. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | -------------- | ------ | ---- | ------------------------------------------------------------ | -| durationMillis | number | 是 | 动画播放的时长，单位毫秒。 | -| easing | string | 是 | [动画差值曲线](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-animator.md#animatoroptions)。 | +| durationMillis | number | Yes | Duration of the animation, in milliseconds. | +| easing | string | Yes | [Animation interpolation curve](https://docs.openharmony.cn/pages/v5.0/en/application-dev/reference/apis-arkui/js-apis-animator.md).| **2.animateXY** public animateXY(durationMillisX: number, durationMillisY: number): void; -展示图表时同时带有X轴，Y轴动画。 +Animates the chart values on the X-axis and Y-axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | --------------- | ------ | ---- | --------------------------------- | -| durationMillisX | number | 是 | X轴条目动画播放的时长，单位毫秒。 | -| durationMillisY | number | 是 | Y轴条目动画播放的时长，单位毫秒。 | +| durationMillisX | number | Yes | Duration of the animation of the X-axis, in milliseconds.| +| durationMillisY | number | Yes | Duration of the animation of the Y-axis, in milliseconds.| public animateXY(durationMillisX: number, durationMillisY: number, easingX: string): void; -展示图表时同时带有X轴，Y轴动画。 +Animates both the X-axis and Y-axis with the easing curve of the X-axis specified. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | --------------- | ------ | ---- | ------------------------------------------------------------ | -| durationMillisX | number | 是 | X轴条目动画播放的时长，单位毫秒。 | -| durationMillisY | number | 是 | Y轴条目动画播放的时长，单位毫秒。 | -| easingX | string | 是 | X轴[动画差值曲线](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-animator.md#animatoroptions)。 | +| durationMillisX | number | Yes | Duration of the animation of the X-axis, in milliseconds. | +| durationMillisY | number | Yes | Duration of the animation of the Y-axis, in milliseconds. | +| easingX | string | Yes | [Animation interpolation curve](https://docs.openharmony.cn/pages/v5.0/en/application-dev/reference/apis-arkui/js-apis-animator.md) of the X-axis.| public animateXY(durationMillisX: number, durationMillisY: number, easingX: string, easingY: string): void; -展示图表时同时带有X轴，Y轴动画。 +Animates both the X-axis and Y-axis with the easing curves specified. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | --------------- | ------ | ---- | ------------------------------------------------------------ | -| durationMillisX | number | 是 | X轴条目动画播放的时长，单位毫秒。 | -| durationMillisY | number | 是 | Y轴条目动画播放的时长，单位毫秒。 | -| easingX | string | 是 | X轴[动画差值曲线](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-animator.md#animatoroptions)。 | -| easingY | string | 是 | Y轴[动画差值曲线](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-animator.md#animatoroptions)。 | +| durationMillisX | number | Yes | Duration of the animation of the X-axis, in milliseconds. | +| durationMillisY | number | Yes | Duration of the animation of the Y-axis, in milliseconds. | +| easingX | string | Yes | [Animation interpolation curve](https://docs.openharmony.cn/pages/v5.0/en/application-dev/reference/apis-arkui/js-apis-animator.md) of the X-axis.| +| easingY | string | Yes | [Animation interpolation curve](https://docs.openharmony.cn/pages/v5.0/en/application-dev/reference/apis-arkui/js-apis-animator.md) of the Y-axis.| **3.animateY** -展示图表时带有Y轴动画。 +Animates the chart values on the Y-axis. public animateY(durationMillis: number): void; -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | -------------- | ------ | ---- | -------------------------- | -| durationMillis | number | 是 | 动画播放的时长，单位毫秒。 | +| durationMillis | number | Yes | Duration of the animation, in milliseconds.| public animateY(durationMillis: number, easing: string): void; -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | -------------- | ------ | ---- | ------------------------------------------------------------ | -| durationMillis | number | 是 | 动画播放的时长，单位毫秒。 | -| easing | string | 是 | [动画差值曲线](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-animator.md#animatoroptions)。 | +| durationMillis | number | Yes | Duration of the animation, in milliseconds. | +| easing | string | Yes | [Animation interpolation curve](https://docs.openharmony.cn/pages/v5.0/en/application-dev/reference/apis-arkui/js-apis-animator.md).| **4.calcMinMax** protected abstract calcMinMax() : void; -计算 y-min 和 y-max 值以及 y-delta 和 x-delta 值。 +Calculates the values of y-min and y-max, and the values of y-delta and x-delta. **5.calculateOffsets** protected abstract calculateOffsets() : void; -计算图表到边框的偏移量，具体取决于图例的位置，x轴y轴的长度，及其的标签位置。 +Calculates the offset of the chart to the border, which depends on the position of the legend, the length of the X-axis and Y-axis, and the position of their labels. **6.clear** public clear() : void; -清空图表的所有数据，将其置空null，并刷新图表。 +Deletes all data of a chart, sets the data to null, and refreshes the chart. **7.clearValues** public clearValues() : void; -从图表中删除所有数据集（以及条目），并刷新图表。 +Deletes all datasets (and entries) from the chart and refreshes the chart. **8.getAnimator** public getAnimator(): ChartAnimator | null; -返回负责对图表值进行动画处理的动画制作者。 +Returns the animator responsible for animating chart values. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------------------- | ------------ | -| ChartAnimator | null | 动画管理类。 | +| ChartAnimator | null | Animation management class.| **9.getCenter** public getCenter(): MPPointF; -返回图表(整个视图)的中心点的可回收的MPPointF实例。 +Returns a recyclable MPPointF instance of the center point of the chart (the entire view). -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | -------- | ---------------------- | -| MPPointF | 可回收的MPPointF实例。 | +| MPPointF | The recyclable MPPointF instance.| **10.getCenterOffsets** public getCenterOffsets(): MPPointF | null; -返回图表的图形绘制的中心区域的可回收的MPPointF实例。 +Returns a recyclable MPPointF instance of the central drawing area of the chart. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | -------------------- | ---------------------- | -| MPPointF | null | 可回收的MPPointF实例。 | +| MPPointF | null | The recyclable MPPointF instance.| **11.getCenterOfView** public getCenterOfView(): MPPointF; -返回图表(整个视图)的中心点的可回收的MPPointF实例。 +Returns a recyclable MPPointF instance of the center point of the chart (the entire view). -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | -------- | ---------------------- | -| MPPointF | 可回收的MPPointF实例。 | +| MPPointF | The recyclable MPPointF instance.| **12.getContentRect** public getContentRect(): Rect; -返回图表绘制的内容区域的矩形。 +Returns the rectangle of the content area of the chart. -返回值： +Return Value -| 类型 | 说明 | +| Type| Description | | ---- | -------------------------- | -| Rect | 图表绘制的内容区域的矩形。 | +| Rect | The rectangle of the content area.| **13.getData** public getData(): T | null ; -返回已为图表设置的 ChartData 对象。 +Returns the ChartData object that has been set for the chart. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------ | ---------- | -| T| null | 数据对象。 | +| T| null | The data object.| **14.getDefaultValueFormatter** public getDefaultValueFormatter(): IValueFormatter; -返回默认的数据格式化接口实现类。 +Returns the default implementation class of the data formatting APIs. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | --------------- | ---------------------- | -| IValueFormatter | 数据格式化接口实现类。 | +| IValueFormatter | Implementation class of the data formatting APIs.| **15.getHighlightByTouchPoint** public getHighlightByTouchPoint(x: number, y: number): Highlight | null; -返回 LineChart，ScatterChart，CandleStickChart等图表触摸屏幕时的Highlight 对象（包含 x-index 和 DataSet 索引）。 +Returns the **Highlight** object (including x-index and DataSet index) of the LineChart, ScatterChart, and CandleStickChart, when the chart is touched on the screen. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- | --------------------- | -| x | number | 是 | 屏幕触摸点的x轴坐标。 | -| y | number | 是 | 屏幕触摸点的y轴坐标。 | +| x | number | Yes | X-coordinate of the touch point on the screen.| +| y | number | Yes | Y-coordinate of the touch point on the screen.| -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | --------------------- | ------------------ | -| Highlight | null | 触摸点的高亮对象。 | +| Highlight | null | Highlighted object of the touch point.| **16.getHighlighted** public getHighlighted(): Highlight[] | null; -返回当前高亮显示值的数组。这可能是空值，如果没有突出显示，则为空数组。 +Returns the array of currently highlighted values. The value may be null, or an empty array if there is no highlighted values. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- | --------------------- | -| x | number | 是 | 屏幕触摸点的x轴坐标。 | -| y | number | 是 | 屏幕触摸点的y轴坐标。 | +| x | number | Yes | X-coordinate of the touch point on the screen.| +| y | number | Yes | Y-coordinate of the touch point on the screen.| -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | --------------------- | ------------------ | -| Highlight | null | 触摸点的高亮对象。 | +| Highlight | null | Highlighted object of the touch point.| **17.getHighlighter** public getHighlighter(): IHighlighter | null; -返回当前高亮显示条目接口。 +Returns the API used to highlight the items. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------------------ | ---------------------------- | -| IHighlighter | null | 获取触摸点的高亮对象接口类。 | +| IHighlighter | null | API used to obtain the highlighted object of a touch point.| **18.getLegend** public getLegend(): Legend | null ; -获取图例对象。 +Obtains the legend object. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------------ | -------------- | -| Legend | null | 获取图例对象。 | +| Legend | null | Obtains the legend object.| **19.getLegendRenderer** public getLegendRenderer(): LegendRenderer | null; -获取图例渲染器。 +Obtains the legend render. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------------------- | ---------------- | -| LegendRenderer| null | 获取图例渲染器。 | +| LegendRenderer| null | Obtains the legend renderer.| **20.getRenderer** public getRenderer(): DataRenderer | null; -获取图表数据渲染器。 +Obtains the chart data renderer. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------------------ | -------------------- | -| DataRenderer | null | 获取图表数据渲染器。 | +| DataRenderer | null | Obtains the chart data renderer.| **21.getXAxis** public getXAxis(): XAxis | null; -获取X轴对象。 +Obtains the X-axis object. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ----------------- | ------------- | -| XAxis | null | 获取X轴对象。 | +| XAxis | null | Obtains the X-axis object.| **22.invalidate** public abstract invalidate(); -重绘图表。 +Refreshes the chart. **23.notifyDataSetChanged** public abstract notifyDataSetChanged(); -图表数据刷新。 +Notifies that the dataset is refreshed. **24.onChartSizeChanged** public abstract onChartSizeChanged(newWidth: number, newHeight: number, oldWidth: number, oldHeight: number): void; -更新图表正确Size。 +Updates the size of the chart. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | --------- | ------ | ---- | ------------------------ | -| newWidth | number | 是 | 图表当前显示的宽。 | -| newHeight | number | 是 | 图表当前显示的高。 | -| oldWidth | number | 是 | 图表改变Size前显示的宽。 | -| oldHeight | number | 是 | 图表改变Size前显示的高。 | +| newWidth | number | Yes | Width of the chart. | +| newHeight | number | Yes | Height of the chart. | +| oldWidth | number | Yes | Width of the chart before the chart size is changed.| +| oldHeight | number | Yes | Height of the chart before the chart size is changed.| **25.onDraw** protected onDraw(c: CanvasRenderingContext2D): void ; -图表绘制方法。 +Draws a chart. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------------------------ | ---- |----------| -| c | CanvasRenderingContext2D | 是 | 图表绘制的画布。 | +| c | CanvasRenderingContext2D | Yes | Canvas for drawing a chart.| **26.setContext2D** public abstract setContext2D(context2d: CanvasRenderingContext2D); -设置图表绘制的画布。 +Sets the canvas for drawing a chart. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------------------------ | ---- |----------| -| c | CanvasRenderingContext2D | 是 | 图表绘制的画布。 | +| c | CanvasRenderingContext2D | Yes | Canvas for drawing a chart.| **27.setData** public setData(data: T) : void; -设置图表数据。 +Sets the chart data. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type| Mandatory| Description | | ------ | ---- | ---- | ---------------------------- | -| data | T | 是 | 图表数据，T继承自ChartData。 | +| data | T | Yes | Chart data. T is inherited from **ChartData**.| **28.setDragDecelerationEnabled** public setDragDecelerationEnabled(enabled: boolean); -设置是否开启惯性滑动 +Sets whether to enable scrolling with deceleration when the chart is dragged. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type| Mandatory| Description | | ------ | ---- | ---- |--------------------| -| enabled | boolean | 是 | 能力标识。 | +| enabled | boolean | Yes | Capability identifier.| **29.setHitTestMode** public setHitTestMode(hitTestMode: HitTestMode) -设置触摸测试类型 +Sets the hit test mode. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type| Mandatory| Description | | ------ | ---- | ---- |--------------------| -| hitTestMode | HitTestMode | 是 | 触摸测试类型 | +| hitTestMode | HitTestMode | Yes | Hit test mode.| **30.getHitTestMode** public getHitTestMode(): HitTestMode -获取触摸测试类型。 +Obtains the hit test mode. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | |-------| ----------- | -| HitTestMode | 触摸测试类型 | +| HitTestMode | Hit test mode.| -**二、BarLineChartBaseModel** +**2. BarLineChartBaseModel** -柱状图基础类 +Defines base class of the bar chart. -| 方法名 | 描述 | +| API | Description | | ------------------------- | -------------------------------------------------- | -| calcMinMax | 计算坐标的最大最小值。 | -| calculateOffsets | 计算图表offset。 | -| drawGridBackground | 绘制图表背景。 | -| getAxis | 根据Y轴位置获取Y轴对象。 | -| getAxisLeft | 获取左Y轴对象。 | -| getAxisRight | 获取右Y轴对象。 | -| getMinOffset | 获取最小Offset值。 | -| getRendererLeftYAxis | 获取左Y轴渲染器。 | -| getRendererRightYAxis | 获取右Y轴渲染器。 | -| getRendererXAxis | 获取X轴渲染器。 | -| setLongPressCursorEnabled | 设置长按游标能力标识。 | -| getLongPressCursorEnabled | 获取长按游标能力标识。 | -| setLongPressDuration | 设置长按响应时长。 | -| getLongPressDuration | 获取长按响应时长。 | -| setSwipeEnabled | 设置手势滑动响应能力（结合长按游标能力使用）。 | -| getSwipeEnabled | 获取手势滑动响应能力标识（结合长按游标能力使用）。 | +| calcMinMax | Calculates the maximum and minimum values of coordinates. | +| calculateOffsets | Calculates the chart offsets. | +| drawGridBackground | Draws the chart background. | +| getAxis | Obtains the Y-axis object based on the Y-axis position. | +| getAxisLeft | Obtains the left Y-axis object. | +| getAxisRight | Obtains the right Y-axis object. | +| getMinOffset | Obtains the minimum offset value. | +| getRendererLeftYAxis | Obtains the left Y-axis renderer. | +| getRendererRightYAxis | Obtains the right Y-axis renderer. | +| getRendererXAxis | Obtains the X-axis renderer. | +| setLongPressCursorEnabled | Sets whether to display the cursor when a chart is long-pressed on. | +| getLongPressCursorEnabled | Obtains whether the cursor is displayed when a chart is long-pressed on. | +| setLongPressDuration | Sets the response duration for a long press event. | +| getLongPressDuration | Obtains the response duration of a long press. | +| setSwipeEnabled | Sets whether to enable the capability to respond to swipe gestures. This API is used together with **setLongPressCursorEnabled**. | +| getSwipeEnabled | Obtains whether the capability to respond to swipe gestures is enabled. This API is used together with **setLongPressCursorEnabled**.| **1.calcMinMax** protected calcMinMax(): void; -计算坐标的最大最小值。 +Calculates the maximum and minimum values of coordinates. **2.calculateOffsets** public calculateOffsets(): void; -计算图表offset。 +Calculates the chart offsets. **3.drawGridBackground** protected drawGridBackground(c: CanvasRenderingContext2D): void; -绘制图表背景。 +Draws the chart background. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------------------------ | ---- | ------------------ | -| c | CanvasRenderingContext2D | 是 | 图表绘制的上下文。 | +| c | CanvasRenderingContext2D | Yes | Context for drawing a chart.| **4.getAxis** public getAxis(axis: AxisDependency): YAxis | null; -根据Y轴位置获取Y轴对象。 +Obtains the Y-axis object based on the Y-axis position. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | -------------- | ---- | --------- | -| axis | AxisDependency | 是 | Y轴位置。 | +| axis | AxisDependency | Yes | Position of the Y-axis.| -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ----------------- | ------------- | -| YAxis | null | 获取Y轴对象。 | +| YAxis | null | Obtains the Y-axis object.| **5.getAxisLeft** public getAxisLeft(): YAxis | null; -获取左Y轴对象。 +Obtains the left Y-axis object. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ----------------- | ------------- | -| YAxis | null | 获取Y轴对象。 | +| YAxis | null | Obtains the Y-axis object.| **6.getAxisRight** public getAxisRight(): YAxis | null; -获取右Y轴对象。 +Obtains the right Y-axis object. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ----------------- | ------------- | -| YAxis | null | 获取Y轴对象。 | +| YAxis | null | Obtains the Y-axis object.| **7.getMinOffset** public getMinOffset(): number; -获取最小Offset值。 +Obtains the minimum offset value. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | ------------------ | -| number | 获取最小Offset值。 | +| number | Obtains the minimum offset value.| **8.getRendererLeftYAxis** public getRendererLeftYAxis(): YAxisRenderer | null; -获取左Y轴渲染器。 +Obtains the left Y-axis renderer. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------------------- | ----------------- | -| YAxisRenderer | null | 获取左Y轴渲染器。 | +| YAxisRenderer | null | Obtains the left Y-axis renderer.| **9.getRendererRightYAxis** public getRendererRightYAxis(): YAxisRenderer | null; -获取右Y轴渲染器。 +Obtains the right Y-axis renderer. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------------------- | ----------------- | -| YAxisRenderer | null | 获取右Y轴渲染器。 | +| YAxisRenderer | null | Obtains the right Y-axis renderer.| **10.getRendererXAxis** public getRendererXAxis(): XAxisRenderer | null; -获取X轴渲染器。 +Obtains the X-axis renderer. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------------------- | --------------- | -| XAxisRenderer | null | 获取X轴渲染器。 | +| XAxisRenderer | null | Obtains the X-axis renderer.| **11.setLongPressCursorEnabled** public setLongPressCursorEnabled(enabled: boolean): void; -设置长按游标能力标识。 +Sets whether to display the cursor when a chart is long-pressed on. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ |---------| ---- |-------| -| enabled | boolean | 是 | 能力标识。 | +| enabled | boolean | Yes | Capability identifier.| -返回值：无 +Return value: none **12.getLongPressCursorEnabled** public getLongPressCursorEnabled(): boolean; -获取长按游标能力标识。 +Obtains whether the cursor is displayed when a chart is long-pressed on. -参数：无 +Parameter: none -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | |---------|-----------| -| boolean | 长按游标能力标识。 | +| boolean | Identifier of whether the cursor is displayed when the chart is long-pressed on.| **13.setLongPressDuration** public setLongPressDuration(duration: number): void; -设置长按响应时长。 +Sets the response duration for a long press event. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ |---------| ---- |-----| -| duration | number | 是 | 时长。 | +| duration | number | Yes | Duration| -返回值：无 +Return value: none **14.getLongPressDuration** public getLongPressDuration(): number; -获取长按响应时长。 +Obtains the response duration for a long press. -参数：无 +Parameter: none -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | |---------|-------| -| number | 响应时长。 | +| number | Response duration.| **15.setSwipeEnabled** public setSwipeEnabled(enabled: boolean): void; -设置手势滑动响应能力（结合长按游标能力使用）。 +Sets whether to enable the capability to respond to swipe gestures. This API is used together with **setLongPressCursorEnabled**. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ |---------| ---- |-------| -| enabled | boolean | 是 | 能力标识。 | +| enabled | boolean | Yes | Capability identifier.| -返回值：无 +Return value: none **16.getSwipeEnabled** public getSwipeEnabled(): boolean; -获取手势滑动响应能力标识（结合长按游标能力使用）。 +Obtains whether the capability to respond to swipe gestures is enabled. This API is used together with **setLongPressCursorEnabled**. -参数：无 +Parameter: none -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | |---------|-----------| -| boolean | 手势滑动响应能力标识。 | +| boolean | Identifier of whether the capability to respond to swipe gestures is enabled.| -**三、ComponentBase** +**3. ComponentBase** -图表部件基础类。 +Defines the base class of chart components. -| 方法名 | 描述 | +| API | Description | | ------------ | ------------------------------------ | -| setTextColor | 设置部件文本渲染颜色。 | -| getTextColor | 获取部件文本渲染颜色。 | -| setTextSize | 设置部件文本Size，需要转化为vp单位。 | -| getTextSize | 获取部件文本Size。 | -| setXOffset | 设置X轴距离图表内容区域的Offset。 | -| getXOffset | 获取X轴距离图表内容区域的Offset。 | -| setYOffset | 设置Y轴距离图表内容区域的Offset。 | -| getYOffset | 获取Y轴距离图表内容区域的Offset。 | +| setTextColor | Sets the rendering color of the component text. | +| getTextColor | Obtains the rendering color of the component text. | +| setTextSize | Sets the size of the component text, which needs to be converted into a value in units of vp.| +| getTextSize | Obtains the size of the component text. | +| setXOffset | Sets the offset between the X-axis and the chart content area. | +| getXOffset | Obtains the offset between the X-axis and the chart content area. | +| setYOffset | Sets the offset between the Y-axis and the chart content area. | +| getYOffset | Obtains the offset between the Y-axis and the chart content area. | **1.setTextColor** public setTextColor(color: string | number | CanvasGradient | CanvasPattern): void; -设置部件文本渲染颜色。 +Sets the rendering color of the component text. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ----------------------------------------------------------- | ---- | ---------------------- | -| color | string |number|CanvasGradient |CanvasPattern | 是 | 设置部件文本渲染颜色。 | +| color | string |number|CanvasGradient |CanvasPattern | Yes | Sets the rendering color of the component text.| **2.getTextColor** public getTextColor(): string | number | CanvasGradient | CanvasPattern; -获取部件文本渲染颜色。 +Obtains the rendering color of the component text. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ----------------------------------------------------------- | ---------------------- | -| string |number|CanvasGradient |CanvasPattern | 获取部件文本渲染颜色。 | +| string |number|CanvasGradient |CanvasPattern | Obtains the rendering color of the component text.| **3.setTextSize** public setTextSize(size: number): void; -设置部件文本Size，单位是vp。 +Sets the size of the component text, in vp. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- | ------------------ | -| size | number | 是 | 设置部件文本Size。 | +| size | number | Yes | Sets the size of the component text.| **4.getTextSize** public getTextSize(): number; -获取部件文本Size。 +Obtains the size of the component text. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | ------------------ | -| number | 获取部件文本Size。 | +| number | Obtains the size of the component text.| **5.setXOffset** public setXOffset(xOffset: number): void; -设置X轴距离图表内容区域的Offset。 +Sets the offset between the X-axis and the chart content area. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------ | ---- | --------------------------------- | -| xOffset | number | 是 | 设置X轴距离图表内容区域的Offset。 | +| xOffset | number | Yes | Sets the offset between the X-axis and the chart content area.| **6.getXOffset** public getXOffset(): number; -获取X轴距离图表内容区域的Offset。 +Obtains the offset between the X-axis and the chart content area. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | --------------------------------- | -| number | 获取X轴距离图表内容区域的Offset。 | +| number | Obtains the offset between the X-axis and the chart content area.| **7.setYOffset** public setYOffset(yOffset: number): void; -设置Y轴距离图表内容区域的Offset。 +Sets the offset between the Y-axis and the chart content area. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------ | ---- | --------------------------------- | -| yOffset | number | 是 | 设置Y轴距离图表内容区域的Offset。 | +| yOffset | number | Yes | Sets the offset between the Y-axis and the chart content area.| **8.getYOffset** public getYOffset(): number; -获取Y轴距离图表内容区域的Offset。 +Obtains the offset between the Y-axis and the chart content area. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | --------------------------------- | -| number | 获取Y轴距离图表内容区域的Offset。 | +| number | Obtains the offset between the Y-axis and the chart content area.| -**四、AxisBase** +**4. AxisBase** -坐标轴基类。 +Defines the base class of the axis. -| 方法名 | 描述 | +| API | Description | | --------------------------- | -------------------------------------------------- | -| addLimitLine | 为坐标轴添加限制线对象。 | -| calculate | 计算预期坐标轴的最大最小值，用于自定义坐标轴使用。 | -| setAxisMaximum | 设置自定义的轴的最大值。 | -| setAxisMinimum | 设置自定义的轴的最小值。 | -| setDrawAxisLine | 设置是否绘制轴线。 | -| setDrawGridLines | 设置是否绘制网格线。 | -| setDrawGridLinesBehindData | 设置是否在数据后绘制网格线。 | -| setDrawLimitLinesBehindData | 设置是否在数据后绘制限制线。 | -| setValueFormatter | 设置数据的格式转换器。 | +| addLimitLine | Adds a limit line for the coordinate axis. | +| calculate | Calculates the expected maximum and minimum values of the coordinate axis, which are used to customize the coordinate axis.| +| setAxisMaximum | Sets the maximum value of the custom axis. | +| setAxisMinimum | Sets the minimum value of the custom axis. | +| setDrawAxisLine | Sets whether to draw the axis line. | +| setDrawGridLines | Sets whether to draw gridlines. | +| setDrawGridLinesBehindData | Sets whether to draw gridlines behind data. | +| setDrawLimitLinesBehindData | Sets whether to draw limit lines behind data. | +| setValueFormatter | Sets the value formatter. | **1.addLimitLine** public addLimitLine(limitLine: LimitLine): void; -为坐标轴添加限制线对象。 +Adds a limit line for the coordinate axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | --------- | --------- | ---- | ------------------------ | -| limitLine | LimitLine | 是 | 为坐标轴添加限制线对象。 | +| limitLine | LimitLine | Yes | Limit line for the coordinate axis.| **2.calculate** public calculate(dataMin: number, dataMax: number): void; -计算预期坐标轴的最大最小值，用于自定义坐标轴使用。 +Calculates the expected maximum and minimum values of the coordinate axis, which are used to customize the coordinate axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------ | ---- | -------------------- | -| dataMin | number | 是 | 数据集合中的最小值。 | -| dataMax | number | 是 | 数据集合中的最大值。 | +| dataMin | number | Yes | Minimum value in a dataset.| +| dataMax | number | Yes | Maximum value in a dataset.| **3.setAxisMaximum** public setAxisMaximum(max: number): void; -设置自定义的轴的最大值。 +Sets the maximum value of the custom axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- | ------------------ | -| max | number | 是 | 自定义的轴最大值。 | +| max | number | Yes | Maximum value of a custom axis.| **4.setAxisMinimum** public setAxisMinimum(min: number): void; -设置自定义的轴的最小值。 +Minimum value of the custom axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- | -------------------- | -| min | number | 是 | 自定义的轴的最小值。 | +| min | number | Yes | Minimum value of a custom axis.| **5.setDrawAxisLine** public setDrawAxisLine(enabled: boolean): void; -设置是否绘制轴线。 +Sets whether to draw the axis line. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------- | ---- | ------------------ | -| enabled | boolean | 是 | 设置是否绘制轴线。 | +| enabled | boolean | Yes | Whether to draw the axis line.| **6.setDrawGridLines** public setDrawGridLines(enabled: boolean): void; -设置是否绘制网格线。 +Sets whether to draw gridlines. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------- | ---- | -------------------- | -| enabled | boolean | 是 | 设置是否绘制网格线。 | +| enabled | boolean | Yes | Whether to draw gridlines.| **7.setDrawGridLinesBehindData** public setDrawGridLinesBehindData(enabled: boolean): void; -设置是否在数据后绘制网格线。 +Sets whether to draw gridlines behind data. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------- | ---- | ---------------------------- | -| enabled | boolean | 是 | 设置是否在数据后绘制网格线。 | +| enabled | boolean | Yes | Whether to draw gridlines behind data.| **8.setDrawLimitLinesBehindData** public setDrawLimitLinesBehindData(enabled: boolean): void ; -设置是否在数据后绘制限制线。 +Sets whether to draw limit lines behind data. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------- | ---- | ---------------------------- | -| enabled | boolean | 是 | 设置是否在数据后绘制限制线。 | +| enabled | boolean | Yes | Whether to draw limit lines behind data.| **9.setValueFormatter** public setValueFormatter(formatter: IAxisValueFormatter): void ; -设置数据的格式转换器。 +Sets the data formatter. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | --------- | ------------------- | ---- | ---------------------- | -| formatter | IAxisValueFormatter | 是 | 设置数据的格式转换器。 | +| formatter | IAxisValueFormatter | Yes | Data formatter.| -**五、XAxis** +**5. XAxis** -X轴对象。 +Defines an X-axis object. -| 方法名 | 描述 | +| API | Description | | --------------------- | ------------------------------ | -| setPosition | 设置X轴显示位置。 | -| getPosition | 获取X轴显示位置。 | -| setLabelRotationAngle | 设置X轴标签旋转角度。 | -| getLabelRotationAngle | 获取X轴标签旋转角度。 | -| setLabelXOffset | 获取X轴标签偏移量。 | -| getLabelXOffset | 获取标签在 X 轴上的偏移量。 | -| setXAxisLabelPosition | 设置X轴标签位置。 | -| getXAxisLabelPosition | 获取X轴标签位置。 | -| setCustomLabels | 设置x轴自定义Labels。 | -| getCustomLabels | 获取自定义Labels。 | -| setDrawCustomLabels | 设置是否使用自定义Labels。 | -| isDrawCustomLabels | 检查是否正在使用自定义Labels。 | +| setPosition | Sets the position of the X-axis. | +| getPosition | Obtains the position of the X-axis. | +| setLabelRotationAngle | Sets the rotation angle of the X-axis label. | +| getLabelRotationAngle | Obtains the rotation angle of the X-axis label. | +| setLabelXOffset | Sets the offset of the X-axis label. | +| getLabelXOffset | Obtains the offset of the X-axis label. | +| setXAxisLabelPosition | Sets the position of the X-axis label. | +| getXAxisLabelPosition | Obtains the position of the X-axis label. | +| setCustomLabels | Sets custom labels for the X-axis. | +| getCustomLabels | Obtains custom labels. | +| setDrawCustomLabels | Sets whether to draw custom labels. | +| isDrawCustomLabels | Checks whether custom labels are drawn.| **1.setPosition** public setPosition(pos: XAxisPosition): void; -设置X轴显示位置。 +Sets the position of the X-axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------------- | ---- | ----------------- | -| pos | XAxisPosition | 是 | 设置X轴显示位置。 | +| pos | XAxisPosition | Yes | Position of the X-axis.| **2.getPosition** public getPosition(): XAxisPosition; -获取X轴显示位置。 +Obtains the position of the X-axis. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------- | ----------------- | -| XAxisPosition | 获取X轴显示位置。 | +| XAxisPosition | Position of the X-axis.| **3.setLabelRotationAngle** public setLabelRotationAngle(angle: number): void; -设置X轴标签旋转角度。 +Sets the rotation angle of the X-axis label. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- | --------------------- | -| angle | number | 是 | 设置X轴标签旋转角度。 | +| angle | number | Yes | Rotation angle of the X-axis label.| **4.getLabelRotationAngle** public getLabelRotationAngle(): number; -获取X轴标签旋转角度。 +Obtains the rotation angle of the X-axis label. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | --------------------- | -| number | 获取X轴标签旋转角度。 | +| number | Rotation angle of the X-axis label.| **5.setLabelXOffset** public setLabelXOffset(xOffset: number): void -获取X轴标签偏移量 +Sets the offset of the X-axis label. -返回值：无 +Return value: none -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- |------------| -| xOffset | number | 是 | 设置X轴标签偏移量。 | +| xOffset | number | Yes | Offset of the X-axis label.| **6.getLabelXOffset** public getLabelXOffset(): number -获取标签在 X 轴上的偏移量 +Obtains the offset of the X-axis label. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | --------------------- | -| number | 获取标签在 X 轴上的偏移量。 | +| number | Obtains the offset of the X-axis label.| -参数：无 +Parameter: none **7.setXAxisLabelPosition** public setXAxisLabelPosition(position: XAxisLabelPosition): void -设置X轴标签位置 +Sets the position of the X-axis label. -返回值：无 +Return value: none -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- |------------| -| position | XAxisLabelPosition | 是 | 设置X轴标签位置 | +| position | XAxisLabelPosition | Yes | Position of the X-axis label.| **8.getXAxisLabelPosition** public getXAxisLabelPosition(): XAxisLabelPosition -获取X轴标签位置 +Obtains the position of the X-axis label. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | --------------------- | -| XAxisLabelPosition | X轴标签位置 | +| XAxisLabelPosition | Position of the X-axis label.| -参数：无 +Parameter: none **9.setCustomLabels** public setCustomLabels(numbers: number[]): void -设置x轴自定义Labels +Sets custom labels for the X-axis. -返回值：无 +Return value: none -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- |------------| -| numbers | number[] | 是 | 设置x轴自定义Labels | +| numbers | number[] | Yes | Custom labels for the X-axis.| **10.getCustomLabels** public getCustomLabels(): number[] -获取自定义Labels +Obtains custom labels. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | --------------------- | -| number[] | 自定义Labels | +| number[] | Custom Labels.| -参数：无 +Parameter: none **11.setDrawCustomLabels** public setDrawCustomLabels(flag: boolean): void -设置是否使用自定义Labels +Sets whether to draw custom labels. -返回值：无 +Return value: none -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ |---------| ---- |------------| -| flag | boolean | 是 | 设置是否使用自定义Labels | +| flag | boolean | Yes | Whether to draw custom labels.| **12.isDrawCustomLabels** public isDrawCustomLabels(): boolean -检查是否正在使用自定义Labels +Checks whether custom labels are drawn. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | --------------------- | -| boolean | 是否正在使用自定义Labels | +| boolean | Whether custom labels are drawn.| -参数：无 +Parameter: none -**六、YAxis** +**6. YAxis** -Y轴对象。 +Defines an Y-axis object. -| 方法名 | 描述 | +| API | Description | | --------------------- | ------------------------------------------------------------ | -| calculate | 计算轴上的预期的最大最小值。 | -| getAxisDependency | 获取Y轴位置。 | -| setPosition | 设置Y轴标签的位置。 | -| getLabelPosition | 获取Y轴标签的位置。 | -| setLabelXOffset | 设置Y轴标签的X轴方向上的Offset。 | -| getLabelXOffset | 获取Y轴标签的X轴方向上的Offset。 | -| setDrawZeroLine | 设置是否绘制0线。 | -| EventControl | 事件控制类，EventType 为枚举类型(单击、双击、长按) | -| setEventEnable | 启用事件。 | -| setEventDisable | 禁用事件。 | -| eventIsEnable | 事件是否启用。 | -| eventIsDisable | 事件是否被禁用。 | -| setYAxisExtensionLine | 设置y轴延伸线。 | -| addGridLine | 添加自定义网格线。 | -| getGridLines | 获取自定义网格线。 | -| setGridAlpha | 设置网格线颜色不透明度（不包含addGridLine添加的自定义网格线，自定义网格线可通过color属性传入带透明度的颜色） | +| calculate | Calculates the expected maximum and minimum values on the axis. | +| getAxisDependency | Obtains the position of the Y-axis. | +| setPosition | Sets the position of the Y-axis label. | +| getLabelPosition | Obtains the position of the Y-axis label. | +| setLabelXOffset | Sets the offset of the Y-axis label to the X-axis. | +| getLabelXOffset | Obtains the offset of the Y-axis label to the X-axis. | +| setDrawZeroLine | Sets whether to draw the 0 line. | +| EventControl | Defines the event control class. EventType is of the enum class (**SingleTap**, **DoubleTap**, and **LongPress**). | +| setEventEnable | Enables an event. | +| setEventDisable | Disable an event. | +| eventIsEnable | Checks whether an event is enabled. | +| eventIsDisable | Checks whether an event is disabled. | +| setYAxisExtensionLine | Sets the extension line of the Y-axis. | +| addGridLine | Adds a custom gridline. | +| getGridLines | Obtains a custom gridline. | +| setGridAlpha | Sets the alpha of the gridline color. (The custom gridline added by **addGridLine** is not included. The color with alpha can be passed to the custom gridline through the **color** property.)| **1.calculate** public calculate(dataMin: number, dataMax: number): void; -计算轴上的预期的最大最小值。 +Calculates the expected maximum and minimum values on the axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------ | ---- | --------------------- | -| dataMin | number | 是 | 数据集合中的Y最小值。 | -| dataMax | number | 是 | 数据集合中的Y最大值 | +| dataMin | number | Yes | Minimum value on the Y-axis in a dataset.| +| dataMax | number | Yes | Maximum value on the Y-axis in a dataset. | **2.getAxisDependency** public getAxisDependency(): AxisDependency; -获取Y轴位置。 +Obtains the position of the Y-axis. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | ------------- | -| number | 获取Y轴位置。 | +| number | Obtains the position of the Y-axis.| **3.setPosition** public setPosition(pos: YAxisLabelPosition): void; -设置Y轴标签的位置。 +Sets the position of the Y-axis label. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------------------ | ---- | ------------------- | -| pos | YAxisLabelPosition | 是 | 设置Y轴标签的位置。 | +| pos | YAxisLabelPosition | Yes | Position of the Y-axis label.| **4.getLabelPosition** public getLabelPosition(): YAxisLabelPosition; -获取Y轴标签的位置。 +Obtains the position of the Y-axis label. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------------------ | ----------------- | -| YAxisLabelPosition | 获取Y轴标签位置。 | +| YAxisLabelPosition | Position of the Y-axis label.| **5.setLabelXOffset** public setLabelXOffset(xOffset: number): void; -设置Y轴标签的X轴方向上的Offset。 +Sets the offset of the Y-axis label to the X-axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------ | ---- | -------------------------------- | -| xOffset | number | 是 | 设置Y轴标签的X轴方向上的Offset。 | +| xOffset | number | Yes | Offset of the Y-axis label to the X-axis.| **6.getLabelXOffset** public getLabelXOffset(): number; -获取Y轴标签的X轴方向上的Offset。 +Obtains the offset of the Y-axis label to the X-axis. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | -------------------------------- | -| number | 获取Y轴标签的X轴方向上的Offset。 | +| number | Offset of the Y-axis label to the X-axis.| **7.setDrawZeroLine** public setDrawZeroLine(mDrawZeroLine: boolean): void; -设置是否绘制0线。 +Sets whether to draw the 0 line. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------------- | ------- | ---- | ------------- | -| mDrawZeroLine | boolean | 是 | 是否绘制0线。 | +| mDrawZeroLine | boolean | Yes | Whether to draw 0 line.| -**8.EventControl事件控制类** +**8. EventControl** -EventType 为枚举类型(单击、双击、长按) +Defines the event control class. The value of **EventType** is of the enum class, including **SingleTap**, **DoubleTap**, and **LongPress**. enum EventType { SingleTap, @@ -3450,100 +3450,100 @@ LongPress public setEventEnable(evType: EventType): EventControl -启用事件 +Enables an event. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------------------ | ---- |-----------------------------------| -| evType | EventType | 是 | SingleTap、DoubleTap、LongPress三个选项 | +| evType | EventType | Yes | **SingleTap**, **DoubleTap**, and **LongPress**.| **10.setEventDisable** public setEventDisable(evType: EventType): EventControl -禁用事件 +Disable an event. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------------------ | ---- |-----------------------------------| -| evType | EventType | 是 | SingleTap、DoubleTap、LongPress三个选项 | +| evType | EventType | Yes | **SingleTap**, **DoubleTap**, and **LongPress**.| **11.eventIsEnable** public eventIsEnable(evType: EventType): boolean; -事件是否启用。 +Checks whether an event is enabled. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------------------ | ---- |-----------------------------------| -| evType | EventType | 是 | SingleTap、DoubleTap、LongPress三个选项 | +| evType | EventType | Yes | **SingleTap**, **DoubleTap**, and **LongPress**.| **12.eventIsDisable** public eventIsDisable(evType: EventType): boolean; -事件是否被禁用。 +Checks whether an event is disabled. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------------------ | ---- |------------------------------------| -| evType | EventType | 是 | SingleTap、DoubleTap、LongPress三个选项 | +| evType | EventType | Yes | **SingleTap**, **DoubleTap**, and **LongPress**. | **13.setYAxisExtensionLine** public setYAxisExtensionLine(opt: boolean): void -设置y轴延伸线。 +Sets the extension line of the Y-axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | |-----|---------| ---- |------------| -| opt | boolean | 是 | 是否绘制y轴延伸线。 | +| opt | boolean | Yes | Whether to draw the extension line of the Y-axis.| **14.addGridLine** public addGridLine(customLine: GridLineConfig): void -添加自定义网格线。 +Adds a custom gridline. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | |-----|---------| ---- |----------| -| customLine | GridLineConfig | 是 | 设置网格线样式。 | +| customLine | GridLineConfig | Yes | Gridline style.| **15.getGridLines** public getGridLines(): JArrayList -获取自定义网格线。 +Obtains a custom gridline. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | |-----------------------|----------| -| JArrayList | 自定义网格线数组 | +| JArrayList | Custom gridline array.| **16.setGridAlpha** public setGridAlpha(alpha: number): void -设置网格线颜色不透明度（不包含addGridLine添加的自定义网格线，自定义网格线可通过color属性传入带透明度的颜色） +Sets the alpha of the gridline. (The custom gridline added by **addGridLine** is not included. The color with alpha can be passed to the custom gridline through the **color** property.) -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory | Description | |-------|--------|-----|----------------------------------------| -| alpha | number | 是 | 设置网格线颜色不透明度,取值0到255之间，0是完全透明，255是完全不透明 | +| alpha | number | Yes | Gridline opacity. The value ranges from 0 to 255. The value 0 indicates that the gridline is completely transparent, and the value 255 indicates that the gridline is completely opaque.| ``` -// 示例代码参见 CustomGridLineChartPage +// For the sample code, see CustomGridLineChartPage. export interface GridLineConfig { position: number; lineWidth?: number; @@ -3558,13 +3558,13 @@ export interface DashPathEffectConfig { } ``` -**六、自定义MarkerView传入** +**6. Passing Custom MarkerView** ```typescript @State customUiInfo: CustomUiInfo = new CustomUiInfo(90, 50); @Builder customUi() { - // 是否在图表content内 + // Set whether to place the custom UI in the chart content. if (this.customUiInfo.isInbounds && this.customUiInfo.data) { Column() { Text(`2023-12-15`).fontColor(Color.Gray).fontSize(12).fontWeight(FontWeight.Bold) @@ -3587,157 +3587,157 @@ export interface DashPathEffectConfig { BarChart({ model: this.model, - // 自定义 ui: 传入 builder + // Pass the custom UI to the builder. customUiBuilder: this.customUi, - // 通过什么事件触发 + // Set the event type to trigger the custom UI. customUiTriggerEvent: EventType.SingleTap, - // 自定义ui的位置信息 + // Set the location information of the custom UI. customUiInfo: this.customUiInfo, }) ``` -**七、WaterfallDataSet** +**7. WaterfallDataSet** -瀑布图数据类 +Defines the data class of the waterfall chart. -| 方法名 | 描述 | +| API | Description | | ------------- | ---------------------------- | -| setDotsColors | 瀑布图设置所有高亮点的颜色。 | -| getDotsColors | 获取瀑布图所有高亮点的颜色。 | +| setDotsColors | Sets the color of all highlighted points in the waterfall chart.| +| getDotsColors | Obtains the color of all highlighted points in the waterfall chart.| **1.setDotsColors** public setDotsColors(color: number | string): void; -瀑布图设置所有高亮点的颜色。 +Sets the color of all highlighted points in the waterfall chart. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ |----------------------| ---- |--------------------------| -| color | number | string | 是 | 要设置的颜色，可以是number或string。 | +| color | number | string | Yes | Color to set. The value can be a number or string.| **2.getDotsColors** public getDotsColors(): Array { -获取瀑布图所有高亮点的颜色。 +Obtains the color of all highlighted points in the waterfall chart. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | |-----------------------------| --------------------------- | -| Array | 返回包含所有高亮点颜色的数组。 | +| Array | Array of colors of all highlighted points.| -**八、ChartData** +**8. ChartData** -图表数据类 +Defines the chart data class. -| 方法名 | 描述 | +| API | Description | | ----------------------- | --------------------------------------- | -| setHighlightByXDistance | 设置是否仅通过X轴距离来判断是否高亮点。 | -| isHighlightByXDistance | 检查是否仅通过X轴距离来判断是否高亮点。 | +| setHighlightByXDistance | Sets whether to highlight a point based only on its distance to the X-axis.| +| isHighlightByXDistance | Checks whether the point is highlighted based only on its distance to the X-axis.| **1.setHighlightByXDistance** public setHighlightByXDistance(highlightByXDistance: boolean): void; -设置是否仅通过X轴距离来判断是否高亮点。 +Sets whether to highlight a point based only on its distance to the X-axis. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ |---------| ---- |--------------------------| -| highlightByXDistance | boolean | 是 | 是否仅通过X轴距离来判断是否高亮点 | +| highlightByXDistance | boolean | Yes | Whether to highlight a point based only on its distance to the X-axis.| **2.isHighlightByXDistance** public isHighlightByXDistance(): boolean -检查是否仅通过X轴距离来判断是否高亮点。 +Checks whether the point is highlighted based only on its distance to the X-axis. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | |---------|--------| -| boolean | 是否仅通过X轴距离来判断是否高亮点的布尔值 | +| boolean | Whether the point is highlighted based only on its distance to the X-axis.| -**九、BarLineScatterCandleBubbleDataSet** +**9. BarLineScatterCandleBubbleDataSet** -Bar,Line,Scatter,Candle,Bubble五种图表数据的抽象基类 +Defines the abstract base class for the data of bar chart, line chart, scatter chart, candle chart, and bubble chart. **1.setHighLightColor** public setHighLightColor(color: number): void; -设置用于绘制高亮指示器的颜色。 +Sets the color of the highlight indicator. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- | ---------------- | -| color | number | 是 | 高亮指示器的颜色 | +| color | number | Yes | Color of the highlight indicator.| **2.getHighLightColor** public getHighLightColor(): number; -获取用于绘制高亮指示器的颜色。 +Obtains the color of the highlight indicator. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | ---------------- | -| number | 高亮指示器的颜色 | +| number | Color of the highlight indicator.| **3.copyTo** protected copyTo(barLineScatterCandleBubbleDataSet: BarLineScatterCandleBubbleDataSet): void -复制数据到指定的dataSet +Copies data to a specified dataset. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | --------------------------------- | ------------------------------------ | ---- | ----------------------- | -| barLineScatterCandleBubbleDataSet | BarLineScatterCandleBubbleDataSet | 是 | 复制数据到指定的dataSet | +| barLineScatterCandleBubbleDataSet | BarLineScatterCandleBubbleDataSet | Yes | Data copied to a specified dataset.| -**十、LineScatterCandleRadarDataSet** +**10. LineScatterCandleRadarDataSet** **1.setDrawHorizontalHighlightIndicator** public setDrawHorizontalHighlightIndicator(enabled: boolean): void; -设置启用/禁用水平突出显示指示器。 +Sets whether to enable the horizontal highlight indicator. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------- | ---- | ------------------------------------------------------- | -| enabled | boolean | 是 | 启用/禁用水平突出显示指示器。如果禁用，则不绘制指示器。 | +| enabled | boolean | Yes | Whether to enable the horizontal highlight indicator. If the value is **false**, the indicator is not drawn.| **2.setDrawVerticalHighlightIndicator** public setDrawVerticalHighlightIndicator(enabled: boolean): void; -设置启用/禁用垂直突出显示指示器。 +Sets whether to enable the vertical highlight indicator. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------- | ---- | ------------------------------------------------------- | -| enabled | boolean | 是 | 启用/禁用垂直突出显示指示器。如果禁用，则不绘制指示器。 | +| enabled | boolean | Yes | Whether to enable the vertical highlight indicator. If the value is **false**, the indicator is not drawn.| **3.setDrawHighlightIndicators** public setDrawHighlightIndicators(enabled: boolean): void; -设置启用/禁用水平和垂直突出显示指示器。 +Sets whether to enable the horizontal and vertical highlight indicators. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ------- | ------- | ---- | ----------------------------------- | -| enabled | boolean | 是 | 启用/禁用水平和垂直突出显示指示器。 | +| enabled | boolean | Yes | Whether to enable the horizontal and vertical highlight indicators.| @@ -3745,166 +3745,166 @@ public setDrawHighlightIndicators(enabled: boolean): void; public isVerticalHighlightIndicatorEnabled(): boolean; -获取是否启用垂直突出显示指示器。 +Obtains whether the vertical highlight indicator is enabled. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------- | ---------------------------- | -| boolean | 是否启用垂直突出显示指示器。 | +| boolean | Whether the vertical highlight indicator is enabled.| **5.isHorizontalHighlightIndicatorEnabled** public isVerticalHighlightIndicatorEnabled(): boolean; -获取是否启用水平突出显示指示器。 +Obtains whether the horizontal highlight indicator is enabled. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------- | ---------------------------- | -| boolean | 是否启用水平突出显示指示器。 | +| boolean | Whether the horizontal highlight indicator is enabled.| **6.setHighlightLineWidth** public setHighlightLineWidth(width: number): void; -设置高亮线的宽度，单位是vp。 +Sets the width of the highlight line, in vp. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name| Type | Mandatory| Description | | ------ | ------ | ---- | ---------------------------- | -| width | number | 是 | 设置高亮线的宽度，单位是vp。 | +| width | number | Yes | Width of the highlight line, in vp.| **7.getHighlightLineWidth** public getHighlightLineWidth(): number; -获取高亮线的宽度。 +Obtains the width of the highlight line. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------ | -------------- | -| number | 高亮线的宽度。 | +| number | Width of the highlight line.| **8.enableDashedHighlightLine** public enableDashedHighlightLine(lineLength: number, spaceLength: number, phase: number): void; -允许以虚线模式绘制高亮线，例如“------”。 +Enables the dashed highlight line. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ----------- | ------ | ---- | --------------------------------- | -| lineLength | number | 是 | 线段的长度。 | -| spaceLength | number | 是 | 空隙的长度。 | -| phase | number | 是 | 相位偏移，单位为度（通常使用0）。 | +| lineLength | number | Yes | Length of a line segment. | +| spaceLength | number | Yes | Length of the space. | +| phase | number | Yes | Phase offset, in degree. Generally, degree (°) is used.| **9.disableDashedHighlightLine** public disableDashedHighlightLine(): void; -禁用以虚线模式绘制的高亮线。 +Disables the dashed highlight line. -无返回值 +No return value **10.isDashedHighlightLineEnabled** public isDashedHighlightLineEnabled(): boolean; -如果高亮线启用了虚线效果，则返回true，否则返回false。 +Returns **true** if the dashed highlight line is enabled. Otherwise, returns **false**. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | ------- | ------------------------ | -| boolean | 高亮线是否启用了虚线效果 | +| boolean | Whether the dashed highlight line is enabled.| **11.getDashPathEffectHighlight** public getDashPathEffectHighlight(): DashPathEffect; -获取虚线效果。 +Obtains the dash path effect. -返回值： +Return Value -| 类型 | 说明 | +| Type | Description | | -------------- | -------- | -| DashPathEffect | 虚线效果 | +| DashPathEffect | Dash path effect.| **12.copyTo** -protected copyTo(lineScatterCandleRadarDataSet: LineScatterCandleRadarDataSet): void； +protected copyTo(lineScatterCandleRadarDataSet: LineScatterCandleRadarDataSet): void; -拷贝数据至指定dataset。 +Copies data to a specified dataset. -参数： +Parameters -| 参数名 | 类型 | 必填 | 说明 | +| Name | Type | Mandatory| Description | | ----------------------------- | ----------------------------- | ---- | ----------- | -| lineScatterCandleRadarDataSet | LineScatterCandleRadarDataSet | 是 | dataset数据 | +| lineScatterCandleRadarDataSet | LineScatterCandleRadarDataSet | Yes | Dataset.| -## 常见问题 +## FAQs -**1.如果去除图例?** +**1. How to remove the legend?** ```typescript this.model.getLegend()?.setEnabled(false); ``` -**2.如果去除右下角Description字样？** +**2. How to remove the description in the lower right corner?** ```typescript this.model.getDescription()?.setEnabled(false); ``` -**3 . 如何隐藏 Y 轴线？** +**3. How to hide the Y-axis?** ```typescript -this.model.getAxisLeft().setEnabled(false) //隐藏左边Y轴轴线，此时标签数字也隐藏 +this.model.getAxisLeft().setEnabled(false) // Hide the left Y-axis. In this case, the label is also hidden. ``` -**4.如果想隐藏轴线但是想显示数字标签？** +**4. How to hide the axis but display the label?** ```typescript this.model.getAxisRight().setDrawAxisLine(false); ``` -**5.如何控制 Y 轴线数据标签个数?** +**5. How to set the number of Y-Axis Labels?** ```typescript -this.model.getAxisLeft().setLabelCount(8, false);//设置了8个 +this.model.getAxisLeft().setLabelCount(8, false);// Set eight labels. ``` -**6.如何设置轴线颜色，宽度等信息?** +**6. How to set the axis color and width?** ```typescript let leftAxis = this.model.getAxisLeft(); -leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);//显示轴线在图表内部则使用INSIDE_CHART -this.leftAxis.setAxisLineColor(ColorTemplate.rgb("#ff0000"));//设置轴线颜色 -leftAxis.setAxisLineWidth(1);// 设置轴线宽度 -leftAxis.setTextSize(20);//设置y轴标签字体大小 -leftAxis.setDrawGridLines(true);//设置显示网格线 +leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);// If the axis is inside the chart, use INSIDE_CHART. +this.leftAxis.setAxisLineColor(ColorTemplate.rgb("#ff0000"));// Set the axis color. +leftAxis.setAxisLineWidth(1);// Set the axis width. +leftAxis.setTextSize(20);// Set the font size of the Y-axis label. +leftAxis.setDrawGridLines(true);// Set to enable the gridlines. ``` -**7.如何自定义坐标轴标签?** +**7. How to customize axis labels?** -如果不想用坐标轴本身的阿拉伯数字标签，也可以自定义坐标轴标签，实现方法是通过创建自定义类实现 IAxisValueFormatter 接口，修改其中的 getFormattedValue 方法，最后调用坐标轴对象的 setValueFormatter 方法就可以实现自定义坐标轴标签。 +If you do not want to use the Arabic numeral label of the axis, you can customize the axis label by creating a custom class to implement the **IAxisValueFormatter** API, modifying **getFormattedValue()**, and then calling **setValueFormatter()** of the axis object. ```typescript class MyAxisValueFormatter implements IAxisValueFormatter { getFormattedValue(value: number, axis: AxisBase): string { - //将原本存在的对应的value转换成需要的字符串 + // Convert the original value to a string as required. switch (value) { case 1: - return "一"; + return "one"; case 2: - return "二"; + return "two"; case 3: - return "三"; + return "three"; } return ''; } @@ -3913,79 +3913,79 @@ class MyAxisValueFormatter implements IAxisValueFormatter { this.topAxis.setValueFormatter(new TopAxisValueFormatter()) ``` -**8.图表的缩放、触摸等交互设置如何关闭或打开？** +**8. How to enable or disable the interactive settings such as zooming and touching a chart?** ```typescript -setTouchEnabled(enabled: boolean)//允许打开或者关闭与图表的所有触摸交互的情况。 -setDragEnabled(enabled: boolean)//打开或关闭对图表的拖动。 -setScaleEnabled(enabled: boolean)//打开或关闭对图表所有方向的缩放。 -setScaleXEnabled(enabled: boolean)//打开或关闭x轴方向上的缩放 -setScaleYEnabled(enabled: boolean)//打开或关闭y轴方向上的缩放。 -setPinchZoom(enabled: boolean)//如果设置为true，手势捏合缩放被打开。如果设置为false，x和y轴可以被手势捏合缩放。 -setHighlightPerTapEnabled(enabled: boolean)//如果设置为true，在图表中选中触发高亮效果。 -setHighlightPerDragEnabled(enabled: boolean)//设置为true时允许在手指滑动结束时显示高亮效果。默认：true -setHighlightIndicatorEnabled(enabled: boolean)//如果设置为true， 选中数据时，将展示指标线。 -//此方法为dataset设置： -setVisibleXRangeMaximum(maxXRange： number) //设置x轴最多显示数据条数，（要在设置数据源后调用，否则是无效的） +setTouchEnabled(enabled: boolean)// Set whether to enable all touch interactions with a chart. +setDragEnabled(enabled: boolean)// Set whether to enable the dragging function. +setScaleEnabled(enabled: boolean)// Set whether to enable scaling in all directions. +setScaleXEnabled(enabled: boolean)// Set whether to enable scaling on the X-axis. +setScaleXEnabled(enabled: boolean)// Set whether to enable scaling on the Y-axis. +setPinchZoom(enabled: boolean)// Set whether to enable the pinch zooming function. If the value is true, the pinch zooming function is enabled. If false, the pinch zooming function is disabled. +setHighlightPerTapEnabled(enabled: boolean)// Set whether to enable highlight effect for tapping events. If this value is set to true, the highlight effect for tapping events is enabled. +setHighlightPerDragEnabled(enabled: boolean)// Set whether to enable highlight effect for dragging events. If the value is set to true, the highlight effect is displayed when the dragging ends. The default value is true. +setHighlightIndicatorEnabled(enabled: boolean)// Set whether to enable the highlight indicator. If the value is set to true, the indicator line is displayed when data is selected. +// This function is used to set the dataset. +setVisibleXRangeMaximum (maxXRange: number) // Set the maximum number of visible data on the X-axis. (This function must be called after the data source is set. Otherwise, this function is invalid.) ``` -**9.x轴和y轴的个性化样式是怎么设置？** +**9. How to customize the axis styles?** -1）通过如下代码获取到 x 轴/y 轴对象。 +1) Obtain the X-axis or Y-axis object. ``` -//获取x轴 +// Obtain the X-axis. let xAxis = model.getXAxis(); -//获取左y轴 +// Obtain the left Y-axis. let leftAxis = model.getAxisLeft(); -//获取右y轴 +// Obtain the right Y-axis. let rightAxis = model.getAxisRight(); ``` -2）获取 x 轴和左右 y 轴对象之后，可以调用以下方法设置它们的属性 +2) After obtaining the x-axis and y-axis objects, call the following functions to set their properties. ```typescript -setEnabled(enabled: boolean)//设置轴是否被绘制。默认绘制，设置为false则不会被绘制。 -setDrawLabels(enabled: boolean)//设置为true则绘制轴的标签。 -setDrawAxisLine(enabled: boolean)//设置为true则绘制轴线。 -setDrawGridLines(enabled: boolean)//设置为true则绘制网格线。 -setTextColor(color: string | number | CanvasGradient | CanvasPattern)//设置轴标签文本颜色。 -setTextSize(size: number)//设置轴标签的字体大小。 -setTypeface(tf: FontFamily)//设置轴标签的FontFamily，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。 -setGridColor(color: number)//设置网格线颜色。 -setGridLineWidth(width: number)//设置网格线宽度。 -setAxisLineColor(color: number)//设置坐标轴的颜色。 -setAxisLineWidth(width: number)//设置坐标轴的宽度。 -enableGridDashedLine(lineLength: number, spaceLength: number, phase: number)//设置网格线虚线样式，"lineLength"控制短线条的长度，"spaceLength"控制两段线之间的间隔长度，"phase"控制开始的点。 -setAxisMaxValue(max: number)//设置一个自定义的最大值，如果设置了数值，这个值将不会依赖于提供的数据自动计算。 -setAxisMinValue(min: number)//设置一个自定义的最小值。如果设置了数值，这个值将不会依赖于提供的数据进行自动计算。 +setEnabled (enabled: boolean)// Set whether to draw the axis. The axis is drawn by default. If the value is set to false, the axis is not drawn. +setDrawLabels (enabled: boolean)// Set whether to draw the axis labels. If the value is set to true, the axis labels are drawn. +setDrawAxisLine (enabled: boolean)// Set whether to draw the axis line. If the value is set to true, the axis line is drawn. +setDrawGridLines (enabled: boolean)// Set whether to draw the gridlines. If the value is set to true, the gridlines are drawn. +setTextColor(color: string | number | CanvasGradient | CanvasPattern)// Set the text color of the axis label. +setTextSize (size: number)// Set the text size of the axis label. +setTypeface (tf: FontFamily)// Set the font family of the axis label and specify the typeface. The supported types are 'sans-serif', 'serif', and 'monospace'. +setGridColor (color: number)// Set the grid color. +setGridLineWidth (width: number)// Set the width of the gridline. +setAxisLineColor (color: number)// Set the color of the axis. +setAxisLineWidth (width: number)// Set the width of the axis. +enableGridDashedLine(lineLength: number, spaceLength: number, phase: number)// Set the dashed style of the gridline. lineLength specifies the length of the dashed line, spaceLength specifies the interval between two lines, and phase specifies the start point. +setAxisMaxValue (max: number)// Set the custom maximum value. If this value is set, it will not be automatically calculated based on the provided data. +setAxisMinValue (min: number)// Set the custom minimum value. If this value is set, it will not be automatically calculated based on the provided data. ``` -3）x 轴专属设置： +(3) Set the X-axis. ```typescript -setAvoidFirstLastClipping(enabled: boolean)//如果设置为true，图表将避免在图表或屏幕的边缘的标签条目被裁剪掉。 -setPosition(pos: XAxisPosition)//设置XAxis应该出现的位置。可以选择TOP，BOTTOM，BOTH\_SIDED，TOP\_INSIDE或者BOTTOM\_INSIDE。 +setAvoidFirstLastClipping (enabled: boolean)// Set whether to prevent the first and last labels from being clipped. If the value is set to true, the labels on the edge of the chart or screen will not be clipped. +setPosition (pos: XAxisPosition)// Set the position of the X-axis. The value can be TOP, BOTTOM, BOTH\_SIDED, TOP\_INSIDE, or BOTTOM\_INSIDE. ``` -4）y轴专属设置： +(4) Set the Y-axis. ```typescript -setInverted(enabled: boolean)//如果设置为true，这个轴将被反向，那意味着最大值将被放到底部，最小值将被放到顶部。 -setSpaceTop(percent: number)//设置在图表上最高处的值相比轴上最高值的顶端空间（占总轴范围的百分比）。 -setSpaceBottom(percent: number)//设置在图表上最低处的值相比轴上最低处值的底部空间（总轴范围的百分比）。 -setPosition(pos: YAxisLabelPosition)//设置轴标签应该被绘制的位置。INSIDE\_CHART或者OUTSIDE\_CHART中的一个。 +setInverted (enabled: boolean)// Set whether to invert the Y-axis. If the value is set to true, the axis is reversed, indicating that the maximum value is placed at the bottom and the minimum value is placed at the top. +setSpaceTop (percent: number)// Set the top space (the percentage of the total axis range occupied by the space between the highest value on the axis and the highest value on the chart). +setSpaceBottom (percent: number)// Set the bottom space (the percentage of the total axis range occupied by the space between the lowest value on the axis and the lowest value on the chart). +setPosition (pos: YAxisLabelPosition)// Set the position of the axis label. The value can be INSIDE\_CHART or OUTSIDE\_CHART. ``` -## 常见自定义图表 +## Common Custom Charts -### **1.绘制虚实相接的曲线图** +### **1. A Line Chart with the Dashed Line Connected to the Solid Line** -参考代码位置：entry/src/main/ets/pages/customCharts/DashedSolidLinePage +The reference code is in **entry/src/main/ets/pages/customCharts/DashedSolidLinePage**. -mpchart本身的绘制功能是不支持虚实相接的曲线的，要么完全是实线，要么完全是虚线。那么当我们的需求是一半是虚线，一半是实线的曲线时，就需要自己定义方法进行绘制了。 +mpchart does not support the curves that are connected by dashed and solid lines. The curves must be solid lines or dashed lines. If half of the curves are dashed lines and the other half are solid lines, you need to define a function to draw the curves. -首先，我们需要写一个MyLineDataSet类，继承自LineDataSet（线型图的数据类）。为什么需要这个类呢？因为我们需要在初始化数据的时候定义这个虚实相接的线是从哪里开始由实线变为虚线的，这里MyLineDataSet类的构造方法比它的父类多了一个interval参数，也就是虚实分隔点。 +First, create the **MyLineDataSet** class that inherited from **LineDataSet** (data class of the line chart). Since the start point of the solid line after the dashed line need to be defined when initializing data. The **MyLineDataSet** class is necessary because it has the **interval** parameter that its parent class does not have, and this parameter specifies the separation point between the dashed line and the solid line. ```typescript import { EntryOhos, JArrayList, LineDataSet } from '@ohos/mpchart'; @@ -3999,7 +3999,7 @@ export class MyLineDataSet extends LineDataSet { } ``` -定义好自己的数据类之后，就要定义MyRender类了，实线具体的绘制功能，MyRender类继承自LineChartRenderer，因为是要绘制曲线，所以重写的是drawCubicBezier方法，MyRender类的代码如下： +Then, define the **MyRender** class to draw solid lines. The **MyRender** class inherits from the **LineChartRenderer** class. To draw curves, you need to override **drawCubicBezier**. The code of the **MyRender** class is as follows: ```typescript import { EntryOhos, ILineDataSet, Style, Transformer, Utils, LineChartRenderer } from '@ohos/mpchart'; @@ -4022,9 +4022,9 @@ export default class MyRender extends LineChartRenderer{ const intensity: number = dataSet.getCubicIntensity(); let cubicPath = new Path2D(); - //实线 + // Solid line. let solidLinePath = new Path2D(); - //虚线 + // Dashed line. let dashedLinePath = new Path2D(); if (this.mXBounds.range >= 1) { let prevDx: number = 0; @@ -4136,16 +4136,16 @@ export default class MyRender extends LineChartRenderer{ } ``` -这个方法主要内容就是定义了两条path2D，也就是线段来绘制实线和虚线。 +This function defines two **path2D**, that is, line segments, to draw the solid line and dashed line. ```typescript -//实线 +// Solid line. let solidLinePath = new Path2D(); -//虚线 +// Dashed line. let dashedLinePath = new Path2D(); ``` -绘制方法如下: +The drawing function is as follows: ```typescript solidLinePath.bezierCurveTo( @@ -4158,11 +4158,11 @@ solidLinePath.bezierCurveTo( ); ``` -就是调用path2D的方法bezierCurveTo方法，这个方法有6个参数，分别是控制点1的（x值，y值 ）和 控制点2的（x值，y值）以及目标点的（x值，y值）。直接把父类的方法抄过来即可。 +Call **bezierCurveTo** of **path2D**. This function provides six parameters, including the x value and y value of control point 1, the x value and y value of control point 2, and the x value and y value of the target point. This function can be copied from the parent class. -我们需要有一个if判断，if(j <= dataSet.interval)就是当j小于dataSet.interval时，写绘制实线的方法，当j等于dataSet.interval时，虚线要moveTo当前位置；当j大于dataSet.interval时，就调用dashedLinePath.bezierCurveTo方法绘制虚线了。 +Define **If (j <= dataSet.interval)**. This if judgment specifies that when **j** is less than **dataSet.interval**, the solid line is drawn; when **j** is equal to **dataSet.interval**, the dashed line is moved to the current position; and when **j** is greater than **dataSet.interval**, **dashedLinePath.bezierCurveTo** is called to draw the dashed line. -最后绘制方法是调用c.stroke方法绘制的。c.setLineDash([5,5,0]);是设置虚线效果。 +Call the **c.stroke** function. **c.setLineDash ([5,5,0])** is used to set the dashes line style. ```typescript Utils.resetContext2DWithoutFont(c, this.mRenderPaint); @@ -4177,7 +4177,7 @@ solidLinePath.bezierCurveTo( c.closePath(); ``` - 最后的使用代码如下： + The code for the last step is as follows: ```typescript import { @@ -4194,20 +4194,20 @@ struct Index { private model: LineChartModel = new LineChartModel(); aboutToAppear() { - // 创建一个 JArrayList 对象，用于存储 EntryOhos 类型的数据 + // Create a JArrayList object to store data of the EntryOhos class. let values: JArrayList = new JArrayList(); - // 循环生成 1 到 20 的随机数据，并添加到 values 中 + // Generate random data from 1 to 20 cyclically and add the data to values. for (let i = 1; i <= 20; i++) { values.add(new EntryOhos(i, Math.random() * 100)); } - // 创建 LineDataSet 对象，使用 values 数据，并设置数据集的名称为 'DataSet' + // Create a LineDataSet object, use the values data, and set the dataset name to 'DataSet'. let dataSet = new MyLineDataSet(values, 'DataSet', 6); dataSet.setMode(Mode.CUBIC_BEZIER); dataSet.setDrawCircles(false); dataSet.setColorByColor(Color.Blue) let dataSetList: JArrayList = new JArrayList(); dataSetList.add(dataSet); - // 创建 LineData 对象，使用 dataSetList数据，并将其传递给model + // Create a LineData object to hold dataSetList, and transfer the data to the model. let lineData: LineData = new LineData(dataSetList); this.model?.setData(lineData); this.model.setRenderer(new MyRender(this.model, this.model.getAnimator()!, this.model.getViewPortHandler())) @@ -4225,11 +4225,11 @@ struct Index { } ``` -### 2.左y轴显示数值，右y轴显示百分比 +### 2. A chart with the left Y-axis displaying values and the right Y-axis displaying percentages. -参考代码位置：entry/src/main/ets/pages/customCharts/LeftRightAxisPage.ets +The reference code is in **entry/src/main/ets/pages/customCharts/LeftRightAxisPage.ets**. -左y轴数值不变，右y轴改成百分比，需要通过自定义RightAxisFormatter实现IAxisValueFormatter接口，将右y轴的数值改成百分比文本，RightAxisFormatter类如下： +To change the values on the right Y-axis to percentages and retain the values on the left Y-axis, you need to customize **RightAxisFormatter** to implement the **IAxisValueFormatter** API. The code of the **RightAxisFormatter** class is as follows: ```typescript class RightAxisFormatter implements IAxisValueFormatter { @@ -4257,22 +4257,22 @@ class RightAxisFormatter implements IAxisValueFormatter { } ``` -使用方法如下： +Use the following function: ```typescript -//设置标签文本转换器 +// Set the label text formatter. rightAxis?.setValueFormatter(new RightAxisFormatter(this.maxNumber)); ``` -### 3.短刻度线 +### 3. A Chart with Short Scale Lines -参考代码位置：entry/src/main/ets/pages/customCharts/ScaleLinePage +The reference code is in **entry/src/main/ets/pages/customCharts/ScaleLinePage**. -若需绘制x轴的短刻度线，可以利用现有资源，将原本的网格线稍作修改，改成绘制一条短线即可。 +To draw short scale lines for the X-axis, you can modify the original gridlines to short lines based on the existing APIs. -具体的方法就是写一个类MyXAxisRender继承自XAxisRenderer，重写父类的drawGridLine方法， +Specifically, you can create the **MyXAxisRender** class that inherited from the **XAxisRenderer** class, and and override **drawGridLine()** of the parent class. -代码如下： +The code is as follows: ```typescript import { Utils, XAxisRenderer } from '@ohos/mpchart'; @@ -4290,72 +4290,72 @@ export default class MyXAxisRender extends XAxisRenderer{ } ``` -其中关键代码就是c.moveTo(x，bottom)和c.lineTo(x, bottom-10），这两行代码决定了刻度线绘制的位置和长短，即从图表底部开始往上绘制一条长度为10vp的线条。 +**c.moveTo (x, bottom)** and **c.lineTo (x, bottom-10)** are important because they determine the position and length of the scale line. That is, a 10vp line is drawn from the bottom of the chart to the top. -那么使用的时候，就通过以下代码将X轴的绘制类改成自定义的绘制类 MyXAxisRender： +In this case, use the following code to change the drawing class of the X-axis to the custom drawing class **MyXAxisRender**: ```typescript this.model.setXAxisRenderer(new MyXAxisRender(this.model.getViewPortHandler(), this.model.getXAxis()!, this.model.getTransformer(AxisDependency.LEFT)!)); ``` -### 4.根据y轴刻度绘制渐变色曲线 +### 4. A Chart with a Gradient Line Based on the Scale of the Y-Axis -参考代码位置：entry/src/main/ets/pages/customCharts/GradientLinePage +The reference code is in **entry/src/main/ets/pages/customCharts/GradientLinePage**. -渐变色曲线的参考代码修改了两个部件的绘制效果：一个是左y轴的绘制效果，另一个是数据线的绘制效果。这两个部件涉及到YAxisRenderer和LineChartRenderer两个绘制类。 +To draw gradient lines, you need to modify the drawing effects of the left Y-axis and the data line components. That is, the **YAxisRenderer** and **LineChartRenderer** classes. -首先，修改左y轴的绘制效果需要创建一个继承自YAxisRenderer类的自定义类MyAxisRender，并修改其中的renderAxisLine方法来改变y轴的绘制效果。修改的主要内容是将canvas的strokeStyle设置为通过createLinearGradient方法创建的渐变色效果，并将其应用到y轴线的描边样式中。这样，左边的y轴会呈现出颜色渐变的效果。 +To modify the drawing effect of the left Y-axis, you need to create the **MyAxisRender** class that inherited from the **YAxisRenderer** class and modify **renderAxisLine()** . Set **strokeStyle** of the canvas to the gradient effect created by using **createLinearGradient** and apply the **strokeStyle** to the Y-axis. In this way, the left Y-axis presents a gradient effect. -接着，数据线的绘制效果，需要创建一个继承自LineChartRenderer类的自定义类MyDataRender，并修改其中的drawCubicBezier方法。创建一个从底部到顶部的垂直渐变，然后将这个渐变应用到数据线的描边样式中。 +Then, create the **MyDataRender** class that inherited from the **LineChartRenderer** class and modify **drawCubicBezier()** to modify the drawing effect of the data line. Create a vertical gradient effect, and then apply the gradient effect to the stroke style of the data line. -## 约束与限制 +## Constraints -在下述版本验证通过： -- DevEco Studio: 5.0 (5.0.3.500), SDK: API12 (5.0.0.25) +This project has been verified in the following versions: +- DevEco Studio: 5.0 (5.0.3.500), SDK: API 12 (5.0.0.25) -## 目录结构 +## Directory Structure ```` |---- ohos-MPChart -| |---- entry # 示例代码文件夹 -| |---- library # mpchart库文件夹 -| |---- index.ets # 对外接口 -│ ├----components # 框架代码目录 -│ ├----animation # 动画目录 +| |---- entry # Sample code +| |---- library # mpchart library +| |---- index.ets # External APIs +│ ├----components # Framework code +│ ├----animation # Animation code │ │ -│ ├----buffer # 缓存相关目录 +│ ├----buffer # Buffers │ │ -│ ├----chartcomponents # 各类型图表目录 +│ ├----chartcomponents # Chart components │ │ -│ ├----charts # 各类型图表Model类目录 +│ ├----charts # Chart models │ │ -│ ├----components # 自定义组件目录 +│ ├----components # Custom components │ │ -│ ├----data # 数据实体目录 +│ ├----data # Data entities │ │ -│ ├----formatter # 各种数据格式化目录 +│ ├----formatter # Data formatters │ │ -│ ├----highlight # 各种图表中高亮显示操作目录 +│ ├----highlight # Highlight components │ │ -│ ├----interfaces # 对外接口目录 +│ ├----interfaces # External APIs │ │ -│ ├----jobs # 动画工作线程目录 +│ ├----jobs # Animation working threads │ │ -│ ├----listener # 手势监听目录 +│ ├----listener # Gesture listeners │ │ -│ ├----renderer # 各种图表绘制属性设置目录 +│ ├----renderer # Chart renderers │ │ -│ └----utils # 工具类目录 +│ └----utils # Utility classes │ -└─resources # 资源文件 -| |---- README.md # 安装使用方法 +└─resources # Resource files +| |---- README.md # Readme ```` -## 贡献代码 -使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/ohos-MPChart/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/openharmony-sig/ohos-MPChart/pulls) 。 +## How to Contribute +If you find any problem during the use, submit an [Issue](https://gitee.com/openharmony-sig/ohos-MPChart/issues) or [PR](https://gitee.com/openharmony-sig/ohos-MPChart/pulls) to us. -## 开源协议 -本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/ohos-MPChart/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +## License +This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/ohos-MPChart/blob/master/LICENSE). diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000..b8c7e89 --- /dev/null +++ b/README_zh.md @@ -0,0 +1,4361 @@ +# mpchart + +## 简介 +mpchart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI，mpchart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。 + +## 效果展示： +![gif](preview/preview.gif) +## 安装教程 + +``` + ohpm install @ohos/mpchart +``` + +OpenHarmony ohpm环境配置等更多内容，请参考 [如何安装OpenHarmony ohpm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md) 。 + +## 使用说明 + +### 柱状图 + +1. 柱状图数据初始化： + +``` + import { + BarChart, // 柱状图图表类 + BarChartModel, // 柱状图配置构建类 + BarData, // 柱状图数据包 + BarDataSet, // 柱状图数据集合 + BarEntry, // 柱状图数据结构 + ChartGesture, // 手势事件模式 + Description, // 图表Description(描述)部件 + EntryOhos, // 图表数据结构基础类 + Fill, // 图表填充类型构建类 + Highlight, // 图表高亮数据 + IBarDataSet, // 柱状图数据集合的操作类 + JArrayList, // 工具类：数据集合 + Legend, // 图表Legend(图例)部件 + LimitLabelPosition, // 图表的LimitLine标签位置枚举类 + LimitLine, // 图表LimitLine + MarkerView, // 图表的Marker(标志气泡)部件 + OnChartGestureListener, // 手势事件监听 + OnChartValueSelectedListener, // 数据选择监听 + XAxis, // 图表X轴部件 + XAxisPosition, // 图表X轴标签位置枚举类 + YAxis, // 图表Y轴部件 + YAxisLabelPosition // 图表Y轴标签位置枚举类 +} from '@ohos/mpchart'; + +// 构造数据选择监听器 + private valueSelectedListener: OnChartValueSelectedListener = { + onValueSelected: (e: EntryOhos, h: Highlight) => { + // ...todoSomething + }, + onNothingSelected: () => { + // ...todoSomething + } + } + + // 构造手势识别事件监听器 + private chartGestureListener: OnChartGestureListener = { + onChartGestureStart: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => { + }, + onChartGestureEnd: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => { + // ...todoSomething + }, + onChartLongPressed: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => { + // ...todoSomething + }, + onChartDoubleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => { + // ...todoSomething + }, + onChartSingleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => { + // ...todoSomething + }, + onChartFling: (isTouchEvent: boolean, me1: TouchEvent | GestureEvent, me2: TouchEvent, velocityX: number, velocityY: number) => { + // ...todoSomething + }, + onChartScale: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, scaleX: number, scaleY: number) => { + // ...todoSomething + }, + onChartTranslate: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, dX: number, dY: number) => { + // ...todoSomething + } + } + + // 图表数据初始化 + aboutToAppear() { + + // Step1:必须：初始化图表配置构建类 + this.model = new BarChartModel(); + + // Step2:配置图表指定样式，各部件间没有先后之分 + + // 为图表添加数据选择的监听器 + this.model.setOnChartValueSelectedListener(this.valueSelectedListener); + // 为图表添加手势识别监听器 + this.model.setOnChartGestureListener(this.chartGestureListener); + // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件 + let description: Description | null = this.model.getDescription() + if (description) { + description.setEnabled(false); + } + // 获取图表图例部件，设置图表图例部件不可用 + let l: Legend | null = this.model.getLegend(); + if (l) { + l.setEnabled(false); + } + // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签 + this.model.setMaxVisibleValueCount(40); + // 是否绘制图表的背景色，绘制范围为图表柱状图的绘制范围，不包含轴线之外的部分 + this.model.setDrawGridBackground(false); + // 设置图表的背景色，颜色的规格需要满足CanvasRenderingContext2D.fillstyle/strokestyle规格 + this.model.setGridBackgroundColor('#500000ff') + // 设置不绘制柱状图的柱体阴影背景 + this.model.setDrawBarShadow(false); + // 设置柱状图的数值在柱体上方 + this.model.setDrawValueAboveBar(false); + // 设置柱状图的高亮范围是否为整个柱体，只在堆叠柱状图中有区别 + this.model.setHighlightFullBarEnabled(false); + // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等 + this.limitLine1 = new LimitLine(120, 'Upper Limit'); + this.limitLine1.setLineWidth(4); + this.limitLine1.enableDashedLine(10, 10, 0); + this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP); + this.limitLine1.setTextSize(10); + + this.limitLine2 = new LimitLine(50, 'Lower Limit'); + this.limitLine2.setLineWidth(4); + this.limitLine2.enableDashedLine(10, 10, 0); + this.limitLine2.setLineColor(Color.Yellow); + this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM); + this.limitLine2.setTextSize(10); + + // 设置图表左Y轴信息 + this.leftAxis = this.model.getAxisLeft(); + if (this.leftAxis) { + this.leftAxis.setAxisMinimum(0); // this replaces setStartAtZero(true) + this.leftAxis.setDrawLimitLinesBehindData(false); + + // 添加LimitLines + this.leftAxis.addLimitLine(this.limitLine1); + this.leftAxis.addLimitLine(this.limitLine2); + } + // 设置图表右Y轴信息 + this.rightAxis = this.model.getAxisRight(); + if (this.rightAxis) { + this.rightAxis.setEnabled(false); + this.rightAxis.setAxisMinimum(0); + } + // 设置X轴信息 + this.xAxis = this.model.getXAxis(); + if (this.xAxis) { + this.xAxis.setPosition(XAxisPosition.BOTTOM); + } + // 为图表设置markerView + this.normalMarker = new MarkerView(); + this.model.setMarker(this.normalMarker); + // 也可设置定义图表MarkerView + this.stackMarker = new CustomMarkerView(); + // 生成单一颜色数据 + this.data = this.getNormalData(); + // 将数据与图表配置类绑定 + this.model.setData(this.data); + // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据 + this.model.setVisibleXRangeMaximum(20); + } + + private getNormalData(): BarData { + let values: JArrayList = new JArrayList(); + values.add(new BarEntry(1, 73.3)); + values.add(new BarEntry(2, 5.4)); + + let dataSet: BarDataSet = new BarDataSet(values, 'DataSet'); + dataSet.setHighLightColor(Color.Black); + dataSet.setDrawIcons(false); + // 为柱体添加颜色信息 + dataSet.setColorByColor(Color.Pink); + + let dataSetList: JArrayList = new JArrayList(); + dataSetList.add(dataSet); + + let barData: BarData = new BarData(dataSetList); + //设置柱状图宽度 + barData.setBarWidth(0.85); + //设置顶部圆角半径 + barData.setTopRadius(5); + return barData; + } + + private getGradientData(): BarData { + let values: JArrayList = new JArrayList(); + values.add(new BarEntry(1, 32.9)); + values.add(new BarEntry(2, 44.7)); + + let dataSet: BarDataSet = new BarDataSet(values, 'DataSet'); + dataSet.setHighLightColor(Color.Black); + dataSet.setDrawIcons(false); + let startColor1: string = '#ffffbb33'; + let startColor2: string = '#ff33b5e5'; + let startColor3: string = '#ffffbb33'; + let startColor4: string = '#ff99cc00'; + let startColor5: string = '#ffff4444'; + let endColor1: string = '#ff0099cc'; + let endColor2: string = '#ffaa66cc'; + let endColor3: string = '#ff669900'; + let endColor4: string = '#ffcc0000'; + let endColor5: string = '#ffff8800'; + let gradientFills: JArrayList = new JArrayList(); + gradientFills.add(new Fill(startColor1, endColor1)); + gradientFills.add(new Fill(startColor2, endColor2)); + gradientFills.add(new Fill(startColor3, endColor3)); + gradientFills.add(new Fill(startColor4, endColor4)); + gradientFills.add(new Fill(startColor5, endColor5)); + // 为柱体添加渐变的颜色信息 + dataSet.setFills(gradientFills); + + let dataSetList: JArrayList = new JArrayList(); + dataSetList.add(dataSet); + + let barData: BarData = new BarData(dataSetList); + barData.setBarWidth(0.85); + return barData; + } + + private getStackData(): BarData { + let values: JArrayList = new JArrayList(); + values.add(new BarEntry(1, [38.0, 28.0, 39.8])); + values.add(new BarEntry(2, [18.2, 16.1, 16.1])); + + let set1: BarDataSet | null = null; + set1 = new BarDataSet(values, "Statistics Vienna 2014"); + set1.setDrawIcons(false); + // 为柱体添加指定分段的颜色信息 + set1.setColorsByArr([Color.Red, Color.Green, Color.Pink]); + set1.setStackLabels(["Births", "Divorces", "Marriages"]); + + let dataSets: JArrayList = new JArrayList(); + dataSets.add(set1); + + let data: BarData = new BarData(dataSets); + data.setValueTextColor(Color.White); + return data; + } +``` + +2. 添加数据到自定义竖向柱状图表组件 + +``` +// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 +// 如果在之后通过事件触发， +// 可通过barData.notifyDataSetChanged();来触发数据更新， +// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， +// 可通过this.model.invalidate();来触发绘制更新。 +BarChart({ model: this.model }) + .width('100%') + .height('30%') +``` + +### 线形图 + +1. 线形图数据初始化： + +``` +import { + JArrayList, // 工具类：数据集合 + XAxis, // 图表X轴部件 + XAxisPosition, // 图表X轴标签位置枚举类 + YAxis, // 图表Y轴部件 + Description, // 图表描述标签 + Legend, // 图表Legend(图例)部件 + OnChartValueSelectedListener, // + Highlight,// 图表高亮数据 + EntryOhos,// 图表数据结构基础类 + YAxisLabelPosition,// 图表Y轴标签位置枚举类 + LineDataSet, //线形图数据集合 + ILineDataSet, // 线形图数据集合的操作类 + LineData, //线形图数据包 + Mode, //线形图形状 + LineChart, // 线形图图表类 + LineChartModel,// 线形图配置构建类 + LimitLine, // 图表LimitLine + LimitLabelPosition, // 图表的LimitLine标签位置枚举类 + ChartColorStop, //颜色类 + LegendForm, //图例形状 +} from '@ohos/mpchart'; + +// 构造数据选择监听器 + private valueSelectedListener: OnChartValueSelectedListener = { + onValueSelected: (e: EntryOhos, h: Highlight) => { + // ...todoSomething + }, + onNothingSelected: () => { + // ...todoSomething + } + } + + // 图表数据初始化 + aboutToAppear() { + + // Step1:必须：初始化图表配置构建类 + this.model = new LineChartModel(); + + // Step2:配置图表指定样式，各部件间没有先后之分 + + // 为图表添加数据选择的监听器 + this.model.setOnChartValueSelectedListener(this.valueSelectedListener); + // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件 + let description: Description | null = this.model.getDescription() + if (description) { + description.setEnabled(false); + } + + // 获取图表图例部件，设置图表图例形状为线形 + let legend: Legend | null = this.model.getLegend(); + if (legend) { + legend.setEnabled(true); + // draw legend entries as lines + legend.setForm(LegendForm.LINE); + } + + // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签 + this.model.setMaxVisibleValueCount(60); + + // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等 + this.limitLine1 = new LimitLine(120, 'Upper Limit'); + this.limitLine1.setLineWidth(4); + //设置虚线样式 + this.limitLine1.enableDashedLine(10, 10, 0); + //设置标签位置 + this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP); + this.limitLine1.setTextSize(10); + + this.limitLine2 = new LimitLine(50, 'Lower Limit'); + this.limitLine2.setLineWidth(4); + this.limitLine2.enableDashedLine(10, 10, 0); + this.limitLine2.setLineColor(Color.Yellow); + this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM); + this.limitLine2.setTextSize(10); + + // 设置图表左Y轴信息 + this.leftAxis = this.model.getAxisLeft(); + if (this.leftAxis) { + //设置绘制标签个数 + this.leftAxis.setLabelCount(8, false); + //设置标签位置 + this.leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART) + //设置距离顶部距离 + this.leftAxis.setSpaceTop(15); + //设置最大值 + this.leftAxis.setAxisMinimum(0); + //设置最小值 + this.leftAxis.setAxisMaximum(200); + } + + // 设置图表右Y轴信息 + this.rightAxis = this.model.getAxisRight(); + if (this.rightAxis) { + this.rightAxis.setLabelCount(8, false); + this.rightAxis.setDrawGridLines(false); + this.rightAxis.setSpaceTop(15); + this.rightAxis.setAxisMinimum(0); + this.rightAxis.setAxisMaximum(200); + this.rightAxis.setEnabled(false); + } + + // 设置X轴信息 + this.xAxis = this.model.getXAxis(); + if (this.xAxis) { + this.xAxis.setPosition(XAxisPosition.BOTTOM); + this.xAxis.setDrawGridLines(false); + this.xAxis.setGranularity(1); + this.xAxis.setLabelCount(7); + } + + // 为图表设置markerView + this.normalMarker = new MarkerView(); + this.model.setMarker(this.normalMarker); + // 也可设置定义图表MarkerView + this.stackMarker = new CustomMarkerView(); + // 生成图表数据 + let lineData: LineData = this.getLineData(); + // 将数据与图表配置类绑定 + this.model.setData(lineData); + // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据 + this.model.setVisibleXRangeMaximum(20); + } + + private getLineData(): LineData { + + let start: number = 1; + let values: JArrayList = new JArrayList(); + for (let i = start; i < 20; i++) { + let val = Number(Math.random() * 141); + + if (Math.random() * 100 < 25) { + values.add(new EntryOhos(i, val)); + } else { + values.add(new EntryOhos(i, val)); + } + } + + this.dataSet = new LineDataSet(values, 'DataSet'); + this.dataSet.setHighLightColor(Color.Black); + this.dataSet.setDrawIcons(false); + + this.dataSet.setMode(Mode.LINEAR); //直线模式 + this.dataSet.setDrawCircles(true); //折线点画圆圈 + this.dataSet.setDrawCircleHole(false); //设置内部孔 + this.dataSet.setColorByColor(Color.Black); //设置折线颜色 + + //渐变色填充 + let gradientFillColor = new JArrayList(); + gradientFillColor.add(["#0C0099CC", 0.2]); + gradientFillColor.add(["#7F0099CC", 0.4]); + gradientFillColor.add(["#0099CC", 1.0]); + this.dataSet.setGradientFillColor(gradientFillColor); + this.dataSet.setDrawFilled(true); + + + // 设置数据点的颜色 + this.dataSet.setCircleColor(Color.Blue); // 可以设置为想要的颜色 + + // 设置数据点的半径 + this.dataSet.setCircleRadius(4); // 设置半径大小 + this.dataSet.setCircleHoleRadius(2); //设置内径 + + let dataSetList: JArrayList = new JArrayList(); + dataSetList.add(this.dataSet); + + let lineData: LineData = new LineData(dataSetList); + return lineData + } + +``` + +2. 添加数据到自定义线形图表组件 + +``` +// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 +// 如果在之后通过事件触发， +// 可通过lineData.notifyDataSetChanged();来触发数据更新， +// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， +// 可通过this.model.invalidate();来触发绘制更新。 +LineChart({ model: this.model }) + .width('100%') + .height('30%') +``` + +### 饼状图 + +1. 饼状图数据初始化： + +``` + import { + ChartGesture, // 图表手势 + ColorTemplate, // 颜色模板 + EntryOhos, // 图表数据结构基础类 + Highlight, // 高亮 + IPieDataSet, // 饼状图数据集接口 + JArrayList, // 工具类：数据集合 + Legend, // 图表Legend(图例)部件 + MPPointF, // MPPointF + OnChartGestureListener, // 图表手势监听器接口 + OnChartValueSelectedListener, // 图表数值选择监听器接口 + PieChart, // 饼状图组件 + PieChartModel, // 饼状图配置构建类 + PieData, // 饼状图数据包 + PieDataSet, // 饼状图数据集合 + PieEntry, // 饼状图数据结构 + } from '@ohos/mpchart'; + + // 图表数据初始化 + + // Step1:必须：初始化图表配置构建类 + private model: PieChartModel = new PieChartModel(); + + aboutToAppear() { + // Step2：配置图表的特定样式，各部件间没有先后之分 + + let l: Legend | null = this.model.getLegend(); + if (l) { + l.setEnabled(true); + } + this.model.animateX(1000); // 启用X轴动画效果，动画持续时间为1000毫秒 + this.model.setUsePercentValues(true); // 使用百分比值 + this.model.getDescription()?.setEnabled(false); // 禁用描述信息 + this.model.setExtraOffsets(5, 10, 5, 5); // 设置额外偏移量 + + this.model.setOnChartGestureListener(this.chartGestureListener); // 设置图表手势监听器 + + this.model.setDragDecelerationFrictionCoef(0.95); // 设置拖动减速摩擦系数 + + this.model.setCenterText("mpchart"); // 设置中心文本 + this.model.setCenterTextSize(22); // 设置中心文本大小 + + this.model.setDrawHoleEnabled(true); // 启用绘制中心孔 + this.model.setHoleColor(Color.White); // 设置中心孔颜色 + + this.model.setTransparentCircleColor(Color.Red); // 设置透明圆环颜色 + this.model.setTransparentCircleAlpha(110); // 设置透明圆环透明度 + + this.model.setHoleRadius(58); // 设置中心孔半径 + this.model.setTransparentCircleRadius(61); // 设置透明圆环半径 + + this.model.setDrawCenterText(true); // 绘制中心文本 + + this.model.setRotationAngle(0); // 设置旋转角度 + // 通过触摸启用图表的旋转 + this.model.setRotationEnabled(true); + this.model.setHighlightPerTapEnabled(true); // 启用点击高亮效果 + + this.setData(4, 10); // 设置图表数据 + } + + // 初始化饼状图数据 + private setData(count: number, range: number): void { + let entries: JArrayList = new JArrayList(); + + // NOTE: The order of the entries when being added to the entries array determines their position around the center of + // the chart. + for (let i = 0; i < count; i++) { + entries.add(new PieEntry(((Math.random() * range) + range / 5), + this.parties[i % this.parties.length], undefined, undefined)); + } + + // 创建饼状图数据集对象，设置数据项和数据集名称 + let dataSet: PieDataSet = new PieDataSet(entries, "Election Results"); + // 设置是否绘制数据项图标 + dataSet.setDrawIcons(false); + // 设置数据项之间的间隙 + dataSet.setSliceSpace(1); + // 设置数据项图标的偏移量 + dataSet.setIconsOffset(new MPPointF(0, 40)); + // 设置选中时数据项的偏移距离 + dataSet.setSelectionShift(5); + // 设置数据项文本颜色 + dataSet.setValueTextColor(Color.White); + + + // add a lot of colors + let colors: JArrayList = new JArrayList(); + for (let index = 0; index < ColorTemplate.VORDIPLOM_COLORS.length; index++) { + colors.add(ColorTemplate.VORDIPLOM_COLORS[index]); + } + + for (let index = 0; index < ColorTemplate.JOYFUL_COLORS.length; index++) { + colors.add(ColorTemplate.JOYFUL_COLORS[index]); + } + + for (let index = 0; index < ColorTemplate.COLORFUL_COLORS.length; index++) { + colors.add(ColorTemplate.COLORFUL_COLORS[index]); + } + for (let index = 0; index < ColorTemplate.LIBERTY_COLORS.length; index++) { + colors.add(ColorTemplate.LIBERTY_COLORS[index]); + } + for (let index = 0; index < ColorTemplate.PASTEL_COLORS.length; index++) { + colors.add(ColorTemplate.PASTEL_COLORS[index]); + } + colors.add(ColorTemplate.getHoloBlue()); + dataSet.setColorsByList(colors); + // 生成图表数据 + let data: PieData = new PieData(dataSet); + // 将数据与图表配置类绑定 + this.model.setData(data); + } + +``` + +2. 添加数据到自定义饼状图图表组件 + +``` +// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 +// 如果在之后通过事件触发， +// 可通过dataSet.notifyDataSetChanged();来触发数据更新， +// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， +// 可通过this.model.invalidate();来触发绘制更新。 +PieChart({ model: this.model }) + .width('100%') + .height('70%') +``` + +### 气泡图 + +1. 气泡图数据初始化： + +``` + // 导入一些图表相关的组件和类 + import { + JArrayList, //工具类：数据集合 + XAxis, // 图表X轴部件 + XAxisPosition, // 图表X轴标签位置枚举类 + YAxis, // 图表Y轴部件 + Description, // 图表的描述信息 + Legend, // 图例 + OnChartValueSelectedListener, // 图表数值选中的监听器 + Highlight, // 高亮显示 + EntryOhos, // 图表数据结构基础类 + YAxisLabelPosition, // 图表Y轴标签位置枚举类 + BubbleEntry, // 气泡图数据结构 + ChartPixelMap, // 图表像素映射 + IBubbleDataSet, // 气泡图数据集的接口 + BubbleDataSet, // 气泡图数据集 + MPPointF, // MPPonitF + BubbleChart, // 气泡图组件 + BubbleChartModel, // 气泡图配置构建类 + BubbleData // 气泡图数据 + } from '@ohos/mpchart'; + + // 构造数据选择监听器 + private valueSelectedListener: OnChartValueSelectedListener = { + onValueSelected: (e: EntryOhos, h: Highlight) => { + // ...todoSomething + }, + onNothingSelected: () => { + // ...todoSomething + } + } + + // 图表数据初始化 + private model: BubbleChartModel | null = null; + + aboutToAppear() { + // Step1:必须：初始化图表配置构建类 + this.model = new BubbleChartModel(); + // Step2：配置图表的特定样式，各部件间没有先后之分 + + //设置图例 + let l: Legend | null = this.model.getLegend(); + if (l) { + l.setEnabled(true); + } + + //设置描述 + let description: Description | null = this.model.getDescription(); + if (description) { + description.setEnabled(false); + } + + // 设置最大可见条目数量为60 + this.model.setMaxVisibleValueCount(60); + + // 禁用x和y轴方向同时缩放，但是可以单独x轴方向或者y轴方向缩放 + this.model.setPinchZoom(false); + + // 获取X轴对象 + let xAxis: XAxis | null = this.model.getXAxis(); + if (xAxis) { + // 设置X轴位置在底部 + xAxis.setPosition(XAxisPosition.BOTTOM); + + // 不绘制X轴网格线 + xAxis.setDrawGridLines(false); + + // 设置X轴坐标的最小间隔为1 + xAxis.setGranularity(1); + + // 设置X轴标签数量为7 + xAxis.setLabelCount(7); + } + + // 获取左侧Y轴对象 + let leftAxis: YAxis | null = this.model.getAxisLeft(); + if (leftAxis) { + // 设置左侧Y轴标签数量为8，不强制使用整数标签 + leftAxis.setLabelCount(8, false); + + // 设置左侧Y轴标签位置在图表外部 + leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART); + + // 设置顶部空白区域为15个单位 + leftAxis.setSpaceTop(15); + + // 设置左侧Y轴的最小值为0 + leftAxis.setAxisMinimum(0); + } + + // 获取右侧Y轴对象 + let rightAxis: YAxis | null = this.model.getAxisRight(); + if (rightAxis) { + // 设置右侧Y轴标签数量为8，不强制使用整数标签 + rightAxis.setLabelCount(8, false); + + // 不绘制右侧Y轴网格线 + rightAxis.setDrawGridLines(false); + + // 设置顶部空白区域为15个单位 + rightAxis.setSpaceTop(15); + + // 设置右侧Y轴的最小值为0 + rightAxis.setAxisMinimum(0); + } + + // 初始化起始值为1 + let start: number = 1; + + // 创建气泡图数据集 + let values: JArrayList = new JArrayList(); + for (let i = start; i < 20; i++) { + // 生成随机值（0到40之间） + let val = Number(Math.random() * 41); + + // 按照一定概率添加气泡数据 + if (Math.random() * 100 < 25) { + values.add(new BubbleEntry(i, val)); + } else { + values.add(new BubbleEntry(i, val)); + } + } + + // 创建气泡图数据集 + let dataSet: BubbleDataSet = new BubbleDataSet(values, 'DataSet'); + dataSet.setHighLightColor(Color.Black); + dataSet.setDrawIcons(false); + + // 创建气泡图数据集列表 + let dataSetList: JArrayList = new JArrayList(); + dataSetList.add(dataSet); + + // 设置图表数据 + this.setData(5, 50); + + // 设置图表最大的X轴显示范围为7个单位 + this.model.setVisibleXRangeMaximum(7); + + } + + // 初始化气泡图数据 + /** + * 设置气泡图表的数据 + * @param count 数据点的数量 + * @param range 数据点的范围 + */ + private setData(count: number, range: number): void { + + // 创建三个气泡图数据集 + let values1 = new JArrayList(); + let values2 = new JArrayList(); + let values3 = new JArrayList(); + + // 创建图标绘制对象 + let imgePaint: ChartPixelMap = new ChartPixelMap(); + + // 设置图标的宽度和高度 + imgePaint.setWidth(32); + imgePaint.setHeight(32); + + // 循环生成数据点 + for (let i = 0; i < count; i++) { + // 向数据集添加带有图标的气泡数据点 + values1.add(new BubbleEntry(i, Math.random() * range, Math.random() * range, imgePaint)); + values2.add(new BubbleEntry(i, Math.random() * range, Math.random() * range, imgePaint)); + + // 向数据集添加不带图标的气泡数据点 + values3.add(new BubbleEntry(i, Math.random() * range, Math.random() * range)); + } + + // 创建气泡数据集1 + let set1: BubbleDataSet = new BubbleDataSet(values1, "DS 1"); + set1.setDrawIcons(false); + set1.setColorByColor(0x88c12552); + set1.setIconsOffset(new MPPointF(0, 0)); + set1.setDrawValues(this.isDrawValuesEnable); + + // 创建气泡数据集2 + let set2: BubbleDataSet = new BubbleDataSet(values2, "DS 2"); + set2.setDrawIcons(false); + set2.setIconsOffset(new MPPointF(0, 0)); + set2.setColorByColor(0x88ff6600); + set2.setDrawValues(this.isDrawValuesEnable); + + // 创建气泡数据集3 + let set3: BubbleDataSet = new BubbleDataSet(values3, "DS 3"); + set3.setDrawIcons(false); + set3.setIconsOffset(new MPPointF(0, 0)); + set3.setColorByColor(0x88f5c700); + set3.setDrawValues(this.isDrawValuesEnable); + + // 创建气泡图数据集列表 + let dataSets = new JArrayList(); + dataSets.add(set1); + dataSets.add(set2); + dataSets.add(set3); + + // 创建气泡图数据对象 + let dataResult: BubbleData = new BubbleData(dataSets); + dataResult.setDrawValues(this.isDrawValuesEnable); + dataResult.setValueTextSize(8); + dataResult.setValueTextColor(Color.White); + dataResult.setHighlightCircleWidth(1.5); + dataResult.setHighlightEnabled(true); + dataResult.notifyDataChanged(); + + // 如果存在图表模型，则设置图表数据 + if (this.model) { + this.model.setData(dataResult); + } + } + +``` + +2. 添加数据到自定义气泡图图表组件 + +``` +// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 +// 如果在之后通过事件触发， +// 可通过dataResult.notifyDataSetChanged();来触发数据更新， +// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， +// 可通过this.model.invalidate();来触发绘制更新。 +BubbleChart({ model: this.model }) + .width('100%') + .height('70%') +``` + +### 蜡烛图 + +1. 蜡烛图数据初始化： + +``` + // 导入一些图表相关的组件和类 + import { + AxisDependency, // 轴依赖类 + CandleData, // 蜡烛图数据包 + CandleDataSet, // 蜡烛图数据集合 + CandleEntry, // 蜡烛图数据结构 + CandleStickChart, // 蜡烛图图表类 + CandleStickChartModel, // 蜡烛图配置构建类 + ChartPixelMap, // 图表像素映射类 + Description, // 图表Description(描述)部件 + JArrayList, // 工具类：数据集合 + Legend, // 图表Legend(图例)部件 + Style, // 图表样式类 + XAxis, // 图表X轴部件 + XAxisPosition, // 图表X轴标签位置枚举类 + YAxis // 图表Y轴部件 + } from '@ohos/mpchart'; + + aboutToAppear() { + // 图表数据初始化 + // Step1:必须：初始化图表配置构建类 + this.model = new CandleStickChartModel(); + + // Step2：配置图表的特定样式，各部件间没有先后之分 + //设置描述 + let description: Description | null = this.model.getDescription(); + if (description) { + description.setEnabled(false); + } + + //设置图例 + let l: Legend | null = this.model.getLegend(); + if (l) { + l.setEnabled(true); + } + + this.model.setMaxVisibleValueCount(60); // 设置图表最大可见数值数量为60 + this.model.setPinchZoom(false); // 禁用捏合缩放 + this.model.setDrawGridBackground(true); // 启用绘制网格背景 + this.model.setGridBackgroundColor(Color.White); // 设置网格背景颜色为白色 + this.setData(40, 100); // 设置图表数据 + + let xAxis: XAxis | null = this.model.getXAxis(); + if (xAxis) { + xAxis.setPosition(XAxisPosition.BOTTOM); // 设置X轴位置在底部 + xAxis.setDrawGridLines(true); // 启用绘制X轴网格线 + } + + let leftAxis: YAxis | null = this.model.getAxisLeft(); + if (leftAxis) { + leftAxis.setLabelCount(7, false); // 设置左侧Y轴标签数量为7，不强制使用整数标签 + leftAxis.setDrawGridLines(true); // 启用绘制左侧Y轴网格线 + leftAxis.setDrawAxisLine(true); // 启用绘制左侧Y轴轴线 + } + + let rightAxis: YAxis | null = this.model.getAxisRight(); + if (rightAxis) { + rightAxis.setLabelCount(7, false); // 设置右侧Y轴标签数量为7，不强制使用整数标签 + rightAxis.setDrawGridLines(true); // 启用绘制右侧Y轴网格线 + rightAxis.setDrawAxisLine(true); // 启用绘制右侧Y轴轴线 + } + + let legend: Legend | null = this.model.getLegend(); + if (legend) { + legend.setEnabled(true); // 启用图例 + } + } + + // 初始化蜡烛图数据 + private setData(count: number, range: number):void{ + + let values: JArrayList = new JArrayList(); + + for (let i = 0; i < count; i++) { + let val: number = (Math.random() * 40) + (range + 3); + + let high: number = Number(Math.random() * 9) + 8.0; + let low: number = Number(Math.random() * 9) + 8.0; + + let open: number = Number(Math.random() * 6) + 1.0; + let close: number = Number(Math.random() * 6) + 1.0; + + let even: boolean = i % 2 == 0; + + values.add(new CandleEntry( + i, + val + high, + val - low, + even ? val + open : val - open, + even ? val - close : val + close, + new ChartPixelMap())); + } + + // 创建蜡烛图数据集，并设置数据集的名称为 "Data Set" + let dataSet: CandleDataSet = new CandleDataSet(values, "Data Set"); + // 设置是否绘制图标为 false + dataSet.setDrawIcons(false); + // 设置数据集的轴依赖为左侧Y轴 + dataSet.setAxisDependency(AxisDependency.LEFT); + // 设置蜡烛图阴影颜色为灰色 + dataSet.setShadowColor(Color.Gray); + // 设置蜡烛图阴影宽度为 0.7 + dataSet.setShadowWidth(0.7); + // 设置蜡烛图下跌蜡烛的绘制样式为填充 + dataSet.setDecreasingPaintStyle(Style.FILL); + // 设置蜡烛图下跌蜡烛的颜色为红色 + dataSet.setDecreasingColor(Color.Red); + // 设置蜡烛图上涨蜡烛的颜色为绿色 + dataSet.setIncreasingColor(Color.Green); + // 设置蜡烛图上涨蜡烛的绘制样式为描边 + dataSet.setIncreasingPaintStyle(Style.STROKE); + // 设置蜡烛图中性蜡烛的颜色为蓝色 + dataSet.setNeutralColor(Color.Blue); + + let data: CandleData = new CandleData([dataSet]); + data.setValueTextSize(7); + if (this.model) { + this.model.resetTracking(); + this.model.setData(data); + } + } + +``` + +### 组合图 + +1. 组合图数据初始化： + +``` + // 导入一些图表相关的组件和类 + import { + ColorTemplate, // 颜色模板 + CombinedChart, // 组合图表类 + CombinedChartModel, // 组合图表配置构建类 + CombinedData, // 组合图表数据包 + EntryOhos, // 图表数据结构基础类 + JArrayList, // 工具类：数据集合 + LineData, // 折线图数据包 + LineDataSet, // 折线图数据集合 + Color, // 颜色类 + Mode, // 图表模式枚举类 + AxisDependency, // 轴依赖类 + BarEntry, // 柱状图数据结构 + BarData, // 柱状图数据包 + BarDataSet, // 柱状图数据集合 + IBarDataSet, // 柱状图数据集合的操作类 + ScatterData, // 散点图数据包 + ScatterDataSet, // 散点图数据集合 + CandleData, // 蜡烛图数据包 + CandleEntry, // 蜡烛图数据结构 + CandleDataSet, // 蜡烛图数据集合 + BubbleData, // 气泡图数据包 + BubbleEntry, // 气泡图数据结构 + BubbleDataSet, // 气泡图数据集合 + YAxisLabelPosition, // 图表Y轴标签位置枚举类 + XAxisPosition, // 图表X轴标签位置枚举类 + XAxis, // 图表X轴部件 + YAxis, // 图表Y轴部件 + LegendHorizontalAlignment, // 图例水平对齐方式枚举类 + LegendVerticalAlignment // 图例垂直对齐方式枚举类 + } from '@ohos/mpchart'; + + // Step1:必须：初始化图表配置构建类 + private model: CombinedChartModel = new CombinedChartModel(); + + aboutToAppear() { + // Step2：配置图表的特定样式，各部件间没有先后之分 + + // 禁用图表描述 + this.model.getDescription()?.setEnabled(false); + + // 获取图例对象 + let l = this.model.getLegend(); + if (l) { + // 启用图例 + l.setEnabled(true); + + // 启用图例文字自动换行 + l.setWordWrapEnabled(true); + + // 设置图例水平对齐方式为左侧 + l.setHorizontalAlignment(LegendHorizontalAlignment.LEFT); + + // 设置图例垂直对齐方式为底部 + l.setVerticalAlignment(LegendVerticalAlignment.BOTTOM); + + // 设置图例不绘制在图表内部 + l.setDrawInside(false); + } + + // 设置图表最大可见数值数量为60 + this.model.setMaxVisibleValueCount(60); + + // 禁用图表的捏合缩放功能 + this.model.setPinchZoom(false); + + // 禁用图表绘制网格背景 + this.model.setDrawGridBackground(false); + + // 获取X轴对象 + let xAxis: XAxis | null = this.model.getXAxis(); + if (xAxis) { + // 设置X轴位置在底部 + xAxis.setPosition(XAxisPosition.BOTTOM); + + // 不绘制X轴网格线 + xAxis.setDrawGridLines(false); + + // 设置X轴坐标的最小间隔为1 + xAxis.setGranularity(1); + + // 设置X轴标签数量为7 + xAxis.setLabelCount(7); + } + + // 获取左侧Y轴对象 + let leftAxis: YAxis | null = this.model.getAxisLeft(); + if (leftAxis) { + // 设置左侧Y轴标签数量为8，不强制使用整数标签 + leftAxis.setLabelCount(8, false); + + // 设置左侧Y轴标签位置在图表外部 + leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART); + + // 设置顶部空白区域为15个单位 + leftAxis.setSpaceTop(15); + + // 设置左侧Y轴的最小值为0 + leftAxis.setAxisMinimum(0); + } + + // 获取右侧Y轴对象 + let rightAxis: YAxis | null = this.model.getAxisRight(); + if (rightAxis) { + // 设置右侧Y轴标签数量为8，不强制使用整数标签 + rightAxis.setLabelCount(8, false); + + // 不绘制右侧Y轴网格线 + rightAxis.setDrawGridLines(false); + + // 设置顶部空白区域为15个单位 + rightAxis.setSpaceTop(15); + + // 设置右侧Y轴的最小值为0 + rightAxis.setAxisMinimum(0); + } + + // 创建组合图表数据对象 + let data: CombinedData = new CombinedData(); + + // 生成线形图数据 + this.generateLineData(data); + + // 生成柱状图数据 + this.generateBarData(data); + + // 生成气泡图数据 + this.generateBubbleData(data); + + // 生成散点图数据 + this.generateScatterData(data); + + // 生成蜡烛图数据 + this.generateCandleData(data); + + // 设置图表数据 + this.model.setData(data); + } + + // 生成线形图数据 + private generateLineData(data: CombinedData): void { + + let d: LineData = new LineData(); + + let entries: JArrayList = new JArrayList(); + + for (let index = 0; index < this.count; index++) { + + entries.add(new EntryOhos(index + 0.5, this.getRandom(15, 5))); + } + + let set: LineDataSet = new LineDataSet(entries, "Line DataSet"); + set.setColorByColor(Color.rgb(240, 238, 70)); + set.setLineWidth(2.5); + set.setCircleColor(Color.rgb(240, 238, 70)); + set.setCircleRadius(5); + set.setFillColor(Color.rgb(240, 238, 70)); + set.setMode(Mode.CUBIC_BEZIER); + set.setDrawValues(true); + set.setValueTextSize(10); + set.setValueTextColor(Color.rgb(240, 238, 70)); + + set.setAxisDependency(AxisDependency.LEFT); + d.addDataSet(set); + data.setLineData(d); + + } + + // 生成柱状图数据 + private generateBarData(data: CombinedData): void { + + let entries1: JArrayList = new JArrayList(); + let entries2: JArrayList = new JArrayList(); + + for (let index = 0; index < this.count; index++) { + entries1.add(new BarEntry(0, this.getRandom(25, 25))); + + // stacked + entries2.add(new BarEntry(0, [this.getRandom(13, 12), this.getRandom(13, 12)])); + } + + let set1: BarDataSet = new BarDataSet(entries1, "Bar 1"); + set1.setColorByColor(Color.rgb(60, 220, 78)); + set1.setValueTextColor(Color.rgb(60, 220, 78)); + set1.setValueTextSize(10); + set1.setAxisDependency(AxisDependency.LEFT); + + let set2: BarDataSet = new BarDataSet(entries2, ""); + set2.setStackLabels(["Stack 1", "Stack 2"]); + set2.setColorsByArr([Color.rgb(61, 165, 255), Color.rgb(23, 197, 255)]); + set2.setValueTextColor(Color.rgb(61, 165, 255)); + set2.setValueTextSize(10); + set2.setAxisDependency(AxisDependency.LEFT); + + let groupSpace = 0.06; + let barSpace = 0.02; // x2 dataset + let barWidth = 0.45; // x2 dataset + // (0.45 + 0.02) * 2 + 0.06 = 1.00 -> interval per "group" + + let set: JArrayList = new JArrayList(); + set.add(set1); + set.add(set2); + let d: BarData = new BarData(set); + d.setBarWidth(barWidth); + + // make this BarData object grouped + d.groupBars(0, groupSpace, barSpace); // start at x = 0 + data.setBarData(d); + + } + + // 生成散点图数据 + private generateScatterData(data: CombinedData): void { + + let d: ScatterData = new ScatterData(); + + let entries: JArrayList = new JArrayList(); + + for (let index = 0; index < this.count; index += 0.5) + entries.add(new EntryOhos(index + 0.25, this.getRandom(10, 55))); + + let set: ScatterDataSet = new ScatterDataSet(entries, "Scatter DataSet"); + set.setColorsByArr(ColorTemplate.MATERIAL_COLORS); + set.setScatterShapeSize(7.5); + set.setDrawValues(false); + set.setValueTextSize(10); + d.addDataSet(set); + data.setScatterData(d); + } + + // 生成蜡烛图数据 + private generateCandleData(data: CombinedData): void { + + let d: CandleData = new CandleData(); + + let entries: JArrayList = new JArrayList(); + + for (let index = 0; index < this.count; index += 2) { + + entries.add(new CandleEntry(index + 1, 90, 70, 85, 75)); + } + + let set: CandleDataSet = new CandleDataSet(entries, "Candle DataSet"); + set.setDecreasingColor(Color.rgb(142, 150, 175)); + set.setShadowColor(ColorTemplate.DKGRAY); + set.setBarSpace(0.3); + set.setValueTextSize(10); + set.setDrawValues(false); + d.addDataSet(set); + data.setCandleData(d); + } + + //生成气泡图数据 + private generateBubbleData(data: CombinedData): void { + + let bd: BubbleData = new BubbleData(); + + let entries: JArrayList = new JArrayList(); + + for (let index = 0; index < this.count; index++) { + let y = this.getRandom(10, 105); + let size = this.getRandom(20, 30); + entries.add(new BubbleEntry(index + 0.5, y, size)); + } + + let set: BubbleDataSet = new BubbleDataSet(entries, "Bubble DataSet"); + set.setColorsByArr(ColorTemplate.VORDIPLOM_COLORS); + set.setValueTextSize(10); + set.setValueTextColor(Color.rgb(255, 255, 255)); + set.setHighlightCircleWidth(1.5); + set.setDrawValues(true); + bd.addDataSet(set); + data.setBubbleData(bd); + } + //生成随机数据 + getRandom(range: number, start: number): number { + return (Math.random() * range) + start; + } + +``` + +2. 添加数据到自定义组合图图表组件 + +``` +// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 +// 如果在之后通过事件触发， +// 可通过data.notifyDataSetChanged();来触发数据更新， +// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， +// 可通过this.model.invalidate();来触发绘制更新。 +CombinedChart({ model: this.model }) + .width('100%') + .height('70%') +``` + +### 雷达图 + +1. 雷达图数据初始化： + +``` + // 导入一些图表相关的组件和类 + import { + ChartColor, // 图表颜色类 + JArrayList, // 工具类：数据集合 + XAxis, // 图表X轴部件 + XAxisPosition, // 图表X轴标签位置枚举类 + Description, // 图表Description(描述)部件 + Legend, // 图表Legend(图例)部件 + OnChartValueSelectedListener, // 数据选择监听 + Highlight, // 图表高亮数据 + EntryOhos, // 图表数据结构基础类 + RadarEntry, // 雷达图数据结构 + RadarChart, // 雷达图图表类 + RadarDataSet, // 雷达图数据集合 + RadarChartModel, // 雷达图配置构建类 + IRadarDataSet, // 雷达图数据集合的操作类 + RadarData, // 雷达图数据包 + YAxis, // 图表Y轴部件 + IAxisValueFormatter, // 轴数值格式化接口 + AxisBase, // 轴基础类 + LegendVerticalAlignment, // 图例垂直对齐方式枚举类 + LegendHorizontalAlignment, // 图例水平对齐方式枚举类 + LegendOrientation, // 图例方向枚举类 + } from '@ohos/mpchart'; + + // Step1:必须：初始化图表配置构建类 + private model: RadarChartModel = new RadarChartModel(); + + aboutToAppear() { + // Step2：配置图表的特定样式，各部件间没有先后之分 + // 设置雷达图数值选择监听器 + this.model.setOnChartValueSelectedListener(this.valueSelectedListener); + + // 获取图表描述对象 + let description: Description | null = this.model.getDescription(); + if (description) { + // 禁用图表描述 + description.setEnabled(false); + } + + // 获取图例对象 + let l: Legend | null = this.model.getLegend(); + if (l) { + // 启用图例 + l.setEnabled(true); + + // 设置图例垂直对齐方式为顶部 + l.setVerticalAlignment(LegendVerticalAlignment.TOP); + + // 设置图例水平对齐方式为居中 + l.setHorizontalAlignment(LegendHorizontalAlignment.CENTER); + + // 设置图例方向为水平 + l.setOrientation(LegendOrientation.HORIZONTAL); + + // 设置图例不绘制在图表内部 + l.setDrawInside(false); + + // 设置图例X轴方向间隔 + l.setXEntrySpace(7); + + // 设置图例Y轴方向间隔 + l.setYEntrySpace(5); + + // 设置图例文字颜色为白色 + l.setTextColor(Color.White); + } + + // 设置雷达图网格线宽度、颜色和透明度 + this.model.setWebLineWidth(0.3); + this.model.setWebColor(0xFFCCCCCC); + this.model.setWebLineWidthInner(0.3); + this.model.setWebColorInner(0xFFCCCCCC); + this.model.setWebAlpha(100); + + // 设置雷达图顶部的额外偏移量 + this.model.setExtraTopOffset(-100); + + // 创建雷达图标记视图对象 + this.normalMarker = new RadarMarkerView(); + + // 设置雷达图标记 + this.model.setMarker(this.normalMarker); + + // 获取X轴对象 + let xAxis: XAxis | null = this.model.getXAxis(); + if (xAxis) { + // 设置X轴位置在底部 + xAxis.setPosition(XAxisPosition.BOTTOM); + + // 不绘制X轴网格线 + xAxis.setDrawGridLines(false); + + // 设置X轴标签文字大小 + xAxis.setTextSize(20); + + // 设置X轴Y轴方向的偏移量 + xAxis.setYOffset(0); + xAxis.setXOffset(0); + + // 设置X轴坐标的最小间隔为1 + xAxis.setGranularity(1); + + // 设置X轴标签数量为7 + xAxis.setLabelCount(7); + + // 设置X轴数值格式化器 + xAxis.setValueFormatter(new valueFormatter()); + + // 设置X轴标签文字颜色为白色 + xAxis.setTextColor(Color.White); + } + + // 获取Y轴对象 + let yAxis: YAxis | null = this.model.getYAxis(); + if (yAxis) { + // 设置Y轴标签数量为5，不强制使用整数标签 + yAxis.setLabelCount(5, false); + + // 设置Y轴标签文字大小 + yAxis.setTextSize(20); + + // 设置Y轴的最小值为0 + yAxis.setAxisMinimum(0); + + // 设置Y轴的最大值为80 + yAxis.setAxisMaximum(80); + + // 不绘制Y轴标签 + yAxis.setDrawLabels(false); + } + + // 设置雷达图数据 + this.setData(); + } + + /** + * 设置雷达图的数据 + */ + private setData(): void { + let mul = 80; // 随机值的放大倍数 + let min = 20; // 随机值的最小基准 + let cnt = 5; // 数据点数量 + + // 创建雷达图数据点集合 + let entries1: JArrayList = new JArrayList(); + let entries2: JArrayList = new JArrayList(); + + // 注意: 将数据点添加到数据点数组中的顺序决定它们在图表中心周围的位置。 + for (let i = 0; i < cnt; i++) { + let val1 = (Math.random() * mul) + min; + entries1.add(new RadarEntry(val1)); + + let val2 = (Math.random() * mul) + min; + entries2.add(new RadarEntry(val2)); + } + + // 创建雷达图数据集 + let set1: RadarDataSet = new RadarDataSet(entries1, "Last Week"); + set1.setColorByColor(ChartColor.rgb(103, 110, 129)); + set1.setFillColor(ChartColor.rgb(103, 110, 129)); + set1.setDrawFilled(true); + set1.setFillAlpha(180); + set1.setLineWidth(2); + set1.setDrawHighlightCircleEnabled(true); + set1.setDrawHighlightIndicators(false); + + // 创建雷达图数据集 + let set2: RadarDataSet = new RadarDataSet(entries2, "This Week"); + set2.setColorByColor(ChartColor.rgb(121, 162, 175)); + set2.setFillColor(ChartColor.rgb(121, 162, 175)); + set2.setDrawFilled(true); + set2.setFillAlpha(180); + set2.setLineWidth(2); + set2.setDrawHighlightCircleEnabled(true); + set2.setDrawHighlightIndicators(false); + + // 创建雷达图数据集合 + let sets: JArrayList = new JArrayList(); + sets.add(set1); + sets.add(set2); + + // 创建雷达图数据对象 + let data: RadarData = new RadarData(sets); + data.setValueTextSize(20); + + // 不绘制数据值 + data.setDrawValues(false); + + // 设置数据值文字颜色为白色 + data.setValueTextColor(Color.White); + + // 设置图表数据 + this.model.setData(data); + } + + +``` + +2. 添加数据到雷达图图表组件 + +``` +// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 +// 如果在之后通过事件触发， +// 可通过data.notifyDataSetChanged();来触发数据更新， +// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， +// 可通过this.model.invalidate();来触发绘制更新。 +RadarChart({ model: this.model }) + .width('100%') + .height('70%') +``` + +### 散点图 + +1. 散点图数据初始化： + +``` + // 导入一些图表相关的组件和类 + import { + JArrayList, // 工具类：数据集合 + XAxis, // 图表X轴部件 + XAxisPosition, // 图表X轴标签位置枚举类 + YAxis, // 图表Y轴部件 + Description, // 图表Description(描述)部件 + Legend, // 图表Legend(图例)部件 + OnChartValueSelectedListener, // 数据选择监听 + Highlight, // 图表高亮数据 + EntryOhos, // 图表数据结构基础类 + YAxisLabelPosition, // 图表Y轴标签位置枚举类 + ScatterChart, // 散点图图表类 + ScatterChartModel, // 散点图配置构建类 + ScatterData, // 散点图数据包 + ScatterDataSet, // 散点图数据集合 + IScatterDataSet, // 散点图数据集合的操作类 + ColorTemplate, // 颜色模板 + ChartShape, // 图表形状枚举类 + } from '@ohos/mpchart'; + + + aboutToAppear() { + // Step1:必须：初始化图表配置构建类 + this.model = new ScatterChartModel(); + + // Step2：配置图表的特定样式，各部件间没有先后之分 + // 获取图例对象 + let l: Legend | null = this.model.getLegend(); + if (l) { + // 启用图例 + l.setEnabled(true); + } + + // 设置散点图数值选择监听器 + this.model.setOnChartValueSelectedListener(this.valueSelectedListener); + + // 获取描述对象 + let description: Description | null = this.model.getDescription(); + if (description) { + // 禁用图表描述 + description.setEnabled(false); + } + + // 设置图表最大可见数值数量、是否支持缩放、是否绘制网格背景 + this.model.setMaxVisibleValueCount(160); + this.model.setPinchZoom(false); + this.model.setDrawGridBackground(false); + + // 获取X轴对象 + let xAxis: XAxis | null = this.model.getXAxis(); + if (xAxis) { + // 设置X轴位置在底部 + xAxis.setPosition(XAxisPosition.BOTTOM); + + // 不绘制X轴网格线 + xAxis.setDrawGridLines(false); + + // 设置X轴坐标的最小间隔为1 + xAxis.setGranularity(1); + + // 设置X轴标签数量为7 + xAxis.setLabelCount(7); + } + + // 获取左侧Y轴对象 + let leftAxis: YAxis | null = this.model.getAxisLeft(); + if (leftAxis) { + // 设置左侧Y轴标签数量为8，不强制使用整数标签 + leftAxis.setLabelCount(8, false); + + // 设置左侧Y轴标签位置在图表外部 + leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART); + + // 设置左侧Y轴顶部空白区域大小 + leftAxis.setSpaceTop(15); + + // 设置左侧Y轴的最小值为0 + leftAxis.setAxisMinimum(0); + } + + // 获取右侧Y轴对象 + let rightAxis: YAxis | null = this.model.getAxisRight(); + if (rightAxis) { + // 设置右侧Y轴标签数量为8，不绘制右侧Y轴网格线 + rightAxis.setLabelCount(8, false); + rightAxis.setDrawGridLines(false); + + // 设置右侧Y轴顶部空白区域大小 + rightAxis.setSpaceTop(15); + + // 设置右侧Y轴的最小值为0 + rightAxis.setAxisMinimum(0); + } + + // 生成随机数据 + let start: number = 1; + let values: JArrayList = new JArrayList(); + for (let i = start; i < 20; i++) { + let val = Number(Math.random() * 41); + + if (Math.random() * 100 < 25) { + values.add(new EntryOhos(i, val)); + } else { + values.add(new EntryOhos(i, val)); + } + } + + // 创建散点图数据集 + let dataSet: ScatterDataSet = new ScatterDataSet(values, 'DataSet'); + dataSet.setHighLightColor(Color.Black); + dataSet.setDrawIcons(false); + + // 创建散点图数据集合 + let dataSetList: JArrayList = new JArrayList(); + dataSetList.add(dataSet); + + // 设置图表数据 + this.setData(20, 100); + } + + /** + * 设置散点图数据 + * @param xRange - X轴数据范围 + * @param yRange - Y轴数据范围 + */ + private setData(xRange: number, yRange: number): void { + + // 生成随机数据集合 + let values1 = this.generateRandomData(xRange, yRange); + let values2 = this.generateRandomData(xRange, yRange); + let values3 = this.generateRandomData(xRange, yRange); + + // 创建散点图数据集1 + let set1 = new ScatterDataSet(values1, "DS 1"); + set1.setScatterShape(ChartShape.SQUARE); + set1.setColorByColor(ColorTemplate.COLORFUL_COLORS[0]); + + // 创建散点图数据集2 + let set2 = new ScatterDataSet(values2, "DS 2"); + set2.setScatterShape(ChartShape.CIRCLE); + set2.setScatterShapeHoleColor(ColorTemplate.COLORFUL_COLORS[3]); + set2.setScatterShapeHoleRadius(3); + set2.setColorByColor(ColorTemplate.COLORFUL_COLORS[1]); + + // 创建散点图数据集3 + let set3 = new ScatterDataSet(values3, "DS 3"); + set3.setShapeRenderer(new CustomScatterShapeRenderer()); + set3.setColorByColor(ColorTemplate.COLORFUL_COLORS[2]); + + // 设置散点图数据集形状大小 + set1.setScatterShapeSize(8); + set2.setScatterShapeSize(8); + set3.setScatterShapeSize(8); + + // 创建散点图数据集合 + let dataSets: JArrayList = new JArrayList(); + dataSets.add(set1); // 添加数据集 + dataSets.add(set2); + dataSets.add(set3); + + // 创建散点图数据 + let dataResult: ScatterData = new ScatterData(dataSets); + dataResult.setDrawValues(this.isDrawValuesEnable); + dataResult.setValueTextSize(8); + dataResult.setHighlightEnabled(true); + + // 设置数据项文本大小 + dataResult.setValueTextSize(10); + + // 设置图表数据 + if (this.model) { + this.model.setData(dataResult); + } + } + + /** + * 生成随机散点图数据 + * @param xRange - X轴数据范围 + * @param yRange - Y轴数据范围 + * @returns 随机散点图数据集合 + */ + private generateRandomData(xRange: number, yRange: number): JArrayList { + let values = new JArrayList(); + + // 循环生成随机数据 + for (let i = 0; i < xRange; i++) { + let x = i; // 在指定范围内生成随机X值 + let y = Math.random() * yRange; // 在指定范围内生成随机Y值 + values.add(new EntryOhos(x, y)); + } + return values; + } + +``` + +2. 添加数据到散点图图表组件 + +``` +// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 +// 如果在之后通过事件触发， +// 可通过dataResult.notifyDataSetChanged();来触发数据更新， +// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， +// 可通过this.model.invalidate();来触发绘制更新。 +ScatterChart({ model: this.model }) + .width('100%') + .height('70%') +``` +### 瀑布图 + +1. 瀑布图数据初始化： + +``` + import { + WaterfallChart, // 瀑布图图表类 + WaterfallChartModel, // 瀑布图配置构建类 + BarData, // 瀑布图数据包 + WaterfallDataSet, // 瀑布图数据集合 + WaterfallEntry, // 瀑布图数据结构 + ChartGesture, // 手势事件模式 + Description, // 图表Description(描述)部件 + EntryOhos, // 图表数据结构基础类 + Fill, // 图表填充类型构建类 + Highlight, // 图表高亮数据 + IBarDataSet, // 瀑布图数据集合的操作类 + JArrayList, // 工具类：数据集合 + Legend, // 图表Legend(图例)部件 + LimitLabelPosition, // 图表的LimitLine标签位置枚举类 + LimitLine, // 图表LimitLine + MarkerView, // 图表的Marker(标志气泡)部件 + OnChartGestureListener, // 手势事件监听 + OnChartValueSelectedListener, // 数据选择监听 + XAxis, // 图表X轴部件 + XAxisPosition, // 图表X轴标签位置枚举类 + YAxis, // 图表Y轴部件 + YAxisLabelPosition // 图表Y轴标签位置枚举类 +} from '@ohos/mpchart'; + + // 构造数据选择监听器 + private valueSelectedListener: OnChartValueSelectedListener = { + onValueSelected: (e: EntryOhos, h: Highlight) => { + LogUtil.log("SimpleWaterfallChartPage onValueSelected: " + e.getX()); + }, + onNothingSelected: () => { + LogUtil.log("SimpleWaterfallChartPage onNothingSelected"); + } + } + + // 构造手势识别事件监听器 + private chartGestureListener: OnChartGestureListener = { + onChartGestureStart: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => { + }, + onChartGestureEnd: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, lastPerformedGestureMode: ChartGesture) => { + // ...todoSomething + }, + onChartLongPressed: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => { + // ...todoSomething + }, + onChartDoubleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => { + // ...todoSomething + }, + onChartSingleTapped: (isTouchEvent: boolean, me: TouchEvent | GestureEvent) => { + // ...todoSomething + }, + onChartFling: (isTouchEvent: boolean, me1: TouchEvent | GestureEvent, me2: TouchEvent, velocityX: number, velocityY: number) => { + // ...todoSomething + }, + onChartScale: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, scaleX: number, scaleY: number) => { + // ...todoSomething + }, + onChartTranslate: (isTouchEvent: boolean, me: TouchEvent | GestureEvent, dX: number, dY: number) => { + // ...todoSomething + } + } + + // 图表数据初始化 + aboutToAppear() { + + // Step1:必须：初始化图表配置构建类 + this.model = new WaterfallChartModel(); + + // Step2:配置图表指定样式，各部件间没有先后之分 + + // 为图表添加数据选择的监听器 + this.model.setOnChartValueSelectedListener(this.valueSelectedListener); + // 为图表添加手势识别监听器 + this.model.setOnChartGestureListener(this.chartGestureListener); + // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件 + let description: Description | null = this.model.getDescription() + if (description) { + description.setEnabled(false); + } + // 获取图表图例部件，设置图表图例部件不可用 + let l: Legend | null = this.model.getLegend(); + if (l) { + l.setEnabled(false); + } + // 设置图表数据最大的绘制数，如果超过该数值，则不进行绘制图表的数值标签 + this.model.setMaxVisibleValueCount(40); + // 是否绘制图表的背景色，绘制范围为图表瀑布图的绘制范围，不包含轴线之外的部分 + this.model.setDrawGridBackground(false); + // 设置图表的背景色，颜色的规格需要满足CanvasRenderingContext2D.fillstyle/strokestyle规格 + this.model.setGridBackgroundColor('#500000ff') + // 设置不绘制瀑布图的柱体阴影背景 + this.model.setDrawBarShadow(false); + // 设置瀑布图的数值在柱体上方 + this.model.setDrawValueAboveBar(false); + // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等 + this.limitLine1 = new LimitLine(120, 'Upper Limit'); + this.limitLine1.setLineWidth(4); + this.limitLine1.enableDashedLine(10, 10, 0); + this.limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP); + this.limitLine1.setTextSize(10); + + this.limitLine2 = new LimitLine(50, 'Lower Limit'); + this.limitLine2.setLineWidth(4); + this.limitLine2.enableDashedLine(10, 10, 0); + this.limitLine2.setLineColor(Color.Yellow); + this.limitLine2.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM); + this.limitLine2.setTextSize(10); + + // 设置图表左Y轴信息 + this.leftAxis = this.model.getAxisLeft(); + if (this.leftAxis) { + this.leftAxis.setAxisMinimum(0); // this replaces setStartAtZero(true) + this.leftAxis.setDrawLimitLinesBehindData(false); + + // 添加LimitLines + this.leftAxis.addLimitLine(this.limitLine1); + this.leftAxis.addLimitLine(this.limitLine2); + } + // 设置图表右Y轴信息 + this.rightAxis = this.model.getAxisRight(); + if (this.rightAxis) { + this.rightAxis.setEnabled(false); + this.rightAxis.setAxisMinimum(0); + } + // 设置X轴信息 + this.xAxis = this.model.getXAxis(); + if (this.xAxis) { + this.xAxis.setPosition(XAxisPosition.BOTTOM); + } + // 为图表设置markerView + this.normalMarker = new MarkerView(); + this.model.setMarker(this.normalMarker); + // 也可设置定义图表MarkerView + this.stackMarker = new CustomMarkerView(); + // 生成单一颜色数据 + this.data = this.getNormalData(); + + // 按Y轴刻度范围绘制多种颜色数据 + this.data = this.getSegmentationData(); + + // 高亮最高点最低点数据 + this.data = this.getTopAndBottomHighlightData(); + + // 将数据与图表配置类绑定 + this.model.setData(this.data); + // 设置图表最大的X轴显示范围，如不设置，则默认显示全部数据 + this.model.setVisibleXRangeMaximum(20); + } + + private getNormalData(): BarData { + let values: JArrayList = new JArrayList(); + // 设置标记点位置及颜色 + let h1 = new WaterfallHighlight(20, 30, Color.Gray); + let h2 = new WaterfallHighlight(30, 40, Color.Gray); + let h3 = new WaterfallHighlight(40, 60, Color.Green); + let h4 = new WaterfallHighlight(60, 70, Color.Red); + + values.add(new WaterfallEntry(1, 10, 30, undefined, undefined, h1)); + values.add(new WaterfallEntry(2, 15, 50)); + values.add(new WaterfallEntry(4, 5, 95, undefined, undefined, h2, h3, h4)); + values.add(new WaterfallEntry(6, 45, 80, undefined, undefined, h2, h3)); + + this.dataSet = new WaterfallDataSet(values, 'DataSet'); + this.dataSet.setHighLightColor(Color.Gray); + this.dataSet.setDrawIcons(false); + // 为柱体添加颜色信息 + this.dataSet.setColorByColor(Color.Pink); + this.dataSet.setValueTextSize(10) + + let dataSetList: JArrayList = new JArrayList(); + dataSetList.add(this.dataSet); + + let barData: BarData = new BarData(dataSetList); + //设置瀑布图宽度 + barData.setBarWidth(0.3); + //设置顶部圆角半径 + barData.setTopRadius(1); + return barData; + } + + private getSegmentationData(): BarData { + let values: JArrayList = new JArrayList(); + + values.add(new WaterfallEntry(1, 10, 70)); + values.add(new WaterfallEntry(2, 15, 80)); + + this.dataSet = new WaterfallDataSet(values, 'DataSet'); + this.dataSet.setHighLightColor(Color.Gray); + this.dataSet.setDrawIcons(false); + this.dataSet.setColorByColor(Color.Pink); + this.dataSet.setValueTextSize(10) + + // 根据Y刻度范围设置颜色 + let highlightList: WaterfallHighlight[] = []; + highlightList.push(new WaterfallHighlight(0, 40, Color.Green)); + highlightList.push(new WaterfallHighlight(40, 60, Color.Orange)); + highlightList.push(new WaterfallHighlight(60, 100, Color.Pink)); + this.dataSet.setYAxisSegmentationColors(highlightList); + + let dataSetList: JArrayList = new JArrayList(); + dataSetList.add(this.dataSet); + + let barData: BarData = new BarData(dataSetList); + barData.setBarWidth(0.3); + return barData; + } + + private getTopAndBottomHighlightData(): BarData { + let values: JArrayList = new JArrayList(); + let highlightList: WaterfallHighlight[] = []; + // Y刻度范围颜色设置 + highlightList.push(new WaterfallHighlight(0, 40, Color.Green)); + highlightList.push(new WaterfallHighlight(40, 60, Color.Orange)); + highlightList.push(new WaterfallHighlight(60, 100, Color.Pink)); + + // 瀑布图数据封装 + values.add(new WaterfallEntry(1, 10, 90)); + values.add(new WaterfallEntry(2, 15, 80)); + values.add(new WaterfallEntry(3, 20, 90)); + + this.dataSet = new WaterfallDataSet(values, 'DataSet'); + // 设置瀑布图选中时颜色 + this.dataSet.setHighLightColor(Color.Gray); + this.dataSet.setDrawIcons(false); + // 设置瀑布图颜色 + this.dataSet.setColorByColor(Color.Pink); + // Y刻度范围颜色设置 + this.dataSet.setYAxisSegmentationColors(highlightList); + // 最高点最低点是否高亮 + this.dataSet.setEnableMaxOrMinHighlightColor(true); + // 最高点高亮时颜色设置 + this.dataSet.setMaxyHighlightColor(Color.Brown); + // 最低点高亮时颜色设置 + this.dataSet.setMinyHighlightColor(Color.Yellow); + + let dataSetList: JArrayList = new JArrayList(); + dataSetList.add(this.dataSet); + + let barData: BarData = new BarData(dataSetList); + barData.setBarWidth(0.3); + return barData; + } +``` +2. 添加数据到瀑布图表组件 + +``` +// 为组件设置配置构建类，如果需要在页面初始化就显示图表，则需要在aboutToAppear方法中完成图表数据构建 +// 如果在之后通过事件触发， +// 可通过dataResult.notifyDataSetChanged();来触发数据更新， +// 可通过this.model.notifyDataSetChanged();来触发坐标轴数据更新， +// 可通过this.model.invalidate();来触发绘制更新。 +WaterfallChart({ model: this.model }) + .width('100%') + .height('70%') +``` + +### 添加自定义图标(以柱状图为例) + +``` + let charPixelMap: ChartPixelMap = new ChartPixelMap(); + let fileData = resourceMgr.getMediaContentSync($r('app.media.star').id) + const buffer:ArrayBuffer =fileData.buffer.slice(0,fileData.buffer.byteLength); + const imageSource = image.createImageSource(buffer) + let pixelMap=await imageSource.createPixelMap() + //设置自定义图标资源 PixelMap + charPixelMap.setIcon(pixelMap) + //设置自定义图标资源 resId + //charPixelMap.setIcon($r('app.media.star').id) + //设置自定义图标宽度 + charPixelMap.setWidth(20) + //设置自定义图标高度 + charPixelMap.setHeight(20); + + let values: JArrayList = new JArrayList(); + for (let i = startAxis; i < endAxis; i++) { + values.add(new BarEntry(i, Math.random() * range,charPixelMap)) + } + + let dataSet: BarDataSet = new BarDataSet(values, 'DataSet'); + dataSet.setHighLightColor(Color.Black); + //设置显示自定义图标 + dataSet.setDrawIcons(true); + //设置自定义图标偏移量 + dataSet.setIconsOffset(new MPPointF(0, 40)); + dataSet.setColorsByVariable(ColorTemplate.VORDIPLOM_COLORS); + dataSet.setDrawValues(false) +``` + + +### 自定义图表 + +1. 定制数据结构 + + 图表数据分为三层 ，分别对应基类：EntryOhos, DataSet,ChartData + + - CustomEntry: 定制图表基础数据实体 + + 继承自EntryOhos,类，对外提供数据实体类的属性的get,set方法。 + + - CustomDataSet: 定制图表实体的集合类 + + 继承自DataSet, 描述一组实体信息，每个entry通用的属性可在此类中配置及处理，如获取数据集合中的X轴/Y轴最大最小值，设置图表高亮颜色等。 + + - CustomData: 定制图表数据容器 + + 继承自ChartData,处理通用的实体集合(Dataset)的信息，如计算获取最终显示时的X轴/Y轴最大最小值，或者如柱状图的柱体宽度等。 + +2. 定制图表配置构建类 + + 继承自ChartModel基础类，根据需要可以继承子类BarLineChartBaseModel，PieRadarChartBaseModel，同时需要实现各自图表的 DataProvoder接口，主要用于获取图表数据容器CustomData，DataProvider 继承自ChartInterface。 + + 图表配置构建类，需要重写以下重要方法： + + - setContext2D 必须 + + 由于图表绘制依赖于Canvas组件，所以需要在绘制的流程中获取到绑定到Canvas组件上的操作上下文CanvasRenderingContext2D，通过此方法将Canvas的操作上下文与图表绘制流程进行绑定，用于后续图表绘制操作。 + + ``` + public setContext2D(context2d: CanvasRenderingContext2D) { + this.context2d = context2d; + } + ``` + + - onChartSizeChanged 必须 + + 如果想要在页面初始化时就显示图表，需要在aboutToAppear()方法中进行图表数据构建及配置，例如此种情况下，图表绘制流程获取到的组件宽高数据就是不正确的。 + + 所以需要Canvas组件完成布局之后通过监听组件Size变化回调onAreaChange()通知绘制流程根据组件当前正确的Size进行计算缩放比例，坐标校正等。 + + ``` + public onChartSizeChanged(newWidth: number, newHeight: number, oldWidth: number, oldHeight: number) { + super.onSizeChanged(newWidth, newHeight, oldWidth, oldHeight); + } + ``` + + - invalidate 必须 + + 用于手动触发图表重新绘制，如图表数据，轴边界，显示设置更新等操作之后，需要手动触发重新绘制，刷新最新显示效果。 + + ``` + public invalidate(): void { + if (this.context2d) { + super.onDraw(this.context2d); + } + } + ``` + + - init 必须 + + 此方法用于初始化图表的各个部件及其渲染类 + + 定制部件如：XAxis，YAxis，Description，Legend等， + + 定制坐标转换类如：Transformer + + 定制渲染类如：XAxisRenderer,YAxisRenderer,DataRenderer等。 + + ``` + public init(): void { + super.init(); + + this.mRenderer = new BarChartRenderer(this, this.mAnimator!, this.mViewPortHandler); + + this.setHighlighter(new BarHighlighter(this)); + + let xAxis : XAxis | null = this.getXAxis(); + if (xAxis) { + xAxis.setSpaceMin(0.5); + xAxis.setSpaceMax(0.5); + } + } + ``` + + - onDraw 必须 + + 用于规定图表绘制流程，一般BarLineChartBaseModel，PieRadarChartBaseModel基本符合绘制要求，也可根据业务进行定制，每次图表刷新本质上就是调用此方法进行重新绘制。 + + 注意 + + 不要在onDraw方法做耗时操作; + + 不要在onDraw方法中新建对象; + +3. 定制图表部件 + + 图表各部件(Description，Legend，LimitLine，XAxis，YAxis)都继承自基类ComponentBase，提供图表部件的基础属性，xOffset，yOffset，enabled，textSize，textColor等，同时各部件可以根据特性进行添加定制属性，如X轴/Y轴通过calculate()计算出预期的坐标轴最大最小值（与Dataset里面的最大最小值可能会有差异，X轴/Y轴的最大最小值可以设置预留空间）。 + + ``` + /** + * 计算要显示的坐标轴最大最小值 + * @param dataMin: 实际的数据最小值 + * @param dataMax: 实际的数据最大值 + */ + public calculate(dataMin: number, dataMax: number): void { + + // if custom, use value as is, else use data value + let min: number = this.mCustomAxisMin ? this.mAxisMinimum : (dataMin - this.mSpaceMin); + let max: number = this.mCustomAxisMax ? this.mAxisMaximum : (dataMax + this.mSpaceMax); + + // temporary range (before calculations) + let range: number = Math.abs(max - min); + + // in case all values are equal + if (range == 0) { + max = max + 1; + min = min - 1; + } + + this.mAxisMinimum = min; + this.mAxisMaximum = max; + + // actual range + this.mAxisRange = Math.abs(max - min); + } + ``` + +4. 定制渲染类 + + CustomXAxisRenderer/CustomYAxisRenderer ：坐标轴渲染器 + + - computeAxis + + 根据配置信息判断是否需要再次校正要显示的X轴/Y轴的最大最小值 + + ``` + /** + * X轴渲染器计算要显示的X轴最小值和最大值 + * @param min : XAxis的calculate中计算获取的预期显示的X轴刻度最小值 + * @param max : XAxis的calculate中计算获取的预期显示的X轴刻度最大值 + * @param inverted: 是否反转坐标轴 + */ + public computeAxis(min: number, max: number, inverted: boolean) { + + // calculate the starting and entry point of the y-labels (depending on + // zoom / contentrect bounds) + if (!this.mViewPortHandler || !this.mTrans) { + return; + } + + // 如果修改过X轴比例，则根据当前组件宽度，和scalex重新计算新的X轴最大最小值 + if (this.mViewPortHandler.contentWidth() > 10 && !this.mViewPortHandler.isFullyZoomedOutX()) { + + let p1: MPPointD | undefined = this.mTrans?.getValuesByTouchPoint(this.mViewPortHandler.contentLeft(), this.mViewPortHandler.contentTop()); + let p2: MPPointD | undefined = this.mTrans?.getValuesByTouchPoint(this.mViewPortHandler.contentRight(), this.mViewPortHandler.contentTop()); + + if (!!p1 && !!p2) { + if (inverted) { + + min = p2.x; + max = p1.x; + } else { + + min = p1.x; + max = p2.x; + } + + MPPointD.recycleInstance(p1); + MPPointD.recycleInstance(p2); + } + } + + this.computeAxisValues(min, max); + } + ``` + + - computeAxisValues + + 根据确定好的X轴/Y轴的最大最小值，再进行计算在最大最小值之间应该显示多少个刻度标签，对应的值都应该是多少。 + + - renderAxisLabels + + 用于绘制坐标轴的刻度标签。 + + - renderGridLines + + 用于绘制坐标轴的网格线。 + + - renderAxisLine + + 用于绘制坐标轴的轴线。 + + - renderLimitLines + + 用于绘制坐标轴数据的限制线。 + + CustomDataRender：数据渲染器 + + - initBuffers + + 用于处理图表的缓存数据，此方法会分配内存，请谨慎使用，非必要不要使用此方法。 + + - drawData + + 用于绘制图表，将数据转换为图形。 + + - drawValues + + 用于绘制图表数据数值显示。 + + - drawExtras + + 额外绘制图表内容。 + + - drawHighlighted + + 绘制图表高亮显示样式。 + +5. 定制图表组件 + + 图表绘制基于Canvas组件实现，所以自定义的图表布局需要包含Canvas画布，在Canvas的onReady中开启绘制，通过onAreaChange回调方法校正图表Size。 + + ``` + import CustomModel from '../xx/CustomModel'; + + @Component + export struct CustomChart { + model: CustomModel | null = null; + private setting: RenderingContextSettings = new RenderingContextSettings(true); + private context2D: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting); + + build() { + Column() { + Canvas(this.context2D) + .onReady(() => { + if (this.model) { + + // 画布上下文绑定到图表绘制流程 + this.model.setContext2D(this.context2D); + + // 开始绘制图表 + this.model.onDraw(this.context2D); + } + }) + .onAreaChange((oldArea: Area, newArea: Area) => { + if (this.model && ((newArea.width !== oldArea.width) || (newArea.height !== oldArea.height))) { + + // 校正图表Size + this.model.onChartSizeChanged(Number(newArea.width), Number(newArea.height), Number(oldArea.width), Number(oldArea.height)); + } + }) + // 绑定手势识别事件 + .priorityGesture(GestureGroup(GestureMode.Parallel, + TapGesture({ count: 1 }) + .onAction((event?: GestureEvent) => { + if (event && this.model) { + this.model.onSingleTapUp(false, event); + } + }), + PanGesture() + .onActionStart((event?: GestureEvent) => { + if (this.model && event) { + this.model.onPan(false, 'Down', event); + } + }) + .onActionUpdate((event?: GestureEvent) => { + if (this.model && event) { + this.model.onPan(false, 'Move', event); + } + }) + .onActionEnd((event?: GestureEvent) => { + if (this.model && event) { + this.model.onPan(false, 'Up', event); + } + }) + )) + } + } + } + ``` + +6. 图表显示 + + 初始化数据，设置UI显示。 + + ``` + aboutToAppear() { + this.model = new CustomModel(); + // ... 配置各部件样式 + // ... 初始化数据 + } + + build() { + Column() { + CustomChart({ model: this.model }) + .width('100%') + .height('100%') + } + } + ``` + +## 接口说明 +**一、ChartModel** + +所有图表配置构建类的基类。 + +| 方法名 | 描述 | +| -------------------------- | ------------------------------------------------------------ | +| animateX | 展示图表时带有X轴动画。 | +| animateXY | 展示图表时同时带有X轴，Y轴动画。 | +| animateY | 展示图表时带有Y轴动画。 | +| calcMinMax | 计算 y-min 和 y-max 值以及 y-delta 和 x-delta 值。 | +| calculateOffsets | 计算图表到边框的偏移量，具体取决于图例的位置，x轴y轴的长度，及其的标签位置。 | +| clear | 清空图表的所有数据，将其置空null，并刷新图表。 | +| clearValues | 从图表中删除所有数据集（以及条目），并刷新图表。 | +| getAnimator | 返回负责对图表值进行动画处理的动画制作者。 | +| getCenter | 返回图表(整个视图)的中心点的可回收的MPPointF实例。 | +| getCenterOffsets | 返回图表的图形绘制的中心区域的可回收的MPPointF实例。 | +| getCenterOfView | 返回图表(整个视图)的中心点的可回收的MPPointF实例。 | +| getContentRect | 返回图表绘制的内容区域的矩形。 | +| getData | 返回已为图表设置的 ChartData 对象。 | +| getDefaultValueFormatter | 返回默认的数据格式化接口实现类。 | +| getHighlightByTouchPoint | 返回 LineChart，ScatterChart，CandleStickChart等图表触摸屏幕时的Highlight 对象（包含 x-index 和 DataSet 索引）。 | +| getHighlighted | 返回当前高亮显示值的数组。这可能是空值，如果没有突出显示，则为空数组。 | +| getHighlighter | 返回当前高亮显示条目接口。 | +| getLegend | 获取图例对象，通过该对象的setEnable(false)方法可以关闭图例显示。 | +| getLegendRenderer | 获取图例渲染器。 | +| getRenderer | 获取图表数据渲染器。 | +| getXAxis | 获取X轴对象。 | +| invalidate | 重绘图表。 | +| notifyDataSetChanged | 图表数据刷新。 | +| onChartSizeChanged | 更新图表正确Size。 | +| onDraw | 图表绘制方法。 | +| setContext2D | 设置图表绘制的画布。 | +| setData | 设置图表数据。 | +| setDragDecelerationEnabled | 设置是否开启惯性滑动。 | +| setHitTestMode | 设置触摸测试类型。 | +| getHitTestMode | 获取触摸测试类型。 | + +**1.animateX** + +public animateX(durationMillis: number): void; + +展示图表时带有X轴动画。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| -------------- | ------ | ---- | -------------------------- | +| durationMillis | number | 是 | 动画播放的时长，单位毫秒。 | + +public animateX(durationMillis: number, easing: string): void; + +展示图表时带有X轴动画。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| -------------- | ------ | ---- | ------------------------------------------------------------ | +| durationMillis | number | 是 | 动画播放的时长，单位毫秒。 | +| easing | string | 是 | [动画插值曲线](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/js-apis-animator.md)。 | + +**2.animateXY** + +public animateXY(durationMillisX: number, durationMillisY: number): void; + +展示图表时同时带有X轴，Y轴动画。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| --------------- | ------ | ---- | --------------------------------- | +| durationMillisX | number | 是 | X轴条目动画播放的时长，单位毫秒。 | +| durationMillisY | number | 是 | Y轴条目动画播放的时长，单位毫秒。 | + +public animateXY(durationMillisX: number, durationMillisY: number, easingX: string): void; + +展示图表时同时带有X轴，Y轴动画。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| --------------- | ------ | ---- | ------------------------------------------------------------ | +| durationMillisX | number | 是 | X轴条目动画播放的时长，单位毫秒。 | +| durationMillisY | number | 是 | Y轴条目动画播放的时长，单位毫秒。 | +| easingX | string | 是 | X轴[动画插值曲线](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/js-apis-animator.md)。 | + +public animateXY(durationMillisX: number, durationMillisY: number, easingX: string, easingY: string): void; + +展示图表时同时带有X轴，Y轴动画。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| --------------- | ------ | ---- | ------------------------------------------------------------ | +| durationMillisX | number | 是 | X轴条目动画播放的时长，单位毫秒。 | +| durationMillisY | number | 是 | Y轴条目动画播放的时长，单位毫秒。 | +| easingX | string | 是 | X轴[动画插值曲线](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/js-apis-animator.md)。 | +| easingY | string | 是 | Y轴[动画插值曲线](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/js-apis-animator.md)。 | + +**3.animateY** + +展示图表时带有Y轴动画。 + +public animateY(durationMillis: number): void; + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| -------------- | ------ | ---- | -------------------------- | +| durationMillis | number | 是 | 动画播放的时长，单位毫秒。 | + +public animateY(durationMillis: number, easing: string): void; + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| -------------- | ------ | ---- | ------------------------------------------------------------ | +| durationMillis | number | 是 | 动画播放的时长，单位毫秒。 | +| easing | string | 是 | [动画插值曲线](https://docs.openharmony.cn/pages/v5.0/zh-cn/application-dev/reference/apis-arkui/js-apis-animator.md)。 | + +**4.calcMinMax** + +protected abstract calcMinMax() : void; + +计算 y-min 和 y-max 值以及 y-delta 和 x-delta 值。 + +**5.calculateOffsets** + +protected abstract calculateOffsets() : void; + +计算图表到边框的偏移量，具体取决于图例的位置，x轴y轴的长度，及其的标签位置。 + +**6.clear** + +public clear() : void; + +清空图表的所有数据，将其置空null，并刷新图表。 + +**7.clearValues** + +public clearValues() : void; + +从图表中删除所有数据集（以及条目），并刷新图表。 + +**8.getAnimator** + +public getAnimator(): ChartAnimator | null; + +返回负责对图表值进行动画处理的动画制作者。 + +返回值： + +| 类型 | 说明 | +| ------------------------- | ------------ | +| ChartAnimator | null | 动画管理类。 | + +**9.getCenter** + +public getCenter(): MPPointF; + +返回图表(整个视图)的中心点的可回收的MPPointF实例。 + +返回值： + +| 类型 | 说明 | +| -------- | ---------------------- | +| MPPointF | 可回收的MPPointF实例。 | + +**10.getCenterOffsets** + +public getCenterOffsets(): MPPointF | null; + +返回图表的图形绘制的中心区域的可回收的MPPointF实例。 + +返回值： + +| 类型 | 说明 | +| -------------------- | ---------------------- | +| MPPointF | null | 可回收的MPPointF实例。 | + +**11.getCenterOfView** + +public getCenterOfView(): MPPointF; + +返回图表(整个视图)的中心点的可回收的MPPointF实例。 + +返回值： + +| 类型 | 说明 | +| -------- | ---------------------- | +| MPPointF | 可回收的MPPointF实例。 | + +**12.getContentRect** + +public getContentRect(): Rect; + +返回图表绘制的内容区域的矩形。 + +返回值： + +| 类型 | 说明 | +| ---- | -------------------------- | +| Rect | 图表绘制的内容区域的矩形。 | + +**13.getData** + +public getData(): T | null ; + +返回已为图表设置的 ChartData 对象。 + +返回值： + +| 类型 | 说明 | +| ------------ | ---------- | +| T| null | 数据对象。 | + +**14.getDefaultValueFormatter** + +public getDefaultValueFormatter(): IValueFormatter; + +返回默认的数据格式化接口实现类。 + +返回值： + +| 类型 | 说明 | +| --------------- | ---------------------- | +| IValueFormatter | 数据格式化接口实现类。 | + +**15.getHighlightByTouchPoint** + +public getHighlightByTouchPoint(x: number, y: number): Highlight | null; + +返回 LineChart，ScatterChart，CandleStickChart等图表触摸屏幕时的Highlight 对象（包含 x-index 和 DataSet 索引）。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | --------------------- | +| x | number | 是 | 屏幕触摸点的x轴坐标。 | +| y | number | 是 | 屏幕触摸点的y轴坐标。 | + +返回值： + +| 类型 | 说明 | +| --------------------- | ------------------ | +| Highlight | null | 触摸点的高亮对象。 | + +**16.getHighlighted** + +public getHighlighted(): Highlight[] | null; + +返回当前高亮显示值的数组。这可能是空值，如果没有突出显示，则为空数组。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | --------------------- | +| x | number | 是 | 屏幕触摸点的x轴坐标。 | +| y | number | 是 | 屏幕触摸点的y轴坐标。 | + +返回值： + +| 类型 | 说明 | +| --------------------- | ------------------ | +| Highlight | null | 触摸点的高亮对象。 | + +**17.getHighlighter** + +public getHighlighter(): IHighlighter | null; + +返回当前高亮显示条目接口。 + +返回值： + +| 类型 | 说明 | +| ------------------------ | ---------------------------- | +| IHighlighter | null | 获取触摸点的高亮对象接口类。 | + +**18.getLegend** + +public getLegend(): Legend | null ; + +获取图例对象。 + +返回值： + +| 类型 | 说明 | +| ------------------ | -------------- | +| Legend | null | 获取图例对象。 | + +**19.getLegendRenderer** + +public getLegendRenderer(): LegendRenderer | null; + +获取图例渲染器。 + +返回值： + +| 类型 | 说明 | +| ------------------------- | ---------------- | +| LegendRenderer| null | 获取图例渲染器。 | + +**20.getRenderer** + +public getRenderer(): DataRenderer | null; + +获取图表数据渲染器。 + +返回值： + +| 类型 | 说明 | +| ------------------------ | -------------------- | +| DataRenderer | null | 获取图表数据渲染器。 | + +**21.getXAxis** + +public getXAxis(): XAxis | null; + +获取X轴对象。 + +返回值： + +| 类型 | 说明 | +| ----------------- | ------------- | +| XAxis | null | 获取X轴对象。 | + + +**22.invalidate** + +public abstract invalidate(); + +重绘图表。 + +**23.notifyDataSetChanged** + +public abstract notifyDataSetChanged(); + +图表数据刷新。 + +**24.onChartSizeChanged** + +public abstract onChartSizeChanged(newWidth: number, newHeight: number, oldWidth: number, oldHeight: number): void; + +更新图表正确Size。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| --------- | ------ | ---- | ------------------------ | +| newWidth | number | 是 | 图表当前显示的宽。 | +| newHeight | number | 是 | 图表当前显示的高。 | +| oldWidth | number | 是 | 图表改变Size前显示的宽。 | +| oldHeight | number | 是 | 图表改变Size前显示的高。 | + +**25.onDraw** + +protected onDraw(c: CanvasRenderingContext2D): void ; + +图表绘制方法。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------------------ | ---- |----------| +| c | CanvasRenderingContext2D | 是 | 图表绘制的画布。 | + +**26.setContext2D** + +public abstract setContext2D(context2d: CanvasRenderingContext2D); + +设置图表绘制的画布。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------------------ | ---- |----------| +| c | CanvasRenderingContext2D | 是 | 图表绘制的画布。 | + +**27.setData** + +public setData(data: T) : void; + +设置图表数据。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ---- | ---- | ---------------------------- | +| data | T | 是 | 图表数据，T继承自ChartData。 | + +**28.setDragDecelerationEnabled** + +public setDragDecelerationEnabled(enabled: boolean); + +设置是否开启惯性滑动 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ---- | ---- |--------------------| +| enabled | boolean | 是 | 能力标识。 | + +**29.setHitTestMode** + +public setHitTestMode(hitTestMode: HitTestMode) + +设置触摸测试类型 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ---- | ---- |--------------------| +| hitTestMode | HitTestMode | 是 | 触摸测试类型 | + +**30.getHitTestMode** + +public getHitTestMode(): HitTestMode + +获取触摸测试类型。 + +返回值： + +| 类型 | 说明 | +|-------| ----------- | +| HitTestMode | 触摸测试类型 | + +**二、BarLineChartBaseModel** + +柱状图基础类 + +| 方法名 | 描述 | +| ------------------------- | -------------------------------------------------- | +| calcMinMax | 计算坐标的最大最小值。 | +| calculateOffsets | 计算图表offset。 | +| drawGridBackground | 绘制图表背景。 | +| getAxis | 根据Y轴位置获取Y轴对象。 | +| getAxisLeft | 获取左Y轴对象。 | +| getAxisRight | 获取右Y轴对象。 | +| getMinOffset | 获取最小Offset值。 | +| getRendererLeftYAxis | 获取左Y轴渲染器。 | +| getRendererRightYAxis | 获取右Y轴渲染器。 | +| getRendererXAxis | 获取X轴渲染器。 | +| setLongPressCursorEnabled | 设置长按游标能力标识。 | +| getLongPressCursorEnabled | 获取长按游标能力标识。 | +| setLongPressDuration | 设置长按响应时长。 | +| getLongPressDuration | 获取长按响应时长。 | +| setSwipeEnabled | 设置手势滑动响应能力（结合长按游标能力使用）。 | +| getSwipeEnabled | 获取手势滑动响应能力标识（结合长按游标能力使用）。 | + +**1.calcMinMax** + +protected calcMinMax(): void; + +计算坐标的最大最小值。 + +**2.calculateOffsets** + +public calculateOffsets(): void; + +计算图表offset。 + +**3.drawGridBackground** + +protected drawGridBackground(c: CanvasRenderingContext2D): void; + +绘制图表背景。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------------------ | ---- | ------------------ | +| c | CanvasRenderingContext2D | 是 | 图表绘制的上下文。 | + +**4.getAxis** + +public getAxis(axis: AxisDependency): YAxis | null; + +根据Y轴位置获取Y轴对象。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | -------------- | ---- | --------- | +| axis | AxisDependency | 是 | Y轴位置。 | + +返回值： + +| 类型 | 说明 | +| ----------------- | ------------- | +| YAxis | null | 获取Y轴对象。 | + +**5.getAxisLeft** + +public getAxisLeft(): YAxis | null; + +获取左Y轴对象。 + +返回值： + +| 类型 | 说明 | +| ----------------- | ------------- | +| YAxis | null | 获取Y轴对象。 | + +**6.getAxisRight** + +public getAxisRight(): YAxis | null; + +获取右Y轴对象。 + +返回值： + +| 类型 | 说明 | +| ----------------- | ------------- | +| YAxis | null | 获取Y轴对象。 | + +**7.getMinOffset** + +public getMinOffset(): number; + +获取最小Offset值。 + +返回值： + +| 类型 | 说明 | +| ------ | ------------------ | +| number | 获取最小Offset值。 | + +**8.getRendererLeftYAxis** + +public getRendererLeftYAxis(): YAxisRenderer | null; + +获取左Y轴渲染器。 + +返回值： + +| 类型 | 说明 | +| ------------------------- | ----------------- | +| YAxisRenderer | null | 获取左Y轴渲染器。 | + +**9.getRendererRightYAxis** + +public getRendererRightYAxis(): YAxisRenderer | null; + +获取右Y轴渲染器。 + +返回值： + +| 类型 | 说明 | +| ------------------------- | ----------------- | +| YAxisRenderer | null | 获取右Y轴渲染器。 | + +**10.getRendererXAxis** + +public getRendererXAxis(): XAxisRenderer | null; + +获取X轴渲染器。 + +返回值： + +| 类型 | 说明 | +| ------------------------- | --------------- | +| XAxisRenderer | null | 获取X轴渲染器。 | + +**11.setLongPressCursorEnabled** + +public setLongPressCursorEnabled(enabled: boolean): void; + +设置长按游标能力标识。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ |---------| ---- |-------| +| enabled | boolean | 是 | 能力标识。 | + +返回值：无 + +**12.getLongPressCursorEnabled** + +public getLongPressCursorEnabled(): boolean; + +获取长按游标能力标识。 + +参数：无 + +返回值： + +| 类型 | 说明 | +|---------|-----------| +| boolean | 长按游标能力标识。 | + +**13.setLongPressDuration** + +public setLongPressDuration(duration: number): void; + +设置长按响应时长。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ |---------| ---- |-----| +| duration | number | 是 | 时长。 | + +返回值：无 + +**14.getLongPressDuration** + +public getLongPressDuration(): number; + +获取长按响应时长。 + +参数：无 + +返回值： + +| 类型 | 说明 | +|---------|-------| +| number | 响应时长。 | + +**15.setSwipeEnabled** + +public setSwipeEnabled(enabled: boolean): void; + +设置手势滑动响应能力（结合长按游标能力使用）。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ |---------| ---- |-------| +| enabled | boolean | 是 | 能力标识。 | + +返回值：无 + +**16.getSwipeEnabled** + +public getSwipeEnabled(): boolean; + +获取手势滑动响应能力标识（结合长按游标能力使用）。 + +参数：无 + +返回值： + +| 类型 | 说明 | +|---------|-----------| +| boolean | 手势滑动响应能力标识。 | + +**三、ComponentBase** + +图表部件基础类。 + +| 方法名 | 描述 | +| ------------ | ------------------------------------ | +| setTextColor | 设置部件文本渲染颜色。 | +| getTextColor | 获取部件文本渲染颜色。 | +| setTextSize | 设置部件文本Size，需要转化为vp单位。 | +| getTextSize | 获取部件文本Size。 | +| setXOffset | 设置X轴距离图表内容区域的Offset。 | +| getXOffset | 获取X轴距离图表内容区域的Offset。 | +| setYOffset | 设置Y轴距离图表内容区域的Offset。 | +| getYOffset | 获取Y轴距离图表内容区域的Offset。 | + +**1.setTextColor** + +public setTextColor(color: string | number | CanvasGradient | CanvasPattern): void; + +设置部件文本渲染颜色。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ----------------------------------------------------------- | ---- | ---------------------- | +| color | string |number|CanvasGradient |CanvasPattern | 是 | 设置部件文本渲染颜色。 | + +**2.getTextColor** + +public getTextColor(): string | number | CanvasGradient | CanvasPattern; + +获取部件文本渲染颜色。 + +返回值： + +| 类型 | 说明 | +| ----------------------------------------------------------- | ---------------------- | +| string |number|CanvasGradient |CanvasPattern | 获取部件文本渲染颜色。 | + +**3.setTextSize** + +public setTextSize(size: number): void; + +设置部件文本Size，单位是vp。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | ------------------ | +| size | number | 是 | 设置部件文本Size。 | + +**4.getTextSize** + +public getTextSize(): number; + +获取部件文本Size。 + +返回值： + +| 类型 | 说明 | +| ------ | ------------------ | +| number | 获取部件文本Size。 | + +**5.setXOffset** + +public setXOffset(xOffset: number): void; + +设置X轴距离图表内容区域的Offset。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------ | ---- | --------------------------------- | +| xOffset | number | 是 | 设置X轴距离图表内容区域的Offset。 | + +**6.getXOffset** + +public getXOffset(): number; + +获取X轴距离图表内容区域的Offset。 + +返回值： + +| 类型 | 说明 | +| ------ | --------------------------------- | +| number | 获取X轴距离图表内容区域的Offset。 | + +**7.setYOffset** + +public setYOffset(yOffset: number): void; + +设置Y轴距离图表内容区域的Offset。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------ | ---- | --------------------------------- | +| yOffset | number | 是 | 设置Y轴距离图表内容区域的Offset。 | + +**8.getYOffset** + +public getYOffset(): number; + +获取Y轴距离图表内容区域的Offset。 + +返回值： + +| 类型 | 说明 | +| ------ | --------------------------------- | +| number | 获取Y轴距离图表内容区域的Offset。 | + +**四、AxisBase** + +坐标轴基类。 + +| 方法名 | 描述 | +| --------------------------- | -------------------------------------------------- | +| addLimitLine | 为坐标轴添加限制线对象。 | +| calculate | 计算预期坐标轴的最大最小值，用于自定义坐标轴使用。 | +| setAxisMaximum | 设置自定义的轴的最大值。 | +| setAxisMinimum | 设置自定义的轴的最小值。 | +| setDrawAxisLine | 设置是否绘制轴线。 | +| setDrawGridLines | 设置是否绘制网格线。 | +| setDrawGridLinesBehindData | 设置是否在数据后绘制网格线。 | +| setDrawLimitLinesBehindData | 设置是否在数据后绘制限制线。 | +| setValueFormatter | 设置数据的格式转换器。 | + +**1.addLimitLine** + +public addLimitLine(limitLine: LimitLine): void; + +为坐标轴添加限制线对象。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| --------- | --------- | ---- | ------------------------ | +| limitLine | LimitLine | 是 | 为坐标轴添加限制线对象。 | + +**2.calculate** + +public calculate(dataMin: number, dataMax: number): void; + +计算预期坐标轴的最大最小值，用于自定义坐标轴使用。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------ | ---- | -------------------- | +| dataMin | number | 是 | 数据集合中的最小值。 | +| dataMax | number | 是 | 数据集合中的最大值。 | + +**3.setAxisMaximum** + +public setAxisMaximum(max: number): void; + +设置自定义的轴的最大值。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | ------------------ | +| max | number | 是 | 自定义的轴最大值。 | + +**4.setAxisMinimum** + +public setAxisMinimum(min: number): void; + +设置自定义的轴的最小值。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | -------------------- | +| min | number | 是 | 自定义的轴的最小值。 | + +**5.setDrawAxisLine** + +public setDrawAxisLine(enabled: boolean): void; + +设置是否绘制轴线。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------- | ---- | ------------------ | +| enabled | boolean | 是 | 设置是否绘制轴线。 | + +**6.setDrawGridLines** + +public setDrawGridLines(enabled: boolean): void; + +设置是否绘制网格线。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------- | ---- | -------------------- | +| enabled | boolean | 是 | 设置是否绘制网格线。 | + +**7.setDrawGridLinesBehindData** + +public setDrawGridLinesBehindData(enabled: boolean): void; + +设置是否在数据后绘制网格线。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------- | ---- | ---------------------------- | +| enabled | boolean | 是 | 设置是否在数据后绘制网格线。 | + +**8.setDrawLimitLinesBehindData** + +public setDrawLimitLinesBehindData(enabled: boolean): void ; + +设置是否在数据后绘制限制线。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------- | ---- | ---------------------------- | +| enabled | boolean | 是 | 设置是否在数据后绘制限制线。 | + +**9.setValueFormatter** + +public setValueFormatter(formatter: IAxisValueFormatter): void ; + +设置数据的格式转换器。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| --------- | ------------------- | ---- | ---------------------- | +| formatter | IAxisValueFormatter | 是 | 设置数据的格式转换器。 | + +**五、XAxis** + +X轴对象。 + +| 方法名 | 描述 | +| --------------------- | ------------------------------ | +| setPosition | 设置X轴显示位置。 | +| getPosition | 获取X轴显示位置。 | +| setLabelRotationAngle | 设置X轴标签旋转角度。 | +| getLabelRotationAngle | 获取X轴标签旋转角度。 | +| setLabelXOffset | 获取X轴标签偏移量。 | +| getLabelXOffset | 获取标签在 X 轴上的偏移量。 | +| setXAxisLabelPosition | 设置X轴标签位置。 | +| getXAxisLabelPosition | 获取X轴标签位置。 | +| setCustomLabels | 设置x轴自定义Labels。 | +| getCustomLabels | 获取自定义Labels。 | +| setDrawCustomLabels | 设置是否使用自定义Labels。 | +| isDrawCustomLabels | 检查是否正在使用自定义Labels。 | + +**1.setPosition** + +public setPosition(pos: XAxisPosition): void; + +设置X轴显示位置。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------- | ---- | ----------------- | +| pos | XAxisPosition | 是 | 设置X轴显示位置。 | + +**2.getPosition** + +public getPosition(): XAxisPosition; + +获取X轴显示位置。 + +返回值： + +| 类型 | 说明 | +| ------------- | ----------------- | +| XAxisPosition | 获取X轴显示位置。 | + +**3.setLabelRotationAngle** + +public setLabelRotationAngle(angle: number): void; + +设置X轴标签旋转角度。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | --------------------- | +| angle | number | 是 | 设置X轴标签旋转角度。 | + +**4.getLabelRotationAngle** + +public getLabelRotationAngle(): number; + +获取X轴标签旋转角度。 + +返回值： + +| 类型 | 说明 | +| ------ | --------------------- | +| number | 获取X轴标签旋转角度。 | + +**5.setLabelXOffset** + +public setLabelXOffset(xOffset: number): void + +获取X轴标签偏移量 + +返回值：无 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- |------------| +| xOffset | number | 是 | 设置X轴标签偏移量。 | + +**6.getLabelXOffset** + +public getLabelXOffset(): number + +获取标签在 X 轴上的偏移量 + +返回值： + +| 类型 | 说明 | +| ------ | --------------------- | +| number | 获取标签在 X 轴上的偏移量。 | + +参数：无 + +**7.setXAxisLabelPosition** + +public setXAxisLabelPosition(position: XAxisLabelPosition): void + +设置X轴标签位置 + +返回值：无 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- |------------| +| position | XAxisLabelPosition | 是 | 设置X轴标签位置 | + +**8.getXAxisLabelPosition** + +public getXAxisLabelPosition(): XAxisLabelPosition + +获取X轴标签位置 + +返回值： + +| 类型 | 说明 | +| ------ | --------------------- | +| XAxisLabelPosition | X轴标签位置 | + +参数：无 + + +**9.setCustomLabels** + +public setCustomLabels(numbers: number[]): void + +设置x轴自定义Labels + +返回值：无 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- |------------| +| numbers | number[] | 是 | 设置x轴自定义Labels | + +**10.getCustomLabels** + +public getCustomLabels(): number[] + +获取自定义Labels + +返回值： + +| 类型 | 说明 | +| ------ | --------------------- | +| number[] | 自定义Labels | + +参数：无 + +**11.setDrawCustomLabels** + +public setDrawCustomLabels(flag: boolean): void + +设置是否使用自定义Labels + +返回值：无 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ |---------| ---- |------------| +| flag | boolean | 是 | 设置是否使用自定义Labels | + +**12.isDrawCustomLabels** + +public isDrawCustomLabels(): boolean + +检查是否正在使用自定义Labels + +返回值： + +| 类型 | 说明 | +| ------ | --------------------- | +| boolean | 是否正在使用自定义Labels | + +参数：无 + + +**六、YAxis** + +Y轴对象。 + +| 方法名 | 描述 | +| --------------------- | ------------------------------------------------------------ | +| calculate | 计算轴上的预期的最大最小值。 | +| getAxisDependency | 获取Y轴位置。 | +| setPosition | 设置Y轴标签的位置。 | +| getLabelPosition | 获取Y轴标签的位置。 | +| setLabelXOffset | 设置Y轴标签的X轴方向上的Offset。 | +| getLabelXOffset | 获取Y轴标签的X轴方向上的Offset。 | +| setDrawZeroLine | 设置是否绘制0线。 | +| EventControl | 事件控制类，EventType 为枚举类型(单击、双击、长按) | +| setEventEnable | 启用事件。 | +| setEventDisable | 禁用事件。 | +| eventIsEnable | 事件是否启用。 | +| eventIsDisable | 事件是否被禁用。 | +| setYAxisExtensionLine | 设置y轴延伸线。 | +| addGridLine | 添加自定义网格线。 | +| getGridLines | 获取自定义网格线。 | +| setGridAlpha | 设置网格线颜色不透明度（不包含addGridLine添加的自定义网格线，自定义网格线可通过color属性传入带透明度的颜色） | + +**1.calculate** + +public calculate(dataMin: number, dataMax: number): void; + +计算轴上的预期的最大最小值。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------ | ---- | --------------------- | +| dataMin | number | 是 | 数据集合中的Y最小值。 | +| dataMax | number | 是 | 数据集合中的Y最大值 | + +**2.getAxisDependency** + +public getAxisDependency(): AxisDependency; + +获取Y轴位置。 + +返回值： + +| 类型 | 说明 | +| ------ | ------------- | +| number | 获取Y轴位置。 | + +**3.setPosition** + +public setPosition(pos: YAxisLabelPosition): void; + +设置Y轴标签的位置。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------------ | ---- | ------------------- | +| pos | YAxisLabelPosition | 是 | 设置Y轴标签的位置。 | + +**4.getLabelPosition** + +public getLabelPosition(): YAxisLabelPosition; + +获取Y轴标签的位置。 + +返回值： + +| 类型 | 说明 | +| ------------------ | ----------------- | +| YAxisLabelPosition | 获取Y轴标签位置。 | + +**5.setLabelXOffset** + +public setLabelXOffset(xOffset: number): void; + +设置Y轴标签的X轴方向上的Offset。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------ | ---- | -------------------------------- | +| xOffset | number | 是 | 设置Y轴标签的X轴方向上的Offset。 | + +**6.getLabelXOffset** + +public getLabelXOffset(): number; + +获取Y轴标签的X轴方向上的Offset。 + +返回值： + +| 类型 | 说明 | +| ------ | -------------------------------- | +| number | 获取Y轴标签的X轴方向上的Offset。 | + +**7.setDrawZeroLine** + +public setDrawZeroLine(mDrawZeroLine: boolean): void; + +设置是否绘制0线。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------------- | ------- | ---- | ------------- | +| mDrawZeroLine | boolean | 是 | 是否绘制0线。 | + +**8.EventControl事件控制类** + +EventType 为枚举类型(单击、双击、长按) + +enum EventType { +SingleTap, +DoubleTap, +LongPress +} + +**9.setEventEnable** + +public setEventEnable(evType: EventType): EventControl + +启用事件 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------------ | ---- |-----------------------------------| +| evType | EventType | 是 | SingleTap、DoubleTap、LongPress三个选项 | + +**10.setEventDisable** + +public setEventDisable(evType: EventType): EventControl + +禁用事件 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------------ | ---- |-----------------------------------| +| evType | EventType | 是 | SingleTap、DoubleTap、LongPress三个选项 | + +**11.eventIsEnable** + +public eventIsEnable(evType: EventType): boolean; + +事件是否启用。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------------ | ---- |-----------------------------------| +| evType | EventType | 是 | SingleTap、DoubleTap、LongPress三个选项 | + +**12.eventIsDisable** + +public eventIsDisable(evType: EventType): boolean; + +事件是否被禁用。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------------------ | ---- |------------------------------------| +| evType | EventType | 是 | SingleTap、DoubleTap、LongPress三个选项 | + +**13.setYAxisExtensionLine** + +public setYAxisExtensionLine(opt: boolean): void + +设置y轴延伸线。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +|-----|---------| ---- |------------| +| opt | boolean | 是 | 是否绘制y轴延伸线。 | + +**14.addGridLine** + +public addGridLine(customLine: GridLineConfig): void + +添加自定义网格线。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +|-----|---------| ---- |----------| +| customLine | GridLineConfig | 是 | 设置网格线样式。 | + +**15.getGridLines** + +public getGridLines(): JArrayList + +获取自定义网格线。 + +返回值： + +| 类型 | 说明 | +|-----------------------|----------| +| JArrayList | 自定义网格线数组 | + +**16.setGridAlpha** + +public setGridAlpha(alpha: number): void + +设置网格线颜色不透明度（不包含addGridLine添加的自定义网格线，自定义网格线可通过color属性传入带透明度的颜色） + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +|-------|--------|-----|----------------------------------------| +| alpha | number | 是 | 设置网格线颜色不透明度,取值0到255之间，0是完全透明，255是完全不透明 | + +``` +// 示例代码参见 CustomGridLineChartPage +export interface GridLineConfig { + position: number; + lineWidth?: number; + lineColor?: number; + dashPathEffect?: DashPathEffectConfig +} + +export interface DashPathEffectConfig { + lineLength: number; + spaceLength: number; + phase: number +} +``` + +**六、自定义MarkerView传入** +```typescript + +@State customUiInfo: CustomUiInfo = new CustomUiInfo(90, 50); + +@Builder customUi() { + // 是否在图表content内 + if (this.customUiInfo.isInbounds && this.customUiInfo.data) { + Column() { + Text(`2023-12-15`).fontColor(Color.Gray).fontSize(12).fontWeight(FontWeight.Bold) + Text(`X: ${this.customUiInfo.data.getX()}`).fontColor(Color.Gray).fontSize(12) + Text(`Y: ${this.customUiInfo.data.getY()}`).fontColor(Color.Gray).fontSize(12) + } + .padding(4) + .borderRadius(6) + .border({ width: 1, color: Color.Orange}) + .backgroundColor(0xf0f0f0) + .width(this.customUiInfo.width) + .height(this.customUiInfo.height) + .margin({ left: this.customUiInfo.x, top: this.customUiInfo.y }) + .alignItems(HorizontalAlign.Start) + .onClick(ev => { + this.customUiInfo.showUi = false; + }) + } +} + + +BarChart({ model: this.model, + // 自定义 ui: 传入 builder + customUiBuilder: this.customUi, + // 通过什么事件触发 + customUiTriggerEvent: EventType.SingleTap, + // 自定义ui的位置信息 + customUiInfo: this.customUiInfo, +}) +``` +**七、WaterfallDataSet** + +瀑布图数据类 + +| 方法名 | 描述 | +| ------------- | ---------------------------- | +| setDotsColors | 瀑布图设置所有高亮点的颜色。 | +| getDotsColors | 获取瀑布图所有高亮点的颜色。 | + +**1.setDotsColors** + +public setDotsColors(color: number | string): void; + +瀑布图设置所有高亮点的颜色。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ |----------------------| ---- |--------------------------| +| color | number | string | 是 | 要设置的颜色，可以是number或string。 | + +**2.getDotsColors** + +public getDotsColors(): Array { + +获取瀑布图所有高亮点的颜色。 + +返回值： + +| 类型 | 说明 | +|-----------------------------| --------------------------- | +| Array | 返回包含所有高亮点颜色的数组。 | + +**八、ChartData** + +图表数据类 + +| 方法名 | 描述 | +| ----------------------- | --------------------------------------- | +| setHighlightByXDistance | 设置是否仅通过X轴距离来判断是否高亮点。 | +| isHighlightByXDistance | 检查是否仅通过X轴距离来判断是否高亮点。 | + +**1.setHighlightByXDistance** + +public setHighlightByXDistance(highlightByXDistance: boolean): void; + +设置是否仅通过X轴距离来判断是否高亮点。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ |---------| ---- |--------------------------| +| highlightByXDistance | boolean | 是 | 是否仅通过X轴距离来判断是否高亮点 | + +**2.isHighlightByXDistance** + +public isHighlightByXDistance(): boolean + +检查是否仅通过X轴距离来判断是否高亮点。 + +返回值： + +| 类型 | 说明 | +|---------|--------| +| boolean | 是否仅通过X轴距离来判断是否高亮点的布尔值 | + +**九、BarLineScatterCandleBubbleDataSet** + +Bar,Line,Scatter,Candle,Bubble五种图表数据的抽象基类 + +**1.setHighLightColor** + +public setHighLightColor(color: number): void; + +设置用于绘制高亮指示器的颜色。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | ---------------- | +| color | number | 是 | 高亮指示器的颜色 | + +**2.getHighLightColor** + +public getHighLightColor(): number; + +获取用于绘制高亮指示器的颜色。 + +返回值： + +| 类型 | 说明 | +| ------ | ---------------- | +| number | 高亮指示器的颜色 | + +**3.copyTo** + +protected copyTo(barLineScatterCandleBubbleDataSet: BarLineScatterCandleBubbleDataSet): void + +复制数据到指定的dataSet + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| --------------------------------- | ------------------------------------ | ---- | ----------------------- | +| barLineScatterCandleBubbleDataSet | BarLineScatterCandleBubbleDataSet | 是 | 复制数据到指定的dataSet | + +**十、LineScatterCandleRadarDataSet** + +**1.setDrawHorizontalHighlightIndicator** + +public setDrawHorizontalHighlightIndicator(enabled: boolean): void; + +设置启用/禁用水平突出显示指示器。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------- | ---- | ------------------------------------------------------- | +| enabled | boolean | 是 | 启用/禁用水平突出显示指示器。如果禁用，则不绘制指示器。 | + +**2.setDrawVerticalHighlightIndicator** + +public setDrawVerticalHighlightIndicator(enabled: boolean): void; + +设置启用/禁用垂直突出显示指示器。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------- | ---- | ------------------------------------------------------- | +| enabled | boolean | 是 | 启用/禁用垂直突出显示指示器。如果禁用，则不绘制指示器。 | + +**3.setDrawHighlightIndicators** + +public setDrawHighlightIndicators(enabled: boolean): void; + +设置启用/禁用水平和垂直突出显示指示器。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------- | ------- | ---- | ----------------------------------- | +| enabled | boolean | 是 | 启用/禁用水平和垂直突出显示指示器。 | + + + +**4.isVerticalHighlightIndicatorEnabled** + +public isVerticalHighlightIndicatorEnabled(): boolean; + +获取是否启用垂直突出显示指示器。 + +返回值： + +| 类型 | 说明 | +| ------- | ---------------------------- | +| boolean | 是否启用垂直突出显示指示器。 | + +**5.isHorizontalHighlightIndicatorEnabled** + +public isVerticalHighlightIndicatorEnabled(): boolean; + +获取是否启用水平突出显示指示器。 + +返回值： + +| 类型 | 说明 | +| ------- | ---------------------------- | +| boolean | 是否启用水平突出显示指示器。 | + +**6.setHighlightLineWidth** + +public setHighlightLineWidth(width: number): void; + +设置高亮线的宽度，单位是vp。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ------ | ------ | ---- | ---------------------------- | +| width | number | 是 | 设置高亮线的宽度，单位是vp。 | + +**7.getHighlightLineWidth** + +public getHighlightLineWidth(): number; + +获取高亮线的宽度。 + +返回值： + +| 类型 | 说明 | +| ------ | -------------- | +| number | 高亮线的宽度。 | + +**8.enableDashedHighlightLine** + +public enableDashedHighlightLine(lineLength: number, spaceLength: number, phase: number): void; + +允许以虚线模式绘制高亮线，例如“------”。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ----------- | ------ | ---- | --------------------------------- | +| lineLength | number | 是 | 线段的长度。 | +| spaceLength | number | 是 | 空隙的长度。 | +| phase | number | 是 | 相位偏移，单位为度（通常使用0）。 | + +**9.disableDashedHighlightLine** + +public disableDashedHighlightLine(): void; + +禁用以虚线模式绘制的高亮线。 + +无返回值 + +**10.isDashedHighlightLineEnabled** + +public isDashedHighlightLineEnabled(): boolean; + +如果高亮线启用了虚线效果，则返回true，否则返回false。 + +返回值： + +| 类型 | 说明 | +| ------- | ------------------------ | +| boolean | 高亮线是否启用了虚线效果 | + +**11.getDashPathEffectHighlight** + +public getDashPathEffectHighlight(): DashPathEffect; + +获取虚线效果。 + +返回值： + +| 类型 | 说明 | +| -------------- | -------- | +| DashPathEffect | 虚线效果 | + +**12.copyTo** + +protected copyTo(lineScatterCandleRadarDataSet: LineScatterCandleRadarDataSet): void； + +拷贝数据至指定dataset。 + +参数： + +| 参数名 | 类型 | 必填 | 说明 | +| ----------------------------- | ----------------------------- | ---- | ----------- | +| lineScatterCandleRadarDataSet | LineScatterCandleRadarDataSet | 是 | dataset数据 | + +## 常见问题 + +**1.如果去除图例?** + +```typescript +this.model.getLegend()?.setEnabled(false); +``` + +**2.如果去除右下角Description字样？** + +```typescript +this.model.getDescription()?.setEnabled(false); +``` + +**3 . 如何隐藏 Y 轴线？** + +```typescript +this.model.getAxisLeft().setEnabled(false) //隐藏左边Y轴轴线，此时标签数字也隐藏 +``` + +**4.如果想隐藏轴线但是想显示数字标签？** + +```typescript +this.model.getAxisRight().setDrawAxisLine(false); +``` + +**5.如何控制 Y 轴线数据标签个数?** + +```typescript +this.model.getAxisLeft().setLabelCount(8, false);//设置了8个 +``` + +**6.如何设置轴线颜色，宽度等信息?** + +```typescript +let leftAxis = this.model.getAxisLeft(); +leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);//显示轴线在图表内部则使用INSIDE_CHART +this.leftAxis.setAxisLineColor(ColorTemplate.rgb("#ff0000"));//设置轴线颜色 +leftAxis.setAxisLineWidth(1);// 设置轴线宽度 +leftAxis.setTextSize(20);//设置y轴标签字体大小 +leftAxis.setDrawGridLines(true);//设置显示网格线 +``` + +**7.如何自定义坐标轴标签?** + +如果不想用坐标轴本身的阿拉伯数字标签，也可以自定义坐标轴标签，实现方法是通过创建自定义类实现 IAxisValueFormatter 接口，修改其中的 getFormattedValue 方法，最后调用坐标轴对象的 setValueFormatter 方法就可以实现自定义坐标轴标签。 + +```typescript +class MyAxisValueFormatter implements IAxisValueFormatter { + getFormattedValue(value: number, axis: AxisBase): string { + //将原本存在的对应的value转换成需要的字符串 + switch (value) { + case 1: + return "一"; + case 2: + return "二"; + case 3: + return "三"; + } + return ''; + } +} +... +this.topAxis.setValueFormatter(new TopAxisValueFormatter()) +``` + +**8.图表的缩放、触摸等交互设置如何关闭或打开？** + +```typescript +setTouchEnabled(enabled: boolean)//允许打开或者关闭与图表的所有触摸交互的情况。 +setDragEnabled(enabled: boolean)//打开或关闭对图表的拖动。 +setScaleEnabled(enabled: boolean)//打开或关闭对图表所有方向的缩放。 +setScaleXEnabled(enabled: boolean)//打开或关闭x轴方向上的缩放 +setScaleYEnabled(enabled: boolean)//打开或关闭y轴方向上的缩放。 +setPinchZoom(enabled: boolean)//如果设置为true，手势捏合缩放被打开。如果设置为false，x和y轴不可以被手势捏合缩放。 +setHighlightPerTapEnabled(enabled: boolean)//如果设置为true，在图表中选中触发高亮效果。 +setHighlightPerDragEnabled(enabled: boolean)//设置为true时允许在手指滑动结束时显示高亮效果。默认：true +setHighlightIndicatorEnabled(enabled: boolean)//如果设置为true， 选中数据时，将展示指标线。 +//此方法为dataset设置： +setVisibleXRangeMaximum(maxXRange： number) //设置x轴最多显示数据条数，（要在设置数据源后调用，否则是无效的） +``` + +**9.x轴和y轴的个性化样式是怎么设置？** + +1）通过如下代码获取到 x 轴/y 轴对象。 + +``` +//获取x轴 +let xAxis = model.getXAxis(); +//获取左y轴 +let leftAxis = model.getAxisLeft(); +//获取右y轴 +let rightAxis = model.getAxisRight(); +``` + +2）获取 x 轴和左右 y 轴对象之后，可以调用以下方法设置它们的属性 + +```typescript +setEnabled(enabled: boolean)//设置轴是否被绘制。默认绘制，设置为false则不会被绘制。 +setDrawLabels(enabled: boolean)//设置为true则绘制轴的标签。 +setDrawAxisLine(enabled: boolean)//设置为true则绘制轴线。 +setDrawGridLines(enabled: boolean)//设置为true则绘制网格线。 +setTextColor(color: string | number | CanvasGradient | CanvasPattern)//设置轴标签文本颜色。 +setTextSize(size: number)//设置轴标签的字体大小。 +setTypeface(tf: FontFamily)//设置轴标签的FontFamily，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。 +setGridColor(color: number)//设置网格线颜色。 +setGridLineWidth(width: number)//设置网格线宽度。 +setAxisLineColor(color: number)//设置坐标轴的颜色。 +setAxisLineWidth(width: number)//设置坐标轴的宽度。 +enableGridDashedLine(lineLength: number, spaceLength: number, phase: number)//设置网格线虚线样式，"lineLength"控制短线条的长度，"spaceLength"控制两段线之间的间隔长度，"phase"控制开始的点。 +setAxisMaxValue(max: number)//设置一个自定义的最大值，如果设置了数值，这个值将不会依赖于提供的数据自动计算。 +setAxisMinValue(min: number)//设置一个自定义的最小值。如果设置了数值，这个值将不会依赖于提供的数据进行自动计算。 +``` + +3）x 轴专属设置： + +```typescript +setAvoidFirstLastClipping(enabled: boolean)//如果设置为true，图表将避免在图表或屏幕的边缘的标签条目被裁剪掉。 +setPosition(pos: XAxisPosition)//设置XAxis应该出现的位置。可以选择TOP，BOTTOM，BOTH\_SIDED，TOP\_INSIDE或者BOTTOM\_INSIDE。 +``` + +4）y轴专属设置： + +```typescript +setInverted(enabled: boolean)//如果设置为true，这个轴将被反向，那意味着最大值将被放到底部，最小值将被放到顶部。 +setSpaceTop(percent: number)//设置在图表上最高处的值相比轴上最高值的顶端空间（占总轴范围的百分比）。 +setSpaceBottom(percent: number)//设置在图表上最低处的值相比轴上最低处值的底部空间（总轴范围的百分比）。 +setPosition(pos: YAxisLabelPosition)//设置轴标签应该被绘制的位置。INSIDE\_CHART或者OUTSIDE\_CHART中的一个。 +``` + +## 常见自定义图表 + +### **1.绘制虚实相接的曲线图** + +参考代码位置：entry/src/main/ets/pages/customCharts/DashedSolidLinePage + +mpchart本身的绘制功能是不支持虚实相接的曲线的，要么完全是实线，要么完全是虚线。那么当需求是一半是虚线，一半是实线的曲线时，就需要自己定义方法进行绘制了。 + +首先，需要写一个MyLineDataSet类，继承自LineDataSet（线型图的数据类）。为什么需要这个类呢？因为需要在初始化数据的时候定义这个虚实相接的线是从哪里开始由实线变为虚线的，这里MyLineDataSet类的构造方法比它的父类多了一个interval参数，也就是虚实分隔点。 + +```typescript +import { EntryOhos, JArrayList, LineDataSet } from '@ohos/mpchart'; + +export class MyLineDataSet extends LineDataSet { + interval: number = 0; + constructor(yVals: JArrayList | null, label: string, interval: number) { + super(yVals, label); + this.interval = interval; + } +} +``` + +定义好自己的数据类之后，就要定义MyRender类了，实线具体的绘制功能，MyRender类继承自LineChartRenderer，因为是要绘制曲线，所以重写的是drawCubicBezier方法，MyRender类的代码如下： + +```typescript +import { EntryOhos, ILineDataSet, Style, Transformer, Utils, LineChartRenderer } from '@ohos/mpchart'; +import { MyLineDataSet } from './MyLineDataSet'; + +export default class MyRender extends LineChartRenderer{ + protected drawCubicBezier(c: CanvasRenderingContext2D, dataSet: MyLineDataSet) { + if(dataSet.interval == undefined){ + super.drawCubicBezier(c, dataSet); + return; + } + if (!this.mChart || !this.mXBounds) { + return; + } + const phaseY: number = this.mAnimator ? this.mAnimator.getPhaseY() : 1; + const trans: Transformer | null = this.mChart.getTransformer(dataSet.getAxisDependency()); + + this.mXBounds.set(this.mChart, dataSet); + + const intensity: number = dataSet.getCubicIntensity(); + + let cubicPath = new Path2D(); + //实线 + let solidLinePath = new Path2D(); + //虚线 + let dashedLinePath = new Path2D(); + if (this.mXBounds.range >= 1) { + let prevDx: number = 0; + let prevDy: number = 0; + let curDx: number = 0; + let curDy: number = 0; + + // Take an extra point from the left, and an extra from the right. + // That's because we need 4 points for a cubic bezier (cubic=4), otherwise we get lines moving and doing weird stuff on the edges of the chart. + // So in the starting `prev` and `cur`, go -2, -1 + // And in the `lastIndex`, add +1 + + const firstIndex: number = this.mXBounds.min + 1; + const lastIndex: number = this.mXBounds.min + this.mXBounds.range; + + let prevPrev: EntryOhos | null; + let prev: EntryOhos | null = dataSet.getEntryForIndex(Math.max(firstIndex - 2, 0)); + let cur: EntryOhos | null = dataSet.getEntryForIndex(Math.max(firstIndex - 1, 0)); + let next: EntryOhos | null = cur; + let nextIndex: number = -1; + + if (cur === null) return; + + Utils.resetContext2DWithoutFont(c, this.mRenderPaint); + // let the spline start + cubicPath.moveTo(cur.getX(), cur.getY() * phaseY); + solidLinePath.moveTo(cur.getX(), cur.getY() * phaseY); + + for (let j: number = this.mXBounds.min + 1; j <= this.mXBounds.range + this.mXBounds.min; j++) { + prevPrev = prev; + prev = cur; + cur = nextIndex === j ? next : dataSet.getEntryForIndex(j); + + nextIndex = j + 1 < dataSet.getEntryCount() ? j + 1 : j; + next = dataSet.getEntryForIndex(nextIndex); + + prevDx = (cur.getX() - prevPrev.getX()) * intensity; + prevDy = (cur.getY() - prevPrev.getY()) * intensity; + curDx = (next.getX() - prev.getX()) * intensity; + curDy = (next.getY() - prev.getY()) * intensity; + + cubicPath.bezierCurveTo( + prev.getX() + prevDx, + (prev.getY() + prevDy) * phaseY, + cur.getX() - curDx, + (cur.getY() - curDy) * phaseY, + cur.getX(), + cur.getY() * phaseY + ); + if(j <= dataSet.interval){ + solidLinePath.bezierCurveTo( + prev.getX() + prevDx, + (prev.getY() + prevDy) * phaseY, + cur.getX() - curDx, + (cur.getY() - curDy) * phaseY, + cur.getX(), + cur.getY() * phaseY + ); + if(j == dataSet.interval) { + dashedLinePath.moveTo(cur.getX(), + cur.getY() * phaseY); + } + }else{ + dashedLinePath.bezierCurveTo( + prev.getX() + prevDx, + (prev.getY() + prevDy) * phaseY, + cur.getX() - curDx, + (cur.getY() - curDy) * phaseY, + cur.getX(), + cur.getY() * phaseY + ); + } + } + } + + // if filled is enabled, close the path + if (dataSet.isDrawFilledEnabled()) { + let cubicFillPath: Path2D = new Path2D(); + // cubicFillPath.reset(); + cubicFillPath.addPath(cubicPath); + + if (c && trans) { + this.drawCubicFill(c, dataSet, cubicFillPath, trans, this.mXBounds); + } + } + + this.mRenderPaint.setColor(dataSet.getColor()); + this.mRenderPaint.setStyle(Style.STROKE); + + if (trans && trans.pathValueToPixel(cubicPath)) { + cubicPath = trans.pathValueToPixel(cubicPath); + solidLinePath = trans.pathValueToPixel(solidLinePath); + dashedLinePath = trans.pathValueToPixel(dashedLinePath); + } + + Utils.resetContext2DWithoutFont(c, this.mRenderPaint); + c.beginPath(); + c.stroke(solidLinePath); + c.closePath(); + + Utils.resetContext2DWithoutFont(c, this.mRenderPaint); + c.beginPath(); + c.setLineDash([5,5,0]); + c.stroke(dashedLinePath); + c.closePath(); + this.mRenderPaint.setDashPathEffect(null); + } + +} +``` + +这个方法主要内容就是定义了两条path2D，也就是线段来绘制实线和虚线。 + +```typescript +//实线 +let solidLinePath = new Path2D(); +//虚线 +let dashedLinePath = new Path2D(); +``` + +绘制方法如下: + +```typescript +solidLinePath.bezierCurveTo( + prev.getX() + prevDx, + (prev.getY() + prevDy) * phaseY, + cur.getX() - curDx, + (cur.getY() - curDy) * phaseY, + cur.getX(), + cur.getY() * phaseY +); +``` + +就是调用path2D的方法bezierCurveTo方法，这个方法有6个参数，分别是控制点1的（x值，y值 ）和 控制点2的（x值，y值）以及目标点的（x值，y值）。直接把父类的方法抄过来即可。 + +需要有一个if判断，if(j <= dataSet.interval)就是当j小于dataSet.interval时，写绘制实线的方法，当j等于dataSet.interval时，虚线要moveTo当前位置；当j大于dataSet.interval时，就调用dashedLinePath.bezierCurveTo方法绘制虚线了。 + +最后绘制方法是调用c.stroke方法绘制的。c.setLineDash([5,5,0]);是设置虚线效果。 + +```typescript + Utils.resetContext2DWithoutFont(c, this.mRenderPaint); + c.beginPath(); + c.stroke(solidLinePath); + c.closePath(); + + Utils.resetContext2DWithoutFont(c, this.mRenderPaint); + c.beginPath(); + c.setLineDash([5,5,0]); + c.stroke(dashedLinePath); + c.closePath(); +``` + + 最后的使用代码如下： + +```typescript +import { + JArrayList,EntryOhos,ILineDataSet,LineData,LineChart,LineChartModel, + Mode, +} from '@ohos/mpchart'; +import { MyLineDataSet } from './MyLineDataSet'; +import MyRender from './MyRender'; +import data from '@ohos.telephony.data'; + +@Entry +@Component +struct Index { + private model: LineChartModel = new LineChartModel(); + + aboutToAppear() { + // 创建一个 JArrayList 对象，用于存储 EntryOhos 类型的数据 + let values: JArrayList = new JArrayList(); + // 循环生成 1 到 20 的随机数据，并添加到 values 中 + for (let i = 1; i <= 20; i++) { + values.add(new EntryOhos(i, Math.random() * 100)); + } + // 创建 LineDataSet 对象，使用 values 数据，并设置数据集的名称为 'DataSet' + let dataSet = new MyLineDataSet(values, 'DataSet', 6); + dataSet.setMode(Mode.CUBIC_BEZIER); + dataSet.setDrawCircles(false); + dataSet.setColorByColor(Color.Blue) + let dataSetList: JArrayList = new JArrayList(); + dataSetList.add(dataSet); + // 创建 LineData 对象，使用 dataSetList数据，并将其传递给model + let lineData: LineData = new LineData(dataSetList); + this.model?.setData(lineData); + this.model.setRenderer(new MyRender(this.model, this.model.getAnimator()!, this.model.getViewPortHandler())) + + } + + build() { + Column() { + LineChart({ model: this.model }) + .width('100%') + .height('100%') + .backgroundColor(Color.White) + } + } +} +``` + +### 2.左y轴显示数值，右y轴显示百分比 + +参考代码位置：entry/src/main/ets/pages/customCharts/LeftRightAxisPage.ets + +左y轴数值不变，右y轴改成百分比，需要通过自定义RightAxisFormatter实现IAxisValueFormatter接口，将右y轴的数值改成百分比文本，RightAxisFormatter类如下： + +```typescript +class RightAxisFormatter implements IAxisValueFormatter { + maxNumber: number = 0; + constructor(maxNumber: number) { + this.maxNumber = maxNumber; + } + getFormattedValue(value: number, axis: AxisBase): string { + switch (value) { + case this.maxNumber: + return "100%"; + case this.maxNumber * 4 / 5: + return "80%"; + case this.maxNumber * 3 / 5: + return "60%"; + case this.maxNumber * 2 / 5: + return "40%"; + case this.maxNumber * 1 / 5: + return "20%"; + case 0: + return "0%"; + } + return ""; + } +} +``` + +使用方法如下： + +```typescript +//设置标签文本转换器 +rightAxis?.setValueFormatter(new RightAxisFormatter(this.maxNumber)); +``` + +### 3.短刻度线 + +参考代码位置：entry/src/main/ets/pages/customCharts/ScaleLinePage + +若需绘制x轴的短刻度线，可以利用现有资源，将原本的网格线稍作修改，改成绘制一条短线即可。 + +具体的方法就是写一个类MyXAxisRender继承自XAxisRenderer，重写父类的drawGridLine方法， + +代码如下： + +```typescript +import { Utils, XAxisRenderer } from '@ohos/mpchart'; + +export default class MyXAxisRender extends XAxisRenderer{ + protected drawGridLine(c: CanvasRenderingContext2D, x: number, y: number): void { + Utils.resetContext2DWithoutFont(c, this.mGridPaint); + c.beginPath(); + let bottom = this.mViewPortHandler?.contentBottom()??0; + c.moveTo(x, bottom); + c.lineTo(x, bottom - 10); + c.stroke(); + c.closePath(); + } +} +``` + +其中关键代码就是c.moveTo(x，bottom)和c.lineTo(x, bottom-10），这两行代码决定了刻度线绘制的位置和长短，即从图表底部开始往上绘制一条长度为10vp的线条。 + +那么使用的时候，就通过以下代码将X轴的绘制类改成自定义的绘制类 MyXAxisRender： + +```typescript +this.model.setXAxisRenderer(new MyXAxisRender(this.model.getViewPortHandler(), this.model.getXAxis()!, this.model.getTransformer(AxisDependency.LEFT)!)); +``` + +### 4.根据y轴刻度绘制渐变色曲线 + +参考代码位置：entry/src/main/ets/pages/customCharts/GradientLinePage + +渐变色曲线的参考代码修改了两个部件的绘制效果：一个是左y轴的绘制效果，另一个是数据线的绘制效果。这两个部件涉及到YAxisRenderer和LineChartRenderer两个绘制类。 + +首先，修改左y轴的绘制效果需要创建一个继承自YAxisRenderer类的自定义类MyAxisRender，并修改其中的renderAxisLine方法来改变y轴的绘制效果。修改的主要内容是将canvas的strokeStyle设置为通过createLinearGradient方法创建的渐变色效果，并将其应用到y轴线的描边样式中。这样，左边的y轴会呈现出颜色渐变的效果。 + +接着，数据线的绘制效果，需要创建一个继承自LineChartRenderer类的自定义类MyDataRender，并修改其中的drawCubicBezier方法。创建一个从底部到顶部的垂直渐变，然后将这个渐变应用到数据线的描边样式中。 + + + +## 约束与限制 + +在下述版本验证通过： +- DevEco Studio: 5.0 (5.0.3.500), SDK: API12 (5.0.0.25) + +## 目录结构 + +```` +|---- ohos-MPChart +| |---- entry # 示例代码文件夹 +| |---- library # mpchart库文件夹 +| |---- index.ets # 对外接口 +│ ├----components # 框架代码目录 +│ ├----animation # 动画目录 +│ │ +│ ├----buffer # 缓存相关目录 +│ │ +│ ├----chartcomponents # 各类型图表目录 +│ │ +│ ├----charts # 各类型图表Model类目录 +│ │ +│ ├----components # 自定义组件目录 +│ │ +│ ├----data # 数据实体目录 +│ │ +│ ├----formatter # 各种数据格式化目录 +│ │ +│ ├----highlight # 各种图表中高亮显示操作目录 +│ │ +│ ├----interfaces # 对外接口目录 +│ │ +│ ├----jobs # 动画工作线程目录 +│ │ +│ ├----listener # 手势监听目录 +│ │ +│ ├----renderer # 各种图表绘制属性设置目录 +│ │ +│ └----utils # 工具类目录 +│ +└─resources # 资源文件 +| |---- README_zh.md # 安装使用方法 + +```` + +## 贡献代码 +使用过程中发现任何问题都可以提 [Issue](https://gitee.com/openharmony-sig/ohos-MPChart/issues)给组件 ，当然，也非常欢迎发 [PR](https://gitee.com/openharmony-sig/ohos-MPChart/pulls)共建 。 + +## 开源协议 +本项目基于 [Apache License 2.0](https://gitee.com/openharmony-sig/ohos-MPChart/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file -- Gitee