安卓饼状图设置软件_HelloCharts-android 之饼状图的使用

齐元章
2023-12-01

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代码的方式添加,这里就不写了

android:id="@+id/pie_chart"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

3、初始化PieChartView并且设置数据和属性

最简单的步骤:

//先创造点数据

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

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

 类似资料: