文档章节

Android饼图 PieChart

ccMagic
 ccMagic
发布于 07/18 20:44
字数 849
阅读 25
收藏 0

PieChart

饼图,android 图表。会根据定义PieChartView的大小自动居中,所以如果要调整位置,只需要在xml更改PieChartView位置大小即可。

https://github.com/ccMagic/PieChart

1、先看一下效果图:

https://github.com/ccMagic/PieChart/raw/master/pictures/device-2019-07-18-193046-min.gif

可能gif加载过慢,可以看下: https://github.com/ccMagic/PieChart/raw/master/pictures/%E6%B7%B1%E5%BA%A6%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20190718200229.png

2、使用方式

示例:

 <com.github.ccmagic.piechartlib.PieChartView
        android:id="@+id/pieChartView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorPrimaryDark"
        android:padding="10dp"
        app:pie_chart_mark_line_color="@android:color/white"
        app:pie_chart_mark_text_color="@android:color/white"
        app:pie_chart_mark_text_size="10dp"
        app:pie_chart_max_spacing="3dp"
        app:pie_chart_show_max_part_first="false"
        app:pie_chart_start_angle="-180" />

定义的属性:

  <declare-styleable name="PieChartView">
        <!--最大的饼图是否显示在左上角第一个-->
        <attr name="pie_chart_show_max_part_first" format="boolean" />
        <!--起始绘制角度,-180~+180-->
        <attr name="pie_chart_start_angle" format="float" />
        <!--最大扇区与其他整体的偏移量-->
        <attr name="pie_chart_max_spacing" format="dimension" />
        <!--第一根标注引线的长度-->
        <attr name="pie_chart_mark_line_one_length" format="dimension" />
        <!--第二根标注引线的长度-->
        <attr name="pie_chart_mark_line_two_length" format="dimension" />
        <!--标注引线的颜色-->
        <attr name="pie_chart_mark_line_color" format="color" />
        <!--标注文本大小-->
        <attr name="pie_chart_mark_text_size" format="dimension" />
        <!--标注文本颜色-->
        <attr name="pie_chart_mark_text_color" format="color" />
    </declare-styleable>
public class MainActivity extends AppCompatActivity {
    private PieChartView pieChartView;
    private Random random = new Random();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //
        pieChartView = findViewById(R.id.pieChartView);
    }

    /**
     * 点击update按钮开始绘制,每次随机数更换数值
     */
    public void updateClick(View view) {
        ArrayList<PieChartView.Part> list = new ArrayList<>();
        //这里用随机数配置份儿,只是写入对应的值就行,会根据所有添加的数据进行百分比配置
        list.add(new PieChartView.Part("Lollipop", random.nextInt(100) + 1, Color.RED));
        list.add(new PieChartView.Part("Marshmallow", random.nextInt(100) + 1, Color.BLUE));
        list.add(new PieChartView.Part("Froyo", random.nextInt(100) + 1, Color.YELLOW));
        list.add(new PieChartView.Part("Gingerbread", random.nextInt(100) + 1, Color.GREEN));
        list.add(new PieChartView.Part("Ice Cream Sandwich", random.nextInt(100) + 1, Color.WHITE));
        list.add(new PieChartView.Part("Jelly Bean", random.nextInt(100) + 1, Color.MAGENTA));
        list.add(new PieChartView.Part("KitKat", random.nextInt(100) + 1, Color.LTGRAY));
        pieChartView.setPartsData(list);
    }
}

3、代码原理解析

a、PieChartView.Part构造函数

/**
         * @param name 扇形区域名称
         * @param num  扇形区域配置,不用特别按360或100整额处理
         *             因为最终会设置的每个值来调配百分比
         * @param name 扇形区域颜色
         */
        public Part(String name, int num, @ColorInt int color) {
            this.name = name;
            if (num <= 0) {
                throw new IllegalArgumentException("num <= 0 is illegal");
            }
            this.num = num;
            this.color = color;
        }

b、配额算法

  float sum = 0;
......
        for (int i = 0, size = mPartList.size(); i < size; i++) {
            .......
            //计算所有Part的总和,后面用于根据百分比划分整个圆
            sum = sum + part.num;
        }
.....
    //单个扇形配额,这里用扇形的角度(整个饼图为360度)
    part.sweepAngle = part.num / sum * 360;

c、最大扇形突出显示原理

根据设置pie_chart_max_spacing属性的值,再结合扇形区域在饼图中的开始和结束角度,用三角函数分别计算x、y偏移量绘制。

详见源码。

d、引线绘制原理

  1. 先确定每个扇形区域的中心角度,根据三角函数找到坐标,确定绘制起点坐标;
  2. 引线第一部分根据pie_chart_mark_line_one_length的值结合三角函数确定结束位置点坐标;
  3. 第2步的结束位置点坐标,则为引线第二部分的开始绘制点坐标;
  4. 在根据三角函数确定引线第二部分的角度和长度从而确定结束绘制点坐标
  5. 文本绘制方向都是从左到用,根据引线第二部分的结束绘制点坐标,以及文本长度确定绘制文本位置。

详情请看源码。

持续更新...

© 著作权归作者所有

ccMagic
粉丝 0
博文 14
码字总数 4484
作品 0
合肥
程序员
私信 提问
【安卓深度控件开发(1.4)】Creating Custom Views (官方示例文档汉化版)(4)

视图的优化 您现在有一个精心设计的视图,响应手势和平滑过渡,现在需要确保视图流畅。为了避免一个 UI 在播放过程中感觉缓慢或断断续续,您必须确保您的动画始终运行在每秒 60 帧。 少量的频...

夜狼
2013/03/25
238
0
LWUIT + ChartComponent 之一实现饼图(PieChart)

本文来自http://blog.csdn.net/hellogv/ 本文源代码下载地址:http://download.csdn.net/source/872671 本文所用的Chart组件为J2me ChartComponent - ver 1.5.2,该组件的下载页面为http://...

晨曦之光
2012/03/14
139
0
跨平台开发框架DevExtreme发布v17.2.8|附下载

DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动、Web开发框架,可以直接在Visual Studio集成开发环境,构建iOS,Android,Tizen和Windows Phone 8应用程序。D...

Miss_Hello_World
2018/05/22
13
0
如何在graphael的条形图中显示图例?

如题。最近在使用最新版DWZ中集成的gRaphael画条形图,有好几条线,所以需要显示图注,但查看 官方文档发现只有piechart提供了图注功能而barchart和piechart没有提供,求助大家有何解决方案。...

bigtiger02
2013/10/28
435
2
图表生成工具 - openhandx chart

OpenHandx-chart核心采用了jfreechart,并集成了jfreechart的主要功能。虽然jfreechart的功能很强大,但使用起来也非常复杂。OpenHandx-chart通过xml配置文件或构造config类实例就能生成图表...

辛巴8
2018/04/17
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部