HelloCharts-android 之饼状图的使用

C_PlusPlus
• 阅读 6613

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

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

点赞
收藏
评论区
推荐文章
Stella981 Stella981
3年前
LiveCharts 折线图,柱状图,饼状图基本绑定实现(WPF)
总体效果如图:!(https://oscimg.oschina.net/oscnet/up58f9191b9676bd703a8230c9b0c4c59935d.png)1.折线图的简单绑定此处对折线图的横坐标坐标与时间进行绑定 !(https://oscimg.oschina.net/oscnet/up1634ffdb
Easter79 Easter79
3年前
vue+element+echarts饼状图+可折叠列表
html:<divid"echartsDiv"style"width:48%;height:430px;float:left;"</div<divid"tableDiv"style"width:52%;float:left;"<eltable:d
Wesley13 Wesley13
3年前
java 柱状图、折线图、饼状图
1.绘制柱状图://BarChartTool工具类代码packageGUIview;importHibernateTool.HibernateTools;importProductClass.Featureandfreq;importorg.hibernate.Criteria;
小尉迟 小尉迟
2年前
Mac大扫除!这些App帮你迅速清理不需要的内容,释放宝贵空间
又该整理硬盘、删除多余文件了!这些App能帮你迅速清理不需要的内容,释放宝贵的空间。这款App会用饼状图展示你硬盘中的所有内容,让你一眼发现视频和安装文件等占据空间的大块头在“饼”上占的面积越大,对应的文件或文件夹自然就越大。接下来,就层层剥开文件夹,把不
Stella981 Stella981
3年前
SVG绘制饼状图
SVG绘制饼状图昨天学习了基本的SVG,下面是使用SVG绘制饼状图创建SVG空间创建SVG需要一个document.createElementNS()方法一个一个setAttribute()方法编写如下js,将会创建一个svg空间//创建一个XML命名空间varsvgns"http:
Stella981 Stella981
3年前
ECharts入门一
ECharts入门一来源于官方网站整理(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fecharts.baidu.com%2Ftutorial.html)完整的一个饼状图网页可运行源码1<!DOCTYPEhtml2<html
Easter79 Easter79
3年前
SVG绘制饼状图
SVG绘制饼状图昨天学习了基本的SVG,下面是使用SVG绘制饼状图创建SVG空间创建SVG需要一个document.createElementNS()方法一个一个setAttribute()方法编写如下js,将会创建一个svg空间//创建一个XML命名空间varsvgns"http:
Stella981 Stella981
3年前
Matplotlib 饼状图中的文字中文乱码问题
今天用matplotlib画饼状图时候遇到中文乱码,一般遇到中文乱码有两种通用的解决方法,一种是修改matplotlibrc,通过修改matplotlibrc中的font.sansserif添加中文,一种是直接在代码中通过rcParams修改字体,既然遇到乱码当然先用传统方法试试,代码如下:!(http://static.oschina.n
Wesley13 Wesley13
3年前
Java报表之JFreeChart
一、JFreeChart简介  JFreeChart是JAVA平台上的一个开放的图表绘制类库。它完全使用JAVA语言编写,是为applications,servlets以及JSP等使用所设计。  JFreeChart可生成饼图(piecharts)、柱状图(barcharts)、散点图(scatterplots)
Stella981 Stella981
3年前
ECharts 实现3D嵌套饼图
   嵌套饼图的实现主要是定义多层数据,实际上只需要写成json格式的数组,多层数据源之间用逗号连接起来,自定义样式之后就可以实现,与非嵌套饼图没有很大的区别。1.下载Echarts插件,官网地址:http://echarts.baidu.com/download.html(https://www.oschina.net/action/GoTo
Stella981 Stella981
3年前
Android一个包含表格的图标库
之前有写过一个图表lib,但是开发的速度,大多很难跟上产品需求变化的脚步,所以修改了下原先的图表库,支持图表下面能整合table显示对应的类目,用曲线替换了折线,支持多曲线的显示,增加了显示的动画,,增加了一些可定制的属性,支持水平柱状图和叠加柱状图,以及多曲线图和饼状图的显示1.效果图!image(https://oscim