HelloCharts 框架之餅狀圖的簡單使用，以及屬性介紹

hellocharts 地址：https://github.com/lecho/hell...
hellocharts是一個(gè)非常好用的第三方圖表庫，性能比較好，體驗(yàn)效果也很好，所以決定記錄下使用過程中用到的屬性，慢慢熟悉以后可以自定義新的功能和樣式

1、項(xiàng)目的依賴

//工程build.gradle中添加 repositories {maven {url "https://jitpack.io"}}//moudle 中的build.gradle中添加dependencies {compile 'com.github.lecho:hellocharts-android:v1.5.8'}

2、添加PieChart的xml
//當(dāng)然也可以通過java代碼的方式添加，這里就不寫了

<lecho.lib.hellocharts.view.PieChartViewandroid:id="@+id/pie_chart"android:layout_width="match_parent"android:layout_height="wrap_content" />

3、初始化PieChartView并且設(shè)置數(shù)據(jù)和屬性

最簡單的步驟： //先創(chuàng)造點(diǎn)數(shù)據(jù)List<SliceValue> values=new ArrayList<>();SliceValue sliceValue=new SliceValue(占比,顏色);SliceValue sliceValue1=new SliceValue(占比,顏色);SliceValue sliceValue2=new SliceValue(占比,顏色);...values.add(sliceValue);values.add(sliceValue1);values.add(sliceValue2); //創(chuàng)建數(shù)據(jù)模型PieChartData data=new PieChartData(values); //設(shè)置數(shù)據(jù)的一些屬性以及圖表的一堆。 data.set...... //這里設(shè)置的是數(shù)據(jù)類的一堆設(shè)置 pieChartView.set.......//設(shè)置控件的一堆屬性 //給圖表設(shè)置數(shù)據(jù)---就完了 mPieChartView.setPieChartData(mPieChartData); //設(shè)置數(shù)據(jù) //再設(shè)置個(gè)監(jiān)聽

正常使用步驟：

//找到控件 PieChartView mPieChartView = findViewById(R.id.pie_chart);//設(shè)置數(shù)據(jù)和屬性//設(shè)置餅狀圖的數(shù)據(jù)private void setPieDatas() {int numValues = 6; //把一張餅切成6塊List<SliceValue> values = new ArrayList<>();for (int i = 0; i < numValues; i++) {//設(shè)置每一塊的大小和顏色SliceValue sliceValue = new SliceValue((float) Math.random() * 30 + 15, ChartUtils.pickColor());values.add(sliceValue);}//設(shè)置相關(guān)屬性餅狀圖的數(shù)據(jù)類mPieChartData = new PieChartData(values); //餅狀圖的數(shù)據(jù)類mPieChartData.setHasLabels(true); //是否有標(biāo)簽，，默認(rèn)在內(nèi)部mPieChartData.setHasLabelsOnlyForSelected(false); //是否設(shè)置選中時(shí)是否有標(biāo)簽mPieChartData.setHasLabelsOutside(true); //是否設(shè)置標(biāo)簽在外部mPieChartData.setHasCenterCircle(false); // 是否有中心圓環(huán)mPieChartData.setCenterCircleScale(0.4f);//設(shè)置中心環(huán)的大小mPieChartData.setSlicesSpacing(0); //設(shè)置分離間距--//設(shè)置中心文本，，必須有中心圓環(huán)時(shí)設(shè)置mPieChartData.setCenterText1("單行文本");//設(shè)置單行文本//設(shè)置雙行文本，必須有單行以后才能設(shè)置雙行mPieChartData.setCenterText2("雙行文本"); //設(shè)置雙行文本mPieChartData.setCenterText1FontSize(18);//設(shè)置字體，盡量不要設(shè)置。。這里是直接讀取的assets文件夾下的數(shù)據(jù)Typeface tf = Typeface.createFromAsset(this.getAssets(), "Roboto-Italic.ttf");mPieChartData.setCenterText2Typeface(tf);mPieChartData.setCenterText2FontSize(ChartUtils.px2sp(getResources().getDisplayMetrics().scaledDensity,(int) getResources().getDimension(R.dimen.pie_chart_double_text_size)));//設(shè)置控件相關(guān)mPieChartView.setPieChartData(mPieChartData); //設(shè)置數(shù)據(jù)mPieChartView.setValueSelectionEnabled(true); //設(shè)置是否能選中mPieChartView.startDataAnimation(); //設(shè)置動(dòng)畫mPieChartView.setCircleFillRatio(0.8f);//設(shè)置餅狀圖占整個(gè)view的比例mPieChartView.setViewportCalculationEnabled(true);//設(shè)置餅圖自動(dòng)適應(yīng)大小mPieChartView.setChartRotationEnabled(true);//設(shè)置餅圖是否可以手動(dòng)旋轉(zhuǎn)}

