条形图和线形图的组合图
一图胜千文，纯粹的数据枯燥、无聊，让人看不下去，改变一下形式，用图表装饰一下，立马有趣多了。既然有这样的外部需求，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
- 基础设置
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 values = new ArrayList();
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 dataSets = new ArrayList();
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：演示一个半圆的饼状图。
参考：
- zhuanghongji·MPAndroidChart 图表库的API练习
- android开源图表库MPAndroidChart
Panda
2016-08-03