解析Android上强大的图表库MPAndroidChart,的坐标换

作者:计算机知识

做计算图时,日常会有像这种类型的必要:x 坐标要求换行展现,日和月大概是月和年供给分两行展现。但是找遍 MPAndroidChart 的各个学科,好像也一向不有关的秘技能够兑现......

MPAndroidChart是后生可畏款基于Android的开源图表库,MPAndroidChart不只能够在Android设备上制图各个总括图表,况兼能够对图纸举行拖动和缩放操作,应用起来极度灵活。和前边介绍的AChartEngine相比较,MPAndroidChart显得越发轻易和省略,MPAndroidChart相同持有常用的图样类型:线型图、饼图、柱状图和散点图。

图片 1条形图和线形图的组合图

一、描述

</br>

重在介绍一下这些库的应用方法

以 LineChart 为例,大家想要的效果与利益是相仿这样子的:

MPAndroidChart效果图

图片 2

图片 3

图片 4

图片 5

风度翩翩图胜千文,纯粹的数据枯燥、无聊,令人看不下去,改换一下情势,用图片装饰一下,立马有意思多了。既然有诸有此类的表面要求,Android世界里肯定要有图表库才行,前几日禀析的便是内部最有力的三个MPAndroidChart。

二、遭遇陈设

MPAndroidChart

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

