• <Android 应用 之路> MPAndroidChart~PieChart


    简介

    MPAndroidChart是PhilJay大神给Android开发者带来的福利。MPAndroidChart是一个功能强大并且使用灵活的图表开源库,支持Android和IOS两种,这里我们暂时只关注Android版本。

    Wiki

    https://github.com/PhilJay/MPAndroidChart/wiki

    Javadoc

    https://jitpack.io/com/github/PhilJay/MPAndroidChart/v3.0.0-beta1/javadoc/

    今日之图~PieChart

    先看下效果压压惊,右边的图为左边的图横向拉伸后的效果
    这里写图片描述

    实际静态效果,上面那个是因为加了动画,录制Gif的时候不小心弄成了一直旋转的效果

    这里写图片描述 这里写图片描述

    布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="mapdemo.example.com.mpandroidchartdemo.MainActivity">
    
        <com.github.mikephil.charting.charts.PieChart
            android:id="@+id/piechart"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Hello World!" />
    </RelativeLayout>

    对于Chart,可以采用布局文件添加方式,也可以采用代码添加方式。

    代码

    public class MainActivity extends AppCompatActivity {
        @Bind(R.id.piechart)
        PieChart piechart;
    
        private Random random;//用于产生随机数字
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            ButterKnife.bind(this);
            random = new Random();
            initPieChart();//初始化饼图
        }
    
        private void initPieChart() {
            ArrayList<Entry> yVals = new ArrayList<>(); //值坐标
            ArrayList<String> xVals = new ArrayList<>();//对应的Lable,可以理解成X轴
            for (int i = 0; i < 5; i++) {
                xVals.add((i + 1) + "月");
                yVals.add(new BarEntry(random.nextInt(10000), i));
            }
            PieDataSet pieDataSet = new PieDataSet(yVals, "小明每月支出");//创建饼图的一个数据集
            pieDataSet.setColors(ColorTemplate.COLORFUL_COLORS); //设置成丰富多彩的颜色
            DisplayMetrics metrics = getResources().getDisplayMetrics();
            float px = 10 * (metrics.densityDpi / 160f);
            pieDataSet.setSelectionShift(px);  //点击后延伸出来的长度
    
            PieData piedata = new PieData(xVals, pieDataSet);//生成PieData
    
            piechart.setData(piedata);//给PieChart填充数据
            piechart.getLegend().setPosition(Legend.LegendPosition.ABOVE_CHART_LEFT);
            piechart.getLegend().setForm(Legend.LegendForm.CIRCLE);//设置注解的位置和形状
            piechart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {//设置值选择时的Listener
                @Override
                public void onValueSelected(Entry entry, int i, Highlight highlight) {
                    Toast.makeText(MainActivity.this, "Something selected value = " + entry.getVal(), Toast.LENGTH_SHORT).show();//单纯地显示一个Toast
                }
                @Override
                public void onNothingSelected() {
                }
            });
    
            piechart.setCenterText("收支明细");//中间写的文字
            piechart.setCenterTextColor(Color.RED);//设置中间文字的颜色
            piechart.setCenterTextRadiusPercent(0.5f);//设置文字显示的角度,180横着,默认是竖着
            piechart.setCenterTextSize(12f);//设置中心文字的字体大小
            piechart.setCenterTextTypeface(null);//设置字体
            piechart.setDrawCenterText(true);//中心字使能开关,false时中间无法显示文字
    
            piechart.setTransparentCircleAlpha(100);//透明圈的透明度,分3圈,一个是外面的值,然后是这个,然后就是下面的那个Hole
            piechart.setTransparentCircleColor(Color.RED); //设置颜色
            piechart.setTransparentCircleRadius(50f);//设置半径
    
            piechart.setDrawHoleEnabled(true);//基本同上
            piechart.setHoleColor(Color.GREEN);
            piechart.setHoleRadius(30f);
    
            piechart.setDescription("No Deal");//设置描述文字
            piechart.setDescriptionTextSize(20.f);//设置描述文字的字体
            piechart.animateXY(1000, 1000);
        }
    }

    值选择时的事件处理
    上面的例子中其实已经有了

            piechart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {//设置值选择时的Listener
                @Override
                public void onValueSelected(Entry entry, int i, Highlight highlight) {
                    Toast.makeText(MainActivity.this, "Something selected value = " + entry.getVal(), Toast.LENGTH_SHORT).show();//单纯地显示一个Toast
                }
                @Override
                public void onNothingSelected() {
                }
            });
    

    选中和啥都没干的回调,利用这个回调我们可以做一些跳转操作,比如从国家级报表,跳转到省级,然后市级 and so on.

  • 相关阅读:
    27款经典的 CSS 框架分享
    50款非常棒的 jQuery 插件分享
    10个和 Flash 一样的 HTML5 应用演示
    Ajax 应用六个需要注意的事项
    推荐12个漂亮的 CSS3 按钮实现方案
    8个惊艳的JavaScript 为 HTML5 Canvas 提供硬件3D加速渲染应用实验
    向网页设计师推荐15个很棒的网站
    2011年度最佳 JQuery 插件分享
    javascript 技巧总结积累173231条(正在积累中)
    [转]烦人的BeforePropertieBeforeProperties,AfterProperties,properties.ListItem
  • 原文地址:https://www.cnblogs.com/lanzhi/p/6467174.html
Copyright © 2020-2023  润新知