关于MPAndroidChart就不多说了,是一个开源的android图表库,包含折线图、柱状图、散点图、雷达图等等。最近项目需要使用雷达图,可以清晰的表达出每个维度的数据偏好,非常直观,决定采用MPAndroidChart这个开源库实现。
雷达图是RadarChart这个控件,我们需要先在layout中使用这个自定义控件,如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.github.mikephil.charting.charts.RadarChart
android:id="@+id/chart1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
然后在对应的Activity或Fragment中使用,下面将官方的例子拿过来,将对应的代码加入注释,方便自己以后用的时候看,也给需要的人一个参考,做个注释防止忘记。
package com.xxmassdeveloper.mpchartexample;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.WindowManager;
import android.widget.Toast;
import com.github.mikephil.charting.animation.Easing;
import com.github.mikephil.charting.charts.RadarChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.Legend.LegendPosition;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.DataSet;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.RadarData;
import com.github.mikephil.charting.data.RadarDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;
import com.xxmassdeveloper.mpchartexample.custom.MyMarkerView;
import com.xxmassdeveloper.mpchartexample.notimportant.DemoBase;
import java.util.ArrayList;
public class RadarChartActivitry extends DemoBase {
private RadarChart mChart;
private Typeface tf;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_radarchart);
mChart = (RadarChart) findViewById(R.id.chart1);
tf = Typeface.createFromAsset(getAssets(), "OpenSans-Regular.ttf");
// 描述,在底部
mChart.setDescription("我是描述");
// 绘制线条宽度,圆形向外辐射的线条
mChart.setWebLineWidth(1.5f);
// 内部线条宽度,外面的环状线条
mChart.setWebLineWidthInner(1.0f);
// 所有线条WebLine透明度
mChart.setWebAlpha(100);
// 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);
setData();
XAxis xAxis = mChart.getXAxis();
// X坐标值字体样式
xAxis.setTypeface(tf);
// X坐标值字体大小
xAxis.setTextSize(12f);
YAxis yAxis = mChart.getYAxis();
// Y坐标值字体样式
yAxis.setTypeface(tf);
// Y坐标值标签个数
yAxis.setLabelCount(6, false);
// Y坐标值字体大小
yAxis.setTextSize(15f);
// Y坐标值是否从0开始
yAxis.setStartAtZero(true);
Legend l = mChart.getLegend();
// 图例位置
l.setPosition(LegendPosition.LEFT_OF_CHART);
// 图例字体样式
l.setTypeface(tf);
// 图例X间距
l.setXEntrySpace(2f);
// 图例Y间距
l.setYEntrySpace(1f);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.radar, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
// 是否显示Y值
case R.id.actionToggleValues: {
for (DataSet<?> set : mChart.getData().getDataSets())
set.setDrawValues(!set.isDrawValuesEnabled());
mChart.invalidate();
break;
}
// 是否高亮,貌似没作用
case R.id.actionToggleHighlight: {
if (mChart.isHighlightEnabled())
mChart.setHighlightEnabled(false);
else
mChart.setHighlightEnabled(true);
mChart.invalidate();
break;
}
// 是否可以拖动旋转
case R.id.actionToggleRotate: {
if (mChart.isRotationEnabled())
mChart.setRotationEnabled(false);
else
mChart.setRotationEnabled(true);
mChart.invalidate();
break;
}
//Y值形成区域是否实心填充
case R.id.actionToggleFilled: {
ArrayList<RadarDataSet> sets = (ArrayList<RadarDataSet>) mChart.getData()
.getDataSets();
for (RadarDataSet set : sets) {
if (set.isDrawFilledEnabled())
set.setDrawFilled(false);
else
set.setDrawFilled(true);
}
mChart.invalidate();
break;
}
// 保存到SD
case R.id.actionSave: {
if (mChart.saveToPath("title" + System.currentTimeMillis(), "")) {
Toast.makeText(getApplicationContext(), "Saving SUCCESSFUL!",
Toast.LENGTH_SHORT).show();
} else
Toast.makeText(getApplicationContext(), "Saving FAILED!", Toast.LENGTH_SHORT)
.show();
break;
}
// 是否关闭X坐标值
case R.id.actionToggleXLabels: {
mChart.getXAxis().setEnabled(!mChart.getXAxis().isEnabled());
mChart.notifyDataSetChanged();
mChart.invalidate();
break;
}
// 是否关闭Y坐标值
case R.id.actionToggleYLabels: {
mChart.getYAxis().setEnabled(!mChart.getYAxis().isEnabled());
mChart.invalidate();
break;
}
// 旋转动画
case R.id.actionToggleSpin: {
mChart.spin(2000, mChart.getRotationAngle(), mChart.getRotationAngle() + 360, Easing.EasingOption.EaseInCubic);
break;
}
}
return true;
}
private String[] mParties = new String[] {
"Party A", "Party B", "Party C", "Party D", "Party E", "Party F", "Party G", "Party H",
"Party I"
};
public void setData() {
float mult = 150;
int cnt = 9; // 不同的维度Party A、B、C...总个数
// Y的值,数据填充
ArrayList<Entry> yVals1 = new ArrayList<Entry>();
ArrayList<Entry> yVals2 = new ArrayList<Entry>();
// IMPORTANT: In a PieChart, no values (Entry) should have the same
// xIndex (even if from different DataSets), since no values can be
// drawn above each other.
for (int i = 0; i < cnt; i++) {
yVals1.add(new Entry((float) (Math.random() * mult) + mult / 2, i));
}
for (int i = 0; i < cnt; i++) {
yVals2.add(new Entry((float) (Math.random() * mult) + mult / 2, i));
}
// Party A、B、C..
ArrayList<String> xVals = new ArrayList<String>();
for (int i = 0; i < cnt; i++)
xVals.add(mParties[i % mParties.length]);
RadarDataSet set1 = new RadarDataSet(yVals1, "Set 1");
// Y数据颜色设置
set1.setColor(ColorTemplate.VORDIPLOM_COLORS[0]);
// 是否实心填充区域
set1.setDrawFilled(true);
// 数据线条宽度
set1.setLineWidth(2f);
RadarDataSet set2 = new RadarDataSet(yVals2, "Set 2");
set2.setColor(ColorTemplate.VORDIPLOM_COLORS[4]);
set2.setDrawFilled(true);
set2.setLineWidth(2f);
ArrayList<RadarDataSet> sets = new ArrayList<RadarDataSet>();
sets.add(set1);
sets.add(set2);
RadarData data = new RadarData(xVals, sets);
// 数据字体样式
data.setValueTypeface(tf);
// 数据字体大小
data.setValueTextSize(8f);
// 是否绘制Y值到图表
data.setDrawValues(true);
mChart.setData(data);
mChart.invalidate();
}
}
截图是酱紫:
DEMO下载(官方DEMO,使用的时候将对应Library引用即可):