Android 圖表框架 AAChartCore---強大、精美、易用的 Android 數據可視化工具集

AAChartCore

English Document 🇬🇧 | 簡體中文文檔 🇨🇳 | 繁體中文文檔 🇭🇰

您所喜愛的AAChartCore開源圖表框架同時更有Kotlin版本可供使用,詳情請點擊以下鏈接

傳送門

https://github.com/AAChartMod...

前言

AAChartCore,是 AAChartKit 的 Java語言版本,是在流行的開源前端圖表框架的基礎上,封裝的面向對象的,一組簡單易用,極其精美的圖表繪製控件.可能是這個星球上 UI 最精緻的第三方 Android 開源圖表框架了(✟我以無神論者的名義向上帝起誓🖐,我真的沒有在說鬼話✟)

---

功能特性

1. 環境友好,兼容性強. 支持 Kotlin語言,配置簡單.同時更有 Objective-C 版本AAChartKit可供使用.
2. 功能強大,類型多樣. 支持柱狀圖 、條形圖 、折線圖 、曲線圖 、折線填充圖 、曲線填充圖、雷達圖、極地圖、扇形圖、氣泡圖、散點圖、區域範圍圖、柱形範圍圖、面積範圍圖、面積範圍均線圖、直方折線圖、直方折線填充圖、箱線圖、瀑布圖、熱力圖、桑基圖、金字塔圖、漏斗圖、等二十幾種類型的圖形,不可謂之不多.
3. 交互式圖形動畫. 有着清晰和充滿細節的用戶交互方式,與此同時,圖形渲染動畫效果細膩精緻,流暢優美.有三十多種以上渲染動畫效果可供選擇,用戶可自由設置渲染圖形時的動畫時間和動畫類型,關於圖形渲染動畫類型,具體參見 AAChartCore 動畫類型.
4. 支持手勢縮放.支持圖表的手勢縮放和拖動閱覽,手勢縮放類型具體參見 AAChartCore 手勢縮放類型,默認禁用手勢縮放功能.
5. 極簡主義. AAChartView + AAChartModel = Chart,在 AAChartCore 數據可視化圖形框架當中,遵循這樣一個極簡主義公式:圖表視圖控件 + 圖表模型 = 你想要的圖表.同另一款強大、精美而又易用的開源圖形框架 AAChartKit完全一致.
6. 鏈式編程語法. 支持系統類推薦的 鏈式編程語法,一行代碼即可配置完成 AAChartModel模型對象實例.
7. 簡潔清晰,輕便易用. 最少僅僅需要 五行代碼 即可完成整個圖表的繪製工作(使用鏈式編程語法配置 AAChartModel 實例對象時,無論你寫多少行代碼,理論上只能算作是一行). 😜😜😜

---

真機美圖

Column Chart	Column Range Chart	Area Chart

Line Chart	Step Area Chart	Step Line Chart

Spline Chart	Areaspline Chart	Stacked Polar Chart

Bubble Chart	Arearange Average Value Chart	Column Mixed Line Chart

Scatter Chart	Boxplot Chart	Mirror Column Chart

安裝

手動安裝

1. 下載 Demo AAChartCoreDemo
2. 將 Demo 中的名爲AAChartCore 的文件夾拖入至你的項目之中.

使用方法

1. 創建視圖AAChartView

        <AAChartCore.AAChartConfiger.AAChartView
        android:id="@+id/AAChartView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

       AAChartView aaChartView = findViewById(R.id.AAChartView);

1. 配置視圖模型AAChartModel

• 鏈式編程的方式配置 AAChartModel 模型對象屬性

AAChartModel aaChartModel = new AAChartModel()
    .chartType(chartType)
    .title("title")
    .subtitle("subtitleubtitleSubtitle")
    .backgroundColor("#4b2b7f")
    .dataLabelEnabled(true)
    .yAxisGridLineWidth(0)
    .legendVerticalAlign(AAChartModel.LegendVerticalAlignType.Bottom)
    .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})
        });

1. 繪製圖形(創建 AAChartView 實例對象後,首次繪製圖形調用此方法)

        /*圖表視圖對象調用圖表模型對象,繪製最終圖形*/
        aaChartView.aa_drawChartWithChartModel(aaChartModel);

🌹🌹🌹 好了,至此,有關於繪製圖形的任務,一切皆已經搞定!!! 你將得到你想要的任意圖形!!!

更新圖形內容

如果你需要更新圖表內容,你應該閱讀以下內容,根據你的實際需要,選擇調用適合你的函數

• 僅僅刷新圖形的series數據內容(首次繪製圖形完成之後,後續刷新圖表數據均建議調用此方法)

    /*僅僅更新了圖表的series數組數據,不改動圖表的其他內容*/
    aaChartView.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray)

