AAChartCore
开源图表框架AAChartCoreDemo
AAChartCoreLib 文件夹
和 resources/rawfile 下的所有文件
拖入至你的项目之中.在sdk6,DevEco Studio2.2 beta1下项目可直接运行 如无法运行,删除项目.gradle,.idea,build,gradle,build.gradle文件, 并依据自己的版本创建新项目,将新项目的对应文件复制到根目录下
使用该库非常简单,只需查看提供的示例的源代码。
<AAChartCore.AAChartConfiger.AAChartView
ohos:id="$+id:AAChartView"
ohos:height="match_parent"
ohos:width="match_parent"
/>
AAChartView aaChartView = (AAChartView) findComponentById(ResourceTable.Id_AAChartView);
链式编程的方式配置 AAChartModel 模型对象属性
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.aa_drawChartWithChartModel(aaChartModel);
如果你需要更新图表内容,你应该阅读以下内容,根据你的实际需要,选择调用适合你的函数
仅仅刷新图形的series
数据内容(首次绘制图形完成之后,后续刷新图表数据均建议调用此方法)
/*仅仅更新了图表的series数组数据,不改动图表的其他内容*/
aaChartView.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray)
刷新图形除数据属性 series
以外的其他属性(首次绘制图形完成之后,后续刷新图表的属性均建议调用此方法 注意:仅仅刷新图形数据,则建议使用上面的 aa_onlyRefreshTheChartDataWithChartModelSeries
方法)
/*更新 AAChartModel 整体内容(如修改了图表的类型,将 column chart 改为 area chart)之后,刷新图表*/
aaChartView.aa_refreshChartWholeContentWithChartModel(aaChartModel)
可通过给 AAChartView 实例对象设置代理方法,来实现监听用户的点击事件和单指滑动事件
public interface AAChartViewCallBack {
void chartViewMoveOverEventMessage(AAChartView aaChartView, AAMoveOverEventMessageModel messageModel);
}
在监听用户交互事件时,获取的事件信息AAMoveOverEventMessageModel
共包含以下内容
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 实例对象属性
AATooltip aaTooltip = new AATooltip()
.useHTML(true)
.formatter(" function () {\n" +
" return ' 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 <br/> '\n" +
" + ' Support JavaScript Function Just Right Now !!! <br/> '\n" +
" + ' The Gold Price For <b>2020 '\n" +
" + this.x\n" +
" + ' </b> Is <b> '\n" +
" + this.y\n" +
" + ' </b> Dollars ';\n" +
" }")
.valueDecimals(2)//设置取值精确到小数点后几位//设置取值精确到小数点后几位
.backgroundColor("#000000")
.borderColor("#000000")
.style(new AAStyle()
.color("#FFD700")
.fontSize("12 px")
);
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";
}
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
视图区域进行 左右拖动 即可.同时屏幕的右上角会自动出现一个标题为 "恢复缩放" 的按钮,点击恢复缩放,图表大小和位置将会回归到原初的样式。
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";
}
Back | Bounce | Circ | Cubic | Elastic |
---|---|---|---|---|
![][1] | ![][2] | ![][3] | ![][4] | ![][5] |
Expo | Quad | Quart | Quint | Sine |
---|---|---|---|---|
![][6] | ![][7] | ![][8] | ![][9] | ![][10] |
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都有与之对应的数据、类型、颜色、透明度等具体的值 |
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.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
Activity
Community
Health
Trend
Influence
:Code submit frequency
:React/respond to issue & PR etc.
:Well-balanced team members and collaboration
:Recent popularity of project
:Star counts, download counts etc.