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

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

1、項目的依賴

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

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

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

3、初始化PieChartView并且設置數據和屬性

最簡單的步驟： //先創造點數據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); //創建數據模型PieChartData data=new PieChartData(values); //設置數據的一些屬性以及圖表的一堆。 data.set...... //這里設置的是數據類的一堆設置 pieChartView.set.......//設置控件的一堆屬性 //給圖表設置數據---就完了 mPieChartView.setPieChartData(mPieChartData); //設置數據 //再設置個監聽

正常使用步驟：

//找到控件 PieChartView mPieChartView = findViewById(R.id.pie_chart);//設置數據和屬性//設置餅狀圖的數據private void setPieDatas() {int numValues = 6; //把一張餅切成6塊List<SliceValue> values = new ArrayList<>();for (int i = 0; i < numValues; i++) {//設置每一塊的大小和顏色SliceValue sliceValue = new SliceValue((float) Math.random() * 30 + 15, ChartUtils.pickColor());values.add(sliceValue);}//設置相關屬性餅狀圖的數據類mPieChartData = new PieChartData(values); //餅狀圖的數據類mPieChartData.setHasLabels(true); //是否有標簽，，默認在內部mPieChartData.setHasLabelsOnlyForSelected(false); //是否設置選中時是否有標簽mPieChartData.setHasLabelsOutside(true); //是否設置標簽在外部mPieChartData.setHasCenterCircle(false); // 是否有中心圓環mPieChartData.setCenterCircleScale(0.4f);//設置中心環的大小mPieChartData.setSlicesSpacing(0); //設置分離間距--//設置中心文本，，必須有中心圓環時設置mPieChartData.setCenterText1("單行文本");//設置單行文本//設置雙行文本，必須有單行以后才能設置雙行mPieChartData.setCenterText2("雙行文本"); //設置雙行文本mPieChartData.setCenterText1FontSize(18);//設置字體，盡量不要設置。。這里是直接讀取的assets文件夾下的數據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)));//設置控件相關mPieChartView.setPieChartData(mPieChartData); //設置數據mPieChartView.setValueSelectionEnabled(true); //設置是否能選中mPieChartView.startDataAnimation(); //設置動畫mPieChartView.setCircleFillRatio(0.8f);//設置餅狀圖占整個view的比例mPieChartView.setViewportCalculationEnabled(true);//設置餅圖自動適應大小mPieChartView.setChartRotationEnabled(true);//設置餅圖是否可以手動旋轉}

4、設置事件的監聽

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

5、最后貼一下整個類的代碼

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; //餅狀圖數據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);}//初始化數據@Overridepublic void initData() {setPieDatas();//設置數據}@Overridepublic void initListener() {//在這里設置監聽mPieChartView.setOnValueTouchListener(new ValueTouchListener());}@Overridepublic void processClick(View v) {//其他view的點擊事件}//設置餅狀圖的數據private void setPieDatas() {int numValues = 6; //把一張餅切成6塊List<SliceValue> values = new ArrayList<>();for (int i = 0; i < numValues; i++) {//設置每一塊的大小和顏色SliceValue sliceValue = new SliceValue((float) Math.random() * 30 + 15, ChartUtils.pickColor());values.add(sliceValue);}//設置相關屬性餅狀圖的數據類mPieChartData = new PieChartData(values); //餅狀圖的數據類mPieChartData.setHasLabels(true); //是否有標簽，，默認在內部mPieChartData.setHasLabelsOnlyForSelected(false); //是否設置選中時是否有標簽mPieChartData.setHasLabelsOutside(true); //是否設置標簽在外部mPieChartData.setHasCenterCircle(false); // 是否有中心圓環mPieChartData.setCenterCircleScale(0.4f);//設置中心環的大小mPieChartData.setSlicesSpacing(0); //設置分離間距--//設置中心文本，，必須有中心圓環時設置mPieChartData.setCenterText1("單行文本");//設置單行文本//設置雙行文本，必須有單行以后才能設置雙行mPieChartData.setCenterText2("雙行文本"); //設置雙行文本mPieChartData.setCenterText1FontSize(18);//設置字體，盡量不要設置。。這里是直接讀取的assets文件夾下的數據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)));//設置控件相關mPieChartView.setPieChartData(mPieChartData); //設置數據mPieChartView.setValueSelectionEnabled(true); //設置是否能選中mPieChartView.startDataAnimation(); //設置動畫mPieChartView.setCircleFillRatio(0.8f);//設置餅狀圖占整個view的比例mPieChartView.setViewportCalculationEnabled(true);//設置餅圖自動適應大小mPieChartView.setChartRotationEnabled(true);//設置餅圖是否可以手動旋轉}//點擊事件監聽public class ValueTouchListener implements PieChartOnValueSelectListener {@Override //如果設置為能選中，選中時走此方法，如果設置為不能選中，點擊時走此方法public void onValueSelected(int i, SliceValue value) {Toast.makeText(PieChartActivity.this, "當前選中塊約占: " + (int) value.getValue() + " %", Toast.LENGTH_SHORT).show();}@Override //能選中，取消選中時調用； 不能選中： 不走此方法public void onValueDeselected() {Toast.makeText(PieChartActivity.this, "當前塊取消選中", Toast.LENGTH_LONG).show();}} }

6、總結下餅狀圖

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

SliceValue

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

PieChartData
餅狀圖的數據模型

setValues(List<SliceValue> values) //設置數據 setHasLabels(true); //是否有標簽，，默認在內部 setHasLabelsOnlyForSelected(false); //是否設置選中時是否有標簽setHasLabelsOutside(true); //是否設置標簽在外部 setHasCenterCircle(false); // 是否有中心圓環 setCenterCircleScale(0.4f);//設置中心環的大小 setSlicesSpacing(0); //設置分離間距-- //設置中心文本，，必須有中心圓環時設置 setCenterText1("單行文本");//設置單行文本 //設置雙行文本，必須有單行以后才能設置雙行 setCenterText2("雙行文本"); //設置雙行文本 setCenterText1FontSize(18); //設置字體，盡量不要設置。。這里是直接讀取的assets文件夾下的數據 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) //設置數據模型 setOnValueTouchListener(PieChartOnValueSelectListener touchListener) //選中或者點擊監聽 setChartRotation(int rotation, boolean isAnimated)：設置餅狀圖旋轉的角度 setChartRotationEnabled(boolean isRotationEnabled)：設置餅狀圖是否可以通過滑動來旋轉 setCircleFillRatio(float fillRatio)：設置餅狀圖占用控件的比例，取值范圍0-1。默認值為1，表示餅狀圖盡可能地占滿整個控件。 //還有 setValueTouchEnabled(false);//設置是否可以點擊圖表上的值，默認true setInteractive(true);//設置是否可以交互,默認為true setValueSelectionEnabled(false);//是否可以選中，默認是false setViewportCalculationEnabled(true);//設置餅圖 自適應大小 startDataAnimation();//設置數據改變時的動畫

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。