一图胜千文,纯粹的数据枯燥、无聊,让人看不下去,改变一下形式,用图表装饰一下,立马有趣多了。既然有这样的外部需求,Android世界里肯定要有图表库才行,今天解析的就是其中最强大的一个MPAndroidChart。
GitHub地址:https://github.com/PhilJay/MPAndroidChart
核心功能
- 支持以下图表:
- 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轴缩放
- 支持拖拽
- 支持手指滑动
- 支持高亮显示
- 支持保存图表到文件中
- 支持从文件(txt)中读取数据
- 预先定义颜色模板
- 自动生成标注
- 支持自定义x,y轴的显示标签
- 支持x,y轴动画
- 支持x,y轴设置最大值和附加信息
- 支持自定义字体,颜色,背景,手势,虚线等
集成和使用
总共有四种方式集成,推荐直接用Gradle依赖
- 在project根目录的build.gradle添加中央库地址
allprojects { repositories { maven { url "https://jitpack.io" } } }
-
在项目
build.gradle
中添加相关依赖:dependencies { compile 'com.github.PhilJay:MPAndroidChart:v3.0.0-beta1' }
-
在xml文件定义图表类型,比如
LineChart, BarChart, ScatterChart, CandleStickChart, PieChart, BubbleChart or RadarChart
<com.github.mikephil.charting.charts.LineChart android:id="@+id/chart1" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/seekBar1" />
-
基础设置
mChart = (LineChart) findViewById(R.id.chart1); mChart.setOnChartGestureListener(this); mChart.setOnChartValueSelectedListener(this); mChart.setDrawGridBackground(false); // no description text mChart.setDescription(""); mChart.setNoDataTextDescription("You need to provide data for the chart."); // enable touch gestures mChart.setTouchEnabled(true); // enable scaling and dragging mChart.setDragEnabled(true); mChart.setScaleEnabled(true); // mChart.setScaleXEnabled(true); // mChart.setScaleYEnabled(true); // if disabled, scaling can be done on x- and y-axis separately mChart.setPinchZoom(true); // set an alternative background color // mChart.setBackgroundColor(Color.GRAY); // create a custom MarkerView (extend MarkerView) and specify the layout // to use for it MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view); // set the marker to the chart mChart.setMarkerView(mv);
-
设置数据源:各种图表的数据不太一致,对于LineChart而言,就是一系列的(x,y)
/** * 设置模拟数据 * @param count 模拟的个数 * @param range 数据的范围 */ private void setData(int count, float range) { ArrayList<Entry> values = new ArrayList<Entry>(); for (int i = 0; i < count; i++) { float val = (float) (Math.random() * range) + 3; values.add(new Entry(i, val)); } LineDataSet set1; if (mChart.getData() != null && mChart.getData().getDataSetCount() > 0) { set1 = (LineDataSet)mChart.getData().getDataSetByIndex(0); set1.setValues(values); mChart.getData().notifyDataChanged(); mChart.notifyDataSetChanged(); } else { // create a dataset and give it a type set1 = new LineDataSet(values, "DataSet 1"); // set the line to be drawn like this "- - - - - -" set1.enableDashedLine(10f, 5f, 0f); set1.enableDashedHighlightLine(10f, 5f, 0f); set1.setColor(Color.BLACK); set1.setCircleColor(Color.BLACK); set1.setLineWidth(1f); set1.setCircleRadius(3f); set1.setDrawCircleHole(false); set1.setValueTextSize(9f); set1.setDrawFilled(true); if (Utils.getSDKInt() >= 18) { // fill drawable only supported on api level 18 and above Drawable drawable = ContextCompat.getDrawable(this, R.drawable.fade_red); set1.setFillDrawable(drawable); } else { set1.setFillColor(Color.BLACK); } ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>(); dataSets.add(set1); // add the datasets // create a data object with the datasets LineData data = new LineData(dataSets); // set data mChart.setData(data); } }
此处源码,参考Demo中的LineChartActivity1
最后样式如下:
Demo概览
Demo提供32个样例:
- Line Chart:演示一个简单的线图
- Line Chart (Dual YAxis):演示一个有两个Y轴线图
- Bar Chart:演示一个柱状图
- Horizontal Bar Chart:演示水平柱状图,即X轴和Y轴反过来。
- Combined Chart:演示 线图、柱状图、蜡烛图、气泡图 如何叠加在一起显示
- Pie Chart:演示简易饼状图
- Pie Chart with value lines:演示带数据线的饼状图
- Scatter Chart:演示了 圆点、方点、斜线 这三种样式的散点图
- Bubble Chart: 演示了不同颜色的气泡图。
- Stacked Bar Chart: 演示了堆积条形图
- Stacked Bar Chart Negative:演示了有负数数值的堆积条形图
- Another Bar Chart:只在底部显示值的柱状图。
- Multiple Lines Chart:3条线图混合在一起,用颜色和实线、虚线来区分
- Multiple Bars Chart:不同年份、不同公司的数据组成的柱状图
- Charts in ViewPager Fragments:结合ViewPager、Fragment,透过左右滑动查看不同的图表。
- BarChart inside ListView:柱状图如何嵌入在ListView中
- Multiple charts inside ListView:不同类型的图表如何嵌入在ListView中
- Inverted Line Chart:演示(0,0)在左上角的线图
- Candle Stick Chart: 演示蜡烛图
- Cubic Line Chart:演示 立方拟合的折线图
- Radar Chart:演示雷达图
- Colored Line Chart:在不同背景色上演示同一张线图
- Realtime Chart:实时产生数据,进行演示。
- Dynamical data adding:实时产生数据集和数据,进行演示。
- Performance Line Chart:用30000个数据来测试性能。
- Sinus Bar Chart:演示正弦柱状图。
- Chart in ScrollView:演示如何把图表放在ScrollView中。
- BarChart positive / negative:演示有负值的柱状图。
- Realm.io Database:演示如何从Realm数据库中获取数据进行展示(里面有9个案例)。
- Time Chart:演示时间图。
- Filled LineChart:演示如何填满两条线图中间的部分。
- Half PieChart:演示一个半圆的饼状图。
参考:
Panda
2016-08-03