# AAChartCore **Repository Path**: chinasoft3_ohos/AAChartCore ## Basic Information - **Project Name**: AAChartCore - **Description**: 图表框架 - **Primary Language**: Java - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 1 - **Created**: 2021-05-18 - **Last Updated**: 2022-09-27 ## Categories & Tags **Categories**: harmonyos-chart **Tags**: None ## README # AAChartCore #### 项目介绍 - 项目名称：`AAChartCore`开源图表框架 - 所属系列：openharmony的第三方组件适配移植 - 功能：图表框架 - 项目移植状态：主功能完成 - 调用差异：无 - 开发版本：sdk6，DevEco Studio2.2 beta1 - 基线版本：master分支 #### 效果演示 ![screen1](./image/aachartcore.gif "效果演示") ##### line chart ![LineChart](./image/LineChart.PNG "LineChart") ##### column chart ![ColumnChart](./image/ColumnChart.PNG "ColumnChart") ##### bar chart ![BarChart](./image/BarChart.PNG "BarChart") ##### area chart ![AreaChart](./image/AreaChart.PNG "AreaChart") ##### spline chart ![splineChart](./image/splineChart.PNG "splineChart") ##### areasp line chart ![areasplineChart](./image/areasplineChart.PNG "areasplineChart") ##### step line chart ![StepLineChart.PNG](./image/areasplineChart.PNG "areasplineChart") ##### step area chart ![StepAreaChart](./image/StepAreaChart.PNG "StepAreaChart") ##### bubble area chart ![bubble](./image/bubble.PNG "bubble") ##### mixed area chart ![mixed](./image/mixed.PNG "mixed") ##### pie area chart ![pie](./image/pie.PNG "pie") ##### polar area chart ![polar](./image/polar.PNG "polar") ##### scatter area chart ![scatter](./image/scatter.PNG "scatter") ##### bubble area chart ![step](./image/step.PNG "step") ##### scrollingUpdateColumnChart chart ![scrollingUpdateColumnChart](./image/scrollingUpdateColumnChart.PNG "scrollingUpdateColumnChart") ##### scrollingUpdateLineChart chart ![scrollingUpdateLineChart](./image/scrollingUpdateLineChart.PNG "scrollingUpdateLineChart") ##### scrollingUpdateStepAreaChart chart ![scrollingUpdateStepAreaChart](./image/scrollingUpdateStepAreaChart.PNG "scrollingUpdateStepAreaChart") ##### DataSortingBarChart chart ![DataSortingBarChart.PNG](./image/DataSortingBarChart.PNG "DataSortingBarChart") ##### DataSortingColumnChart chart ![DataSortingColumnChart](./image/DataSortingColumnChart.PNG "DataSortingColumnChart") ##### DataSortingScatterChart.PNG chart ![DataSortingScatterChart](./image/DataSortingScatterChart.PNG "DataSortingScatterChart") #### 安装教程 1. 下载 Demo `AAChartCoreDemo` 2. 将 Demo 中的名为`AAChartCoreLib 文件夹` 和 `resources/rawfile 下的所有文件`拖入至你的项目之中. 在sdk6，DevEco Studio2.2 beta1下项目可直接运行 如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件， 并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下 #### 使用说明 使用该库非常简单，只需查看提供的示例的源代码。 ##### 创建视图*AAChartView* ```xml ``` ##### java 中使用 ```java AAChartView aaChartView = (AAChartView) findComponentById(ResourceTable.Id_AAChartView); ``` ##### 配置视图模型*AAChartModel* 链式编程的方式配置 *AAChartModel* 模型对象属性 ```java AAChartModel aaChartModel = new AAChartModel() .chartType(AAChartType.Area) .title("THE HEAT OF PROGRAMMING LANGUAGE") .subtitle("Virtual Data") .backgroundColor("#4b2b7f") .categories(new String[]{"Java","Swift","Python","Ruby", "PHP","Go","C","C#","C++"}) .dataLabelsEnabled(false) .yAxisGridLineWidth(0f) .series(new AASeriesElement[]{ new AASeriesElement() .name("Tokyo") .data(new Object[]{7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6}), new AASeriesElement() .name("NewYork") .data(new Object[]{0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5}), new AASeriesElement() .name("London") .data(new Object[]{0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0}), new AASeriesElement() .name("Berlin") .data(new Object[]{3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8}) }); ``` ##### 绘制图形(创建 AAChartView 实例对象后,首次绘制图形调用此方法) ```java /*图表视图对象调用图表模型对象,绘制最终图形*/ aaChartView.aa_drawChartWithChartModel(aaChartModel); ``` ##### 更新图形内容 如果你需要更新图表内容,你应该阅读以下内容,根据你的实际需要,选择调用适合你的函数 仅仅刷新图形的`series`数据内容(首次绘制图形完成之后,后续刷新图表数据均建议调用此方法) ```java /*仅仅更新了图表的series数组数据,不改动图表的其他内容*/ aaChartView.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray) ``` 刷新图形除数据属性 `series` 以外的其他属性(首次绘制图形完成之后,后续刷新图表的属性均建议调用此方法 注意:仅仅刷新图形数据,则建议使用上面的 `aa_onlyRefreshTheChartDataWithChartModelSeries`方法) ```java /*更新 AAChartModel 整体内容(如修改了图表的类型,将 column chart 改为 area chart)之后,刷新图表*/ aaChartView.aa_refreshChartWholeContentWithChartModel(aaChartModel) ``` ##### 支持监听用户点击事件及单指滑动事件 可通过给 AAChartView 实例对象设置代理方法,来实现监听用户的点击事件和单指滑动事件 ```java public interface AAChartViewCallBack { void chartViewMoveOverEventMessage(AAChartView aaChartView, AAMoveOverEventMessageModel messageModel); } ``` 在监听用户交互事件时,获取的事件信息`AAMoveOverEventMessageModel`共包含以下内容 ```java public class AAMoveOverEventMessageModel { public String name; public Double x; public Double y; public String category; public LinkedTreeMap offset; public Double index; } ``` ##### 支持通过`JavaScript` 函数来自定义 `AATooltip`视图显示效果 有时系统默认的 tooltip 浮动提示框的显示效果无法满足使用者的特殊自定义要求,此时可以通过添加 AATooltip 的 `headerFormat`、`footerFormat` 和 `pointFormat` 的字符串属性的`HTML`文本内容,来自定义浮动提示框的显示内容,此三者可以胜任绝大多数情况下的自定义浮动提示框 AATooltip 的任务. 如仍旧不能满足需求,更可以通过 AATooltip 的 `formatter` 函数来实现视图的特殊定制化 例如,如下配置 AATooltip 实例对象属性 ```java AATooltip aaTooltip = new AATooltip() .useHTML(true) .formatter(" function () {\n" + " return ' 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔
'\n" + " + ' Support JavaScript Function Just Right Now !!!
'\n" + " + ' The Gold Price For 2020 '\n" + " + this.x\n" + " + ' Is '\n" + " + this.y\n" + " + ' Dollars ';\n" + " }") .valueDecimals(2)//设置取值精确到小数点后几位//设置取值精确到小数点后几位 .backgroundColor("#000000") .borderColor("#000000") .style(new AAStyle() .color("#FFD700") .fontSize("12 px") ); ``` ##### 当前已支持的图表类型有十种以上,说明如下 ```java public interface AAChartType { String Column = "column"; String Bar = "bar"; String Area = "area"; String AreaSpline = "areaspline"; String Line = "line"; String Spline = "spline"; String Scatter = "scatter"; String Pie = "pie"; String Bubble = "bubble"; String Pyramid = "pyramid"; String Funnel = "funnel"; String Columnrange = "columnrange"; String Arearange = "arearange"; String Areasplinerange = "areasplinerange"; String Boxplot = "boxplot"; String Waterfall = "waterfall"; } ``` ##### 当前已支持的图表手势缩放类型共有三种,说明如下 ```java public interface AAChartZoomType { String None = "none"; //禁用图表手势缩放功能(默认禁用手势缩放) String X = "x"; //支持图表 X 轴横向缩放 String Y = "y"; //支持图表 Y 轴纵向缩放X String XY = "xy"; //支持图表 XY 轴纵向缩放 } ``` NOTE:例如,设置了`AAChartModel`的缩放属性`zoomType`为`AAChartZoomType.X`,并且将图表进行了手势放大之后,这时候如果想要左右滑动图表,可以使用 **双指点按** 屏幕中的`AAChartView`视图区域进行 **左右拖动** 即可.同时屏幕的右上角会自动出现一个标题为 **"恢复缩放"** 的按钮,点击恢复缩放,图表大小和位置将会回归到原初的样式。 ##### 当前已支持的图表渲染动画类型有三十种以上,说明如下 ```java public interface AAChartAnimationType { String EaseInQuad = "easeInQuad"; String EaseOutQuad = "easeOutQuad"; String EaseInOutQuad = "easeInOutQuad"; String EaseInCubic = "easeInCubic"; String EaseOutCubic = "easeOutCubic"; String EaseInOutCubic = "easeInOutCubic"; String EaseInQuart = "easeInQuart"; String EaseOutQuart = "easeOutQuart"; String EaseInOutQuart = "easeInOutQuart"; String EaseInQuint = "easeInQuint"; String EaseOutQuint = "easeOutQuint"; String EaseInOutQuint = "easeInOutQuint"; String EaseInSine = "easeInSine"; String EaseOutSine = "easeOutSine"; String EaseInOutSine = "easeInOutSine"; String EaseInExpo = "easeInExpo"; String EaseOutExpo = "easeOutExpo"; String EaseInOutExpo = "easeInOutExpo"; String EaseInCirc = "easeInCirc"; String EaseOutCirc = "easeOutCirc"; String EaseInOutCirc = "easeInOutCirc"; String EaseOutBounce = "easeOutBounce"; String EaseInBack = "easeInBack"; String EaseOutBack = "easeOutBack"; String EaseInOutBack = "easeInOutBack"; String Elastic = "elastic"; String SwingFromTo = "swingFromTo"; String SwingFrom = "swingFrom"; String SwingTo = "swingTo"; String Bounce = "bounce"; String BouncePast = "bouncePast"; String EaseFromTo = "easeFromTo"; String EaseFrom = "easeFrom"; String EaseTo = "easeTo"; } ``` ##### **ChartCore-Slim**其中十种图表渲染动画类型 | Back | Bounce | Circ | Cubic | Elastic | |:---------:|:---------:|:---------:|:---------:|:---------:| | ![][1] | ![][2] | ![][3] | ![][4] | ![][5] | | Expo | Quad | Quart | Quint | Sine | |:---------:|:---------:|:---------:|:---------:|:---------:| | ![][6] | ![][7] | ![][8] | ![][9] | ![][10] | ##### `AAChartModel` 属性说明 ###### AAChartModel 主要属性说明 属性名称 | 描述 | 取值范围 | ------------ |------------- | ------------- | title | 图表主标题 | 任意有效的字符串 | subtitle | 图表副标题 | 任意有效的字符串 | chartType | 图表类型,可以为`AAChartType`枚举字符串当中指定的任意有效类型.其中有支持`柱状图` 、`条形图` 、`折线图` 、`曲线图` 、`折线填充图` 、`曲线填充图`、`雷达图`、`扇形图`、`气泡图`、`散点图`、`金字塔图`、`漏斗图`、`区域范围图`、`柱形范围图`等多种图形 | .column, .bar, .area, .areaSpline, .line, .spline, .pie, .bubble, .scatter, .pyramid, .funnel, .areaRange, .columnRange | stacking| 是否将图表每个数据列的值叠加在一起。 默认的值为`.none`， 即禁用堆叠样式效果.另有常规堆叠样式和百分比堆叠样式可供选择 | .none, .normal, .percent | symbol | 图表曲线连接点的样式类型.其可供选择的值有`圆`、`正方形`、`钻石`、`常规三角形`和`倒三角形`,默认为混合样式 | .circle, .square, .diamond, .triangle, .triangleDown | colorsTheme | 图表显示的颜色主题效果 |类似此 `new String[]{"#fe117c","#ffc069","#06caf4","#7dffc0"}` 有效十六进制颜色字符串数组 | series | 图表的数据列 | AASeriesElement实例对象组成的有效数组,其中每个AASeriesElement都有与之对应的数据、类型、颜色、透明度等具体的值 | ###### AAChartModel 所有属性列表说明 ```java public String animationType; //动画类型 public Integer animationDuration; //动画时间 public String title; //标题内容 public String subtitle; //副标题内容 public String chartType; //图表类型 public String stacking; //堆积样式 public String symbol; //折线曲线连接点的类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle" public String symbolStyle; public String zoomType; //缩放类型 AAChartZoomTypeX表示可沿着 x 轴进行手势缩放 public Boolean pointHollow; //折线或者曲线的连接点是否为空心的 public Boolean inverted; //x 轴是否翻转(垂直) public Boolean xAxisReversed; //x 轴翻转 public Boolean yAxisReversed; //y 轴翻转 public Boolean tooltipEnabled; //是否显示浮动提示框(默认显示) public String tooltipValueSuffix; //浮动提示框单位后缀 public Boolean tooltipCrosshairs; //是否显示准星线(默认显示) public Boolean gradientColorEnable; //是否要为渐变色 public Boolean polar; //是否极化图形(变为雷达图) public Float marginLeft; public Float marginRight; public Boolean dataLabelEnabled; //是否显示数据 public Boolean xAxisLabelsEnabled; //x轴是否显示数据 public String[]categories; //x轴是否显示数据 public Integer xAxisGridLineWidth; //x轴网格线的宽度 public Boolean xAxisVisible; //x 轴是否显示 public Boolean yAxisVisible; //y 轴是否显示 public Boolean yAxisLabelsEnabled; //y轴是否显示数据 public String yAxisTitle; //y轴标题 public Float yAxisLineWidth; //y 轴轴线的宽度 public Integer yAxisGridLineWidth; //y轴网格线的宽度 public Object[]colorsTheme; //图表主题颜色数组 public Boolean legendEnabled; //是否显示图例 public String legendLayout; //图例数据项的布局。布局类型： "horizontal" 或 "vertical" 即水平布局和垂直布局 默认是：horizontal. public String legendAlign; //设定图例在图表区中的水平对齐方式，合法值有left，center 和 right。 public String legendVerticalAlign; //设定图例在图表区中的垂直对齐方式，合法值有 top，middle 和 bottom。垂直位置可以通过 y 选项做进一步设定。 public String backgroundColor; //图表背景色 public Boolean options3dEnable; //是否3D化图形(仅对条形图,柱状图有效) public Integer options3dAlphaInt; public Integer options3dBetaInt; public Integer options3dDepth; //3D图形深度 public Integer borderRadius; //柱状图长条图头部圆角半径(可用于设置头部的形状,仅对条形图,柱状图有效) public Integer markerRadius; //折线连接点的半径长度 public AASeriesElement[] series; public String titleColor; //标题颜色 public String subTitleColor; //副标题颜色 public String axisColor; //x 轴和 y 轴文字颜色 ``` #### 测试信息 CodeCheck代码测试无异常 CloudTest代码测试无异常 病毒安全检测通过 当前版本demo功能与原组件基本无差异 #### 版本迭代 - 1.0.0 - 0.0.1-SNAPSHOT #### 版权和许可信息 AAInfographics is available under the MIT license. See the LICENSE file for more information.