HelloCharts-android 之饼状图的使用

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 之饼状图的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。