4、設(shè)置事件的監(jiān)聽

//點(diǎn)擊事件監(jiān)聽public class ValueTouchListener implements PieChartOnValueSelectListener{@Override //如果設(shè)置為能選中，選中時(shí)走此方法，如果設(shè)置為不能選中，點(diǎn)擊時(shí)走此方法public void onValueSelected(int i, SliceValue value) {Toast.makeText(PieChartActivity.this, "當(dāng)前選中塊約占: " + (int) value.getValue() + " %", Toast.LENGTH_SHORT).show();}@Override //能選中，取消選中時(shí)調(diào)用； 不能選中： 不走此方法public void onValueDeselected() {Toast.makeText(PieChartActivity.this,"當(dāng)前塊取消選中",Toast.LENGTH_LONG).show();}}最后：//在這里設(shè)置監(jiān)聽mPieChartView.setOnValueTouchListener(new ValueTouchListener());

5、最后貼一下整個(gè)類的代碼

import android.graphics.Typeface; import android.view.View; import android.widget.Toast; import com.example.hellochartsdemo.R; import com.example.hellochartsdemo.base.BaseActivity; import java.util.ArrayList; import java.util.List; import lecho.lib.hellocharts.listener.PieChartOnValueSelectListener; import lecho.lib.hellocharts.model.PieChartData; import lecho.lib.hellocharts.model.SliceValue; import lecho.lib.hellocharts.util.ChartUtils; import lecho.lib.hellocharts.view.PieChartView;/*** 餅狀圖Activity* Created by Michael on 2018/3/13.*/public class PieChartActivity extends BaseActivity {private PieChartView mPieChartView; //聲明餅狀圖private PieChartData mPieChartData; //餅狀圖數(shù)據(jù)private static final String TAG = "PieChartActivity";//獲取布局id@Overridepublic int getLayoutId() {return R.layout.pie_chart_layout;}//初始化布局@Overridepublic void initView() {mPieChartView = findViewById(R.id.pie_chart);}//初始化數(shù)據(jù)@Overridepublic void initData() {setPieDatas();//設(shè)置數(shù)據(jù)}@Overridepublic void initListener() {//在這里設(shè)置監(jiān)聽mPieChartView.setOnValueTouchListener(new ValueTouchListener());}@Overridepublic void processClick(View v) {//其他view的點(diǎn)擊事件}//設(shè)置餅狀圖的數(shù)據(jù)private void setPieDatas() {int numValues = 6; //把一張餅切成6塊List<SliceValue> values = new ArrayList<>();for (int i = 0; i < numValues; i++) {//設(shè)置每一塊的大小和顏色SliceValue sliceValue = new SliceValue((float) Math.random() * 30 + 15, ChartUtils.pickColor());values.add(sliceValue);}//設(shè)置相關(guān)屬性餅狀圖的數(shù)據(jù)類mPieChartData = new PieChartData(values); //餅狀圖的數(shù)據(jù)類mPieChartData.setHasLabels(true); //是否有標(biāo)簽，，默認(rèn)在內(nèi)部mPieChartData.setHasLabelsOnlyForSelected(false); //是否設(shè)置選中時(shí)是否有標(biāo)簽mPieChartData.setHasLabelsOutside(true); //是否設(shè)置標(biāo)簽在外部mPieChartData.setHasCenterCircle(false); // 是否有中心圓環(huán)mPieChartData.setCenterCircleScale(0.4f);//設(shè)置中心環(huán)的大小mPieChartData.setSlicesSpacing(0); //設(shè)置分離間距--//設(shè)置中心文本，，必須有中心圓環(huán)時(shí)設(shè)置mPieChartData.setCenterText1("單行文本");//設(shè)置單行文本//設(shè)置雙行文本，必須有單行以后才能設(shè)置雙行mPieChartData.setCenterText2("雙行文本"); //設(shè)置雙行文本mPieChartData.setCenterText1FontSize(18);//設(shè)置字體，盡量不要設(shè)置。。這里是直接讀取的assets文件夾下的數(shù)據(jù)Typeface tf = Typeface.createFromAsset(this.getAssets(), "Roboto-Italic.ttf");mPieChartData.setCenterText2Typeface(tf);mPieChartData.setCenterText2FontSize(ChartUtils.px2sp(getResources().getDisplayMetrics().scaledDensity,(int) getResources().getDimension(R.dimen.pie_chart_double_text_size)));//設(shè)置控件相關(guān)mPieChartView.setPieChartData(mPieChartData); //設(shè)置數(shù)據(jù)mPieChartView.setValueSelectionEnabled(true); //設(shè)置是否能選中mPieChartView.startDataAnimation(); //設(shè)置動(dòng)畫mPieChartView.setCircleFillRatio(0.8f);//設(shè)置餅狀圖占整個(gè)view的比例mPieChartView.setViewportCalculationEnabled(true);//設(shè)置餅圖自動(dòng)適應(yīng)大小mPieChartView.setChartRotationEnabled(true);//設(shè)置餅圖是否可以手動(dòng)旋轉(zhuǎn)}//點(diǎn)擊事件監(jiān)聽public class ValueTouchListener implements PieChartOnValueSelectListener {@Override //如果設(shè)置為能選中，選中時(shí)走此方法，如果設(shè)置為不能選中，點(diǎn)擊時(shí)走此方法public void onValueSelected(int i, SliceValue value) {Toast.makeText(PieChartActivity.this, "當(dāng)前選中塊約占: " + (int) value.getValue() + " %", Toast.LENGTH_SHORT).show();}@Override //能選中，取消選中時(shí)調(diào)用； 不能選中： 不走此方法public void onValueDeselected() {Toast.makeText(PieChartActivity.this, "當(dāng)前塊取消選中", Toast.LENGTH_LONG).show();}} }

6、總結(jié)下餅狀圖

餅狀圖與其他圖表不同的是，餅狀圖并沒有軸，也不支持縮放。為了更好的顯示效果，餅狀圖的布局寬高應(yīng)相等。

SliceValue

餅狀圖中“扇形”的數(shù)據(jù)模型。
setValue(float value)：設(shè)置值
setColor(int color)：設(shè)置顏色
setSliceSpacing(int sliceSpacing)
setLabel(String label)：設(shè)置標(biāo)簽

PieChartData
餅狀圖的數(shù)據(jù)模型

setValues(List<SliceValue> values) //設(shè)置數(shù)據(jù) setHasLabels(true); //是否有標(biāo)簽，，默認(rèn)在內(nèi)部 setHasLabelsOnlyForSelected(false); //是否設(shè)置選中時(shí)是否有標(biāo)簽setHasLabelsOutside(true); //是否設(shè)置標(biāo)簽在外部 setHasCenterCircle(false); // 是否有中心圓環(huán) setCenterCircleScale(0.4f);//設(shè)置中心環(huán)的大小 setSlicesSpacing(0); //設(shè)置分離間距-- //設(shè)置中心文本，，必須有中心圓環(huán)時(shí)設(shè)置 setCenterText1("單行文本");//設(shè)置單行文本 //設(shè)置雙行文本，必須有單行以后才能設(shè)置雙行 setCenterText2("雙行文本"); //設(shè)置雙行文本 setCenterText1FontSize(18); //設(shè)置字體，盡量不要設(shè)置。。這里是直接讀取的assets文件夾下的數(shù)據(jù) Typeface tf = Typeface.createFromAsset(this.getAssets(), "Roboto-Italic.ttf");mPieChartData.setCenterText2Typeface(tf); setCenterText2FontSize(ChartUtils.px2sp(getResources().getDisplayMetrics().scaledDensity,(int) getResources().getDimension(R.dimen.pie_chart_double_text_size)));

PieChartView //餅狀圖控件

setPieChartData(PieChartData data) //設(shè)置數(shù)據(jù)模型 setOnValueTouchListener(PieChartOnValueSelectListener touchListener) //選中或者點(diǎn)擊監(jiān)聽 setChartRotation(int rotation, boolean isAnimated)：設(shè)置餅狀圖旋轉(zhuǎn)的角度 setChartRotationEnabled(boolean isRotationEnabled)：設(shè)置餅狀圖是否可以通過滑動(dòng)來旋轉(zhuǎn) setCircleFillRatio(float fillRatio)：設(shè)置餅狀圖占用控件的比例，取值范圍0-1。默認(rèn)值為1，表示餅狀圖盡可能地占滿整個(gè)控件。 //還有 setValueTouchEnabled(false);//設(shè)置是否可以點(diǎn)擊圖表上的值，默認(rèn)true setInteractive(true);//設(shè)置是否可以交互,默認(rèn)為true setValueSelectionEnabled(false);//是否可以選中，默認(rèn)是false setViewportCalculationEnabled(true);//設(shè)置餅圖 自適應(yīng)大小 startDataAnimation();//設(shè)置數(shù)據(jù)改變時(shí)的動(dòng)畫

圖表的使用比較簡單，屬性很多，沒有一一列出來，但是，知道這些其他的屬性猜一下也就知道了。后續(xù)會(huì)持續(xù)添加餅狀圖的高級(jí)用法。

總結(jié)

以上是生活随笔為你收集整理的HelloCharts-android 之饼状图的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。