一個(gè)酷炫的Android圖表制作框架
一、概述
最近項(xiàng)目中需要制作柱形圖以及折線圖,所以便在網(wǎng)上搜索了一下這方面的開源框架,最后找到了這個(gè)酷炫的框架,不僅支持各種各樣的圖形制作,包括折線圖、柱形圖、餅狀圖等,而且提供了豐富的API接口,等著你去自定義,只要花點(diǎn)心思便能 DIY 出你心儀的圖表類型,使用起來也是相當(dāng)?shù)暮唵巍?/p>
從效果圖可以看到,這個(gè)框架是相當(dāng)酷炫的啊,在這里附上該框架的github地址hellocharts-android,有興趣的不妨去 star 一下
二、炫酷的柱形圖
可以看到柱形圖也是能玩出花樣來的,絢麗的色彩,自定義的橫縱軸單位以及靈活的數(shù)值變化,無疑是相當(dāng)吸引眼球的,就讓我們來看看怎么實(shí)現(xiàn)這些效果吧
1、最常見的柱形圖
因?yàn)檫@個(gè)框架中各式各樣的效果實(shí)在太多,如果全部都寫的話,一篇博客實(shí)在是寫不了,所以就通過實(shí)現(xiàn)一個(gè)常見的柱形圖,以點(diǎn)帶面,希望能對(duì)大家掌握這個(gè)框架的使用有一定的幫助。
(1) 布局的實(shí)現(xiàn)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingLeft="20dp" android:paddingRight="20dp" > <lecho.lib.hellocharts.view.ColumnChartView android:id="@+id/column_chart_cc" android:layout_width="match_parent" android:layout_height="300dp" android:layout_gravity="center" android:layout_centerInParent="true" /> </RelativeLayout>
可以看到直接將我們需要的控件放在我們想要的位置就行了,我們要實(shí)現(xiàn)的是柱形圖,對(duì)應(yīng)的便是ColumnChartView,這里附上一份控件對(duì)應(yīng)的效果
(2) Activity中主要的代碼
public class ColumnChartActivity extends AppCompatActivity { private ColumnChartView mColumnChartCc; private ColumnChartData data; // 柱形圖對(duì)應(yīng)的各種屬性 private boolean hasAxes = true; // 是否要添加橫縱軸的屬性 private boolean hasAxesNames = true; // 是否設(shè)置橫縱軸的名字 private boolean hasLabels = false; // 是否顯示柱形圖的數(shù)據(jù) private boolean hasLabelForSelected = false; // 是否點(diǎn)中顯示數(shù)據(jù) @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_column); mColumnChartCc = (ColumnChartView) findViewById(R.id.column_chart_cc); mColumnChartCc.setOnValueTouchListener(new ValueTouchListener()); generateSubcolumnsData(); } private void generateSubcolumnsData() { int numSubcolumns = 1; int numColumns = 4; // 表示總共有四根柱子 List<Column> columns = new ArrayList<Column>(); List<SubcolumnValue> values; // 柱子的屬性 List<AxisValue> axisValueList = new ArrayList<>(); Float[] floats = {30f, 5f, 50f, 15f}; // 包含柱形圖的數(shù)值的數(shù)組 String[] selecedNames = {"選項(xiàng)一", "選項(xiàng)二", "選項(xiàng)三", "選項(xiàng)四"}; // 包含柱子的名稱的數(shù)組 for (int i = 0; i < numColumns; ++i) { values = new ArrayList<SubcolumnValue>(); values.add(new SubcolumnValue(floats[i], ChartUtils.pickColor())); // 將柱子的數(shù)據(jù)以及顏色設(shè)置給 SubcolumnValue axisValueList.add(new AxisValue(i).setLabel(selecedNames[i])); Column column = new Column(values); // 設(shè)置整根柱子的屬性 column.setHasLabels(hasLabels); // 是否顯示柱子的數(shù)據(jù) column.setHasLabelsOnlyForSelected(hasLabelForSelected); // 是否選中顯示數(shù)據(jù),一般為false columns.add(column); } data = new ColumnChartData(columns); data.setAxisXBottom(new Axis(axisValueList)); // 設(shè)置 Y 軸的屬性 data.setAxisYLeft(new Axis()); // 設(shè)置 X 軸的屬性 mColumnChartCc.setColumnChartData(data); // 將數(shù)據(jù)設(shè)置給顯示柱形圖的控件 } }
先定義一些我們后面需要用到的屬性,在onCreate進(jìn)行布局的初始化,可以看到我們想要實(shí)現(xiàn)的效果都封裝在 generateSubcolumnsData 這個(gè)方法中,這個(gè)方法主要實(shí)現(xiàn)了這幾個(gè)方面的設(shè)置
- 先設(shè)定我們總共要多少根柱子
- 通過遍歷,將各根柱子的數(shù)值、顏色以及對(duì)應(yīng)的名稱進(jìn)行設(shè)置
- 最后設(shè)置橫縱軸的數(shù)值以及名稱
除了以上操作之外,還有其他比較好看的效果,比如雙擊放大柱形圖、設(shè)置網(wǎng)狀的背景、點(diǎn)擊柱子跳出我們想要顯示的內(nèi)容,這些我們都可以方便地進(jìn)行定義
(3) 比較常用的API和屬性
以上便是這篇博客的所有內(nèi)容,最后附上柱形圖的源代碼HelloChartDemo,有興趣的可以去下載,如果覺得對(duì)你有點(diǎn)幫助的話,就賞個(gè)star吧。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android Viewpager實(shí)現(xiàn)輪播廣告圖
這篇文章主要為大家詳細(xì)介紹了Android Viewpager實(shí)現(xiàn)輪播廣告圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05Android實(shí)現(xiàn)簡易計(jì)算器(可以實(shí)現(xiàn)連續(xù)計(jì)算)
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡易計(jì)算器,可以實(shí)現(xiàn)連續(xù)計(jì)算,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03Android控件之使用ListView實(shí)現(xiàn)時(shí)間軸效果
這篇文章主要介紹了Android基礎(chǔ)控件之使用ListView實(shí)現(xiàn)時(shí)間軸效果的相關(guān)資料,本文是以查看物流信息為例,給大家介紹了listview時(shí)間軸的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-11-11MPAndroidChart 自定義圖表繪制使用實(shí)例
這篇文章主要為大家介紹了MPAndroidChart 自定義圖表繪制使用實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Android編程之簡單計(jì)時(shí)器實(shí)現(xiàn)方法
這篇文章主要介紹了Android編程之簡單計(jì)時(shí)器實(shí)現(xiàn)方法,涉及Android開發(fā)中ContextMenu及Chronometer的相關(guān)使用技巧,需要的朋友可以參考下2016-01-01Android實(shí)現(xiàn)炫酷的網(wǎng)絡(luò)直播彈幕功能
這篇文章主要為大家詳細(xì)介紹了Android仿網(wǎng)絡(luò)直播彈幕功能的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11android獲取照片的快照 思路及實(shí)現(xiàn)方法
android獲取照片的快照 思路及實(shí)現(xiàn)方法,需要的朋友可以參考一下2013-06-06