HelloCharts 框架之饼状图的简单使用，以及属性介绍
hellocharts 地址：https://github.com/lecho/hellocharts-android
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.PieChartView
android: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
@Override
public int getLayoutId() {
return R.layout.pie_chart_layout;
}
//初始化布局
@Override
public void initView() {
mPieChartView = findViewById(R.id.pie_chart);
}
//初始化数据
@Override
public void initData() {
setPieDatas();//设置数据
}
@Override
public void initListener() {
//在这里设置监听
mPieChartView.setOnValueTouchListener(new ValueTouchListener());
}
@Override
public 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();//设置数据改变时的动画
扫一扫
700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