• 刷新圖形除數據屬性 series 以外的其他屬性(首次繪製圖形完成之後,後續刷新圖表的屬性均建議調用此方法 注意:僅僅刷新圖形數據,則建議使用上面的👆aa_onlyRefreshTheChartDataWithChartModelSeries方法)

    /*更新 AAChartModel 整體內容(如修改了圖表的類型,將 column chart 改爲 area chart)之後,刷新圖表*/
    aaChartView.aa_refreshChartWholeContentWithChartModel(aaChartModel)

ChartCore-Slim一些重要屬性經過配置之後的圖形示例如下

• line chart - 折線圖

• column chart - 柱形圖

• bar chart - 條形圖

• special area chart one - 常規折線區域填充圖

• special area chart two - 帶有負數的區域填充圖

)

• special area chart three - 堆積效果的區域填充圖

• polar chart - 極地圖

• radar chart - 雷達圖

• pie chart - 扇形圖

• bubble chart - 氣泡圖

• scatter chart - 散點圖

• arearange chart - 區域範圍圖

• step area chart - 直方折線填充圖

• mixed chart - 混合圖形

更多圖形效果

注意:如下的這幅DEMO演示圖爲大小6M左右的GIF動態圖,如未顯示動態效果則說明圖片資源未全部加載。請耐心等待至圖片資源內容完全加載結束後，即可最終觀賞更多的項目的動態演示效果.

特別說明

支持監聽用戶點擊事件及單指滑動事件

可通過給 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 X  = "x";
        String Y  = "y";
        String 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";
    }

以下是ChartCore-Slim其中十種圖表渲染動畫類型

Back	Bounce	Circ	Cubic	Elastic

Expo	Quad	Quart	Quint	Sine

關於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 所有屬性列表說明

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 軸文字顏色

作者

An An

                       _oo0oo_
                      o8888888o
                      88" . "88
                      (| -_- |)
                      0\  =  /0
                    ___/`---'\___
                  .' \\|     |// '.
                 / \\|||  :  |||// \
                / _||||| -:- |||||- \
               |   | \\\  -  /// |   |
               | \_|  ''\---/''  |_/ |
               \  .-\__  '-'  ___/-. /
             ___'. .'  /--.--\  `. .'___
          ."" '<  `.___\_<|>_/___.' >' "".
         | | :  `- \`.;`\ _ /`;.`/ - ` : | |
         \  \ `_.   \_ __\ /__ _/   .-` /  /
     =====`-.____`.___ \_____/___.-`___.-'=====
                       `=---='
*******************************************************
     ¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥¥
         €€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€
               $$$$$$$$$$$$$$$$$$$$$$$  
                   BUDDHA_BLESS_YOU       
                      AWAY_FROM
                         BUG

源代碼⛓

語言版本	項目名稱	適用平臺	源代碼鏈接
Kotlin	AAInfographics	Android	https://github.com/AAChartMod...
Java	AAChartCore	Android	https://github.com/AAChartMod...
Swift	AAInfographics	iOS	https://github.com/AAChartMod...
Objective C	AAChartKit	iOS	https://github.com/AAChartMod...
Dart	AACharts-Flutter	iOS/Android	https://github.com/AAChartMod...
C#	AACharts-Xamarin	iOS/Android	https://github.com/AAChartMod...

許可證

本項目 AAChartCore使用 MIT許可證,詳情請點擊MIT LICENSE

聯繫方式

---

• 🌕 🌖 🌗 🌘 暖心提示 🌑 🌒 🌓 🌔

*

• 如果有任何使用上的問題,隨時歡迎您在 GitHub 上向我提 issue.
• GitHub Issues : https://github.com/AAChartMod...

---

• 如果您想參與到此項目的開源活動中來,也同樣隨時歡迎您聯繫我
• GitHub : https://github.com/AAChartModel
• StackOverflow : https://stackoverflow.com/use...
• JianShu : http://www.jianshu.com/u/f1e6...
• SegmentFault : https://segmentfault.com/u/hu...

---

待辦清單

• [x] 支持圖形加載完成後用戶添加代理事件
• [x] 支持圖形動態刷新全局內容
• [x] 支持圖形動態刷新純數據(series)內容
• [x] 支持色彩圖層漸變效果
• [x] 支持橫屏(全屏)效果
• [x] 支持自由設置圖形渲染動畫
• [x] 支持用戶自由配置AAOptions模型對象屬性
• [x] 支持圖形堆疊
• [x] 支持圖形座標軸反轉
• [x] 支持渲染散點圖
• [x] 支持渲染柱形範圍圖
• [x] 支持渲染面積範圍圖
• [x] 支持渲染面積範圍均線圖
• [x] 支持渲染極地圖
• [x] 支持渲染折線直方圖
• [x] 支持渲染折線直方填充圖
• [ ] 支持渲染矩形樹狀層級關係圖
• [ ] 支持渲染活動刻度儀表圖
• [ ] 支持爲圖形添加點擊事件回調
• [ ] 支持圖形實時刷新純數據並動態滾動
• [ ] 支持已渲染圖形生成圖片文件
• [ ] 支持生成圖片文件保存至系統相冊