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.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();//设置数据改变时的动画

HelloCharts-android 之饼状图的使用

HelloCharts 框架之饼状图的简单使用，以及属性介绍

1、项目的依赖

正常使用步骤：

4、设置事件的监听

5、最后贴一下整个类的代码

6、总结下饼状图

图表的使用比较简单，属性很多，没有一一列出来，但是，知道这些其他的属性猜一下也就知道了。后续会持续添加饼状图的高级用法。

杨旭

引用和评论

json序列化和反序列化

如何使用JavaScript开发AR(增强现实)移动应用 (一)

使用JavaScript调用手机平台上的原生API

如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）

通过Java代码实现图片的放大和缩小

只要200行JavaScript代码，就能把特斯拉汽车带到您身边

如何使用Java代码给图片增加倒影效果