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

時間  2019-11-06
標籤 android 圖表 框架 aachartcore 強大 精美 易用 數據 可視化 工具 欄目 Android 简体版
原文   原文鏈接

AAChartCore-LOGO

AAChartCore

Support






Average time to resolve an issue
Percentage of issues still open

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
image1 image1 image1
Line Chart Step Area Chart Step Line Chart
image1 image1 image1
Spline Chart Areaspline Chart Stacked Polar Chart
image1 image1 image1
Bubble Chart Arearange Average Value Chart Column Mixed Line Chart
image1 image1 image1
Scatter Chart Boxplot Chart Mirror Column Chart
image1 image1 image1

安裝

手動安裝

  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);

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

更新圖形內容

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

  • 僅僅刷新圖形的series數據內容(首次繪製圖形完成以後,後續刷新圖表數據均建議調用此方法)
/*僅僅更新了圖表的series數組數據,不改動圖表的其餘內容*/
    aaChartView.aa_onlyRefreshTheChartDataWithChartModelSeries(chartModelSeriesArray)
  • 刷新圖形除數據屬性 series 之外的其餘屬性(首次繪製圖形完成以後,後續刷新圖表的屬性均建議調用此方法 注意:僅僅刷新圖形數據,則建議使用上面的👆aa_onlyRefreshTheChartDataWithChartModelSeries方法)
/*更新 AAChartModel 總體內容(如修改了圖表的類型,將 column chart 改成 area chart)以後,刷新圖表*/
    aaChartView.aa_refreshChartWholeContentWithChartModel(aaChartModel)

ChartCore-Slim一些重要屬性通過配置以後的圖形示例以下

  • line chart - 折線圖

line chart

  • column chart - 柱形圖

IMG_1873.JPG

  • bar chart - 條形圖

bar chart

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

IMG_1869.JPG

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

IMG_1871.JPG)ios

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

IMG_1863.JPG

  • polar chart - 極地圖

polar chart

  • radar chart - 雷達圖

radar chart

  • pie chart - 扇形圖

pie chart

  • bubble chart - 氣泡圖

bubble chart

  • scatter chart - 散點圖

scatter chart

  • arearange chart - 區域範圍圖

arearange chart

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

step area chart

  • mixed chart - 混合圖形

mixed chart

更多圖形效果

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

AAChartKit-Live

特別說明

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

可經過給 AAChartView 實例對象設置代理方法,來實現監聽用戶的點擊事件和單指滑動事件github

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 的任務.segmentfault

如仍舊不能知足需求,更能夠經過 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")
                );

便可完成圖表的浮動提示框的特殊定製化.獲得的自定義浮動提示框的視覺效果圖以下👇
Custom Tooltip Styleapp

支持添加值域分割功能⚔

  • 添加顏色帶🎀值域分割

plotBandsChart

  • 添加顏色線🧶值域分割

plotLinesChart

當前已支持的圖表類型有十種以上,說明以下

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

聯繫方式

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

*

待辦清單

  • [x] 支持圖形加載完成後用戶添加代理事件
  • [x] 支持圖形動態刷新全局內容
  • [x] 支持圖形動態刷新純數據(series)內容
  • [x] 支持色彩圖層漸變效果
  • [x] 支持橫屏(全屏)效果
  • [x] 支持自由設置圖形渲染動畫
  • [x] 支持用戶自由配置AAOptions模型對象屬性
  • [x] 支持圖形堆疊
  • [x] 支持圖形座標軸反轉
  • [x] 支持渲染散點圖
  • [x] 支持渲染柱形範圍圖
  • [x] 支持渲染面積範圍圖
  • [x] 支持渲染面積範圍均線圖
  • [x] 支持渲染極地圖
  • [x] 支持渲染折線直方圖
  • [x] 支持渲染折線直方填充圖
  • [ ] 支持渲染矩形樹狀層級關係圖
  • [ ] 支持渲染活動刻度儀表圖
  • [ ] 支持爲圖形添加點擊事件回調
  • [ ] 支持圖形實時刷新純數據並動態滾動
  • [ ] 支持已渲染圖形生成圖片文件
  • [ ] 支持生成圖片文件保存至系統相冊
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程