dependencies { compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'}

图片 6

MPAndroidChart使用方法

此处大家举个例子绘制二个饼图,步骤如下:

XML构造代码

<com.github.mikephil.charting.charts.PieChart
android:id=”@ id/spread_pie_chart”
android:layout_width=”match_parent”
android:layout_解析Android上强大的图表库MPAndroidChart,的坐标换行。height=”320dip” />

初叶化饼图

ColorTemplate mCt;
mCt = new ColorTemplate();
mCt.addDataSetColors(ColorTemplate.PASTEL_COLORS, this);
mChart = (PieChart) headView.findViewById(R.id.spread_pie_chart);
mChart.setColorTemplate(mCt);
mChart.setDescription(“”);
mChart.setHoleRadius(30f);
mChart.setTransparentCircleRadius(0f);
mChart.setCenterTextSize(18f);
mChart.setDrawXValues(true);
mChart.setUsePercentValues(true);
mChart.setDrawLegend(false);
// space between slices
mChart.setSliceSpace(1f);
mChart.setDrawHoleEnabled(false);
mChart.setTouchEnabled(false);

绑定图表数据

ArrayList yVals = new ArrayList();
ArrayList xVals = new ArrayList();
for (int i = 0; i < listDatas.size(); i  ) {
    yVals.add(new Entry((float)listDatas.get(i).getProvinceCount(), i));
    xVals.add(listDatas.get(i).getProvinceName());
}
DataSet set1 = new DataSet(yVals, "Content");
ArrayList dataSets = new ArrayList();
dataSets.add(set1);
ChartData data = new ChartData(xVals, dataSets);
mChart.setData(data);

对此简易的Android图表须求,MPAndroidChart能够很好的消除,无妨大家能够试生机勃勃试。

GitHub地址:

二、使用验证

</br>

饼图:

图片 7

//设置对应的数据和颜色值
initChart(new float[]{5f, 15f}, new Integer[]{Color.parseColor("#3BA6F5"), Color.parseColor("#AC804F")});

/**
     * 描述:指定数据集合和颜色集合,显示对应的饼图
     * values : 多个占有的值,
     * colors : 对应值的颜色
     * 作者:卜俊文
     * 邮箱:344176791@qq.com
     * 日期:17/1/8 下午5:21
     */
    private void initChart(float[] values, Integer[] colors) {
        mPieChart.setExtraOffsets(5, 10, 5, 5);
        mPieChart.setUsePercentValues(false); //设置是否显示百分比

        //设置不显示默认右下角的文字
        Description description = new Description();
        description.setEnabled(false);
        mPieChart.setDescription(description);
        //设置中间是否空心
        mPieChart.setDrawHoleEnabled(false);
        // 设置滑动减速摩擦系数
        mPieChart.setDragDecelerationFrictionCoef(0.95f);
        // 设置旋转角度   ??
        mPieChart.setRotationAngle(0);
        mPieChart.setRotationEnabled(true);
        mPieChart.setHighlightPerTapEnabled(true); //设置饼图是否可点击放大
        //设置饼图的数据,添加占1.0中多少的数值,比如1,就传入0.5f
        List<PieEntry> data = new ArrayList<>();
        float sum = 0;
        for (float value : values) {
            sum  = value;
        }
        for (float value : values) {
            data.add(new PieEntry(value / sum));
        }
        //添加对应的颜色值
        List<Integer> colorSum = new ArrayList<>();
        for (Integer color : colors) {
            colorSum.add(color);
        }
        //设置数据
        setData(data, colorSum);
        // 设置动画
        mPieChart.animateY(1400, Easing.EasingOption.EaseOutQuad);
        // 关闭了对应饼图的颜色说明
        mPieChart.getLegend().setEnabled(false); //关闭默认设置的颜色对应图形
    }

    public void setData(List<PieEntry> yVals1, List<Integer> colors) {
        PieDataSet dataSet = new PieDataSet(yVals1, "Election Results");
        // 设置饼图区块之间的距离
        dataSet.setSliceSpace(2f);
        dataSet.setSelectionShift(5f);
        // 添加颜色
        dataSet.setColors(colors);

        PieData data1 = new PieData(dataSet);
        data1.setValueFormatter(new PercentFormatter());
        data1.setValueTextSize(10f);
        data1.setValueTextColor(Color.parseColor("#00000000"));//这里直接设置透明的颜色了
        mPieChart.setData(data1);
        // undo all highlights
        mPieChart.highlightValues(null);
        mPieChart.invalidate();
    }

率先,MPAndroidChart 确实是不曾提供订正坐标换行呈现的诀要。在看那篇随笔在此以前,你也许已经尝试过达成二个ValueFormatter,也许是 "rn" 那样的挣扎,开掘并不曾什么样卵用。但就是真给您换行了,怎么样居中,如何设置两行不一致字体也是难点。

  • 帮忙以下图表:
    • Line Chart
    • Bar Chart(条形图,又称柱状图)
    • Combined Chart(组合图:线性 条形)
    • Pie Chart
    • Scatter Chart
    • Bubble Chart
    • Stacked Bar Chart
    • Candle Stick Chart
    • Cubic Line Chart
    • Radar Chart
    • Realtime Chart
    • Sinus Bar Chart
  • 支撑以下操作和安装:
    • 支持x,y轴缩放
    • 支撑拖拽
    • 支撑手指滑动
    • 支撑高亮呈现
    • 支撑保存图表到文件中
    • 支撑从文件中读取数据
    • 事前定义颜色模板
    • 自动生成注脚
    • 支撑自定义x,y轴的来得标签
    • 支持x,y轴动画
    • 帮助x,y轴设置最大值和叠合音信
    • 支撑自定义字体,颜色,背景,手势,虚线等

四、总结

假诺项目有模糊的话,就投入上边那句话,不然打包后不曾动漫

-keep class com.github.mikephil.charting.** { *; }     # 确保MPAndroidChart加载动画可用

招待关怀自个儿的Wechat群众号,分享越来越多技巧文章。

图片 8

怎么做?看一下源码吧。看看设进去的数码是怎么样体现出来的。

一齐有两种办法集成,推荐直接用Gradle信任

大家是那样来设置坐标轴要展现的开始和结果的:

  1. 在project根目录的build.gradle增加中心库地址
LineData data = new LineData(xValues, dataSets);mChart.setData;mChart.invalidate();

接着 setData 方法进源码,一路经过 Chart,BarLineChartBase,最后来到了 XAxisRenderer 这么些类,大家的 xValues 被赋值给了它的 mXAxis。然后,好像就从未然后了......

allprojects { repositories { maven { url "https://jitpack.io" } }}

非日常,别忘了大家 setData 之后还调用了 invalidate 方法央浼重绘,重绘会去调用 Chart 的 onDraw 方法。再看看世袭 Chart 的 BarLineChartBase,它的 onDraw 方法里涌出了这一句:

  1. 在项目build.gradle中加多相关信赖:
 this.mXAxisRenderer.renderGridLines;

以为离真相越来越近了。大家再跟着那个点子进来,见到里面调用了 drawLabels 方法,然后 drawLabels 又调用了 drawLabel 方法,最后大家过来了此处:

dependencies { compile 'com.github.PhilJay:MPAndroidChart:v3.0.0-beta1'}

本文由bwin必赢发布,转载请注明来源

关键词: 强大 坐标 图表 换行 简单