Android图标库之SmallChart
SmallChart是一个开源的Android图表库，拥有5种不同的图表类型来展示数据。可以通过输入的数据以及可设置的颜色、画笔大小等属性方便的创建图表。
Github地址：https://github.com/Idtk/SmallChart
先来看看效果图吧~
SmallChart有以下几个特征：
l 折线图、曲线图(可填充)、柱状图、扇形图、雷达图，共5种图表类型。
l 组合图表类型，可任意组合折线图、曲线图、柱状图。
l 折线图、曲线图(可填充)、柱状图、扇形图都拥有绘制动画。
l 扇形图提供了触控交互效果。
引用方式有三种：
1. 通过Gradle引用
首先，我们需要在项目路径下的build.gradle文件中添加repository
allprojects {
repositories{
...
maven { url"https://jitpack.io" }
}
}
然后，需要在app文件里的build.gradle文件中添加依赖
dependencies {
compile 'com.github.Idtk:SmallChart:v0.1.1'
}
2. 通过Maven引用
<dependency>
<groupId>com.github.Idtk</groupId>
<artifactId>SmallChart</artifactId>
<version>v0.1.1</version>
</dependency>
3. 通过导入module方式引用
使用这种方式的时候一定不要忘了，两个module的SDK版本要保持一致
一、 我们需要定义一个BaseFragment用来存放图标的数据
public class BaseFragment extends Fragment{
protected float[][] points = new float[][]{{1, 10}, {2, 47}, {3, 11}, {4, 38}, {5, 9}, {6, 52}, {7, 14}, {8, 37}, {9, 29},
{10, 31}};
protected float[][] points2= new float[][]{{1, 52}, {2, 13}, {3, 51}, {4, 20}, {5, 19}, {6, 20}, {7, 54}, {8, 7}, {9, 19},
{10, 41}};
protected int[] mColors= {0xFFCCFF00, 0xFF6495ED, 0xFFE32636, 0xFF800000, 0xFF808000, 0xFFFF8C69, 0xFF808080,
0xFFE6B800, 0xFF7CFC00};
protected float pxTodp(float value) {
DisplayMetrics metrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
float valueDP =TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value,metrics);
return valueDP;
}
}
二、 曲线图
public class CurveChartFragment extends BaseFragment { private ArrayList<ICurveData> mDataList = new ArrayList<>(); private CurveData mCurveData = new CurveData(); private ArrayList<PointF> mPointFArrayList = new ArrayList<>(); @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_curvechart, container, false); CurveChart curveChart = (CurveChart) view.findViewById(R.id.curvechart); initData(); curveChart.setDataList(mDataList); return view; } private void initData() { for (int i = 0; i < 8; i++) { mPointFArrayList.add(new PointF(points[i][0], points[i][1])); } mCurveData.setValue(mPointFArrayList); mCurveData.setColor(Color.RED); Drawable drawable = ContextCompat.getDrawable(getContext(), R.drawable.fade_red); mCurveData.setDrawable(drawable); mCurveData.setPointShape(PointShape.SOLIDROUND); mCurveData.setPaintWidth(pxTodp(3)); mCurveData.setTextSize(pxTodp(10)); mDataList.add(mCurveData); } }
三、 柱状图
public class BarChartFragment extends BaseFragment { private ArrayList<IBarData> mDataList = new ArrayList<>(); private BarData mBarData = new BarData(); private ArrayList<PointF> mPointFList = new ArrayList<>(); @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_barchart, container, false); BarChart barChart = (BarChart) view.findViewById(R.id.barChart); initData(); barChart.setDataList(mDataList); barChart.setXAxisUnit("X单位"); barChart.setYAxisUnit("Y单位"); return view; } private void initData() { for (int i = 0; i < 8; i++) { mPointFList.add(new PointF(points[i][0], points[i][1])); } mBarData.setValue(mPointFList); mBarData.setColor(Color.CYAN); mBarData.setPaintWidth(pxTodp(5)); mBarData.setTextSize(pxTodp(10)); mDataList.add(mBarData); } }
四、 折线图
public class LineChartFragment extends BaseFragment { private LineData mLineData = new LineData(); private ArrayList<ILineData> mDataList = new ArrayList<>(); private ArrayList<PointF> mPointFArrayList = new ArrayList<>(); @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_linechart, container, false); initData(); LineChart lineChart = (LineChart) view.findViewById(R.id.linechart); lineChart.setDataList(mDataList); return view; } private void initData() { for (int i = 0; i < 8; i++) { mPointFArrayList.add(new PointF(points[i][0], points[i][1])); } mLineData.setValue(mPointFArrayList); mLineData.setColor(Color.MAGENTA); mLineData.setPaintWidth(pxTodp(3)); mLineData.setTextSize(pxTodp(10)); mDataList.add(mLineData); } }
五、 组合图
public class CombineChartFragment extends BaseFragment { private CurveData mCurveData = new CurveData(); private ArrayList<PointF> mPointFArrayList1 = new ArrayList<>(); private LineData mLineData = new LineData(); private ArrayList<PointF> mPointFArrayList2 = new ArrayList<>(); private BarData mBarData = new BarData(); private ArrayList<PointF> mPointFArrayList3 = new ArrayList<>(); private ArrayList<IBarLineCurveData> mDatasList = new ArrayList<>(); @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_combinechart, container, false); initData(); CombineChart combineChart = (CombineChart) view.findViewById(R.id.combinechart); combineChart.isAnimated = false; combineChart.setDataList(mDatasList); return view; } private void initData() { for (int i = 0; i < 8; i++) { mPointFArrayList3.add(new PointF(points[i][0], points[i][1])); mPointFArrayList2.add(new PointF(points[i][0], points[i][1] - 5)); mPointFArrayList1.add(new PointF(points[i][0], points[i][1] + 10)); } mBarData.setValue(mPointFArrayList3); mBarData.setColor(Color.CYAN); mBarData.setPaintWidth(pxTodp(5)); mBarData.setTextSize(pxTodp(10)); mDatasList.add(mBarData); mLineData.setValue(mPointFArrayList2); mLineData.setColor(Color.MAGENTA); mLineData.setPaintWidth(pxTodp(3)); mLineData.setTextSize(pxTodp(10)); mDatasList.add(mLineData); mCurveData.setValue(mPointFArrayList1); mCurveData.setColor(Color.YELLOW); mCurveData.setPaintWidth(pxTodp(3)); mCurveData.setTextSize(pxTodp(10)); mDatasList.add(mCurveData); } }
六、 扇形图
public class PieChartFragment extends BaseFragment { private ArrayList<IPieData> mPieDataList = new ArrayList<>(); @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_piechart, container, false); initData(); PieChart pieChart = (PieChart) view.findViewById(R.id.piechart); pieChart.setDataList(mPieDataList); pieChart.setAxisColor(Color.WHITE); pieChart.setAxisTextSize(pxTodp(20)); return view; } private void initData() { for (int i = 0; i < 9; i++) { PieData pieData = new PieData(); pieData.setName("区域" + i); pieData.setValue((float) i + 1); pieData.setColor(mColors[i]); mPieDataList.add(pieData); } } }
七、 雷达图
public class RadarChartFragment extends BaseFragment { private RadarData mRadarData = new RadarData(); private RadarData mRadarData2 = new RadarData(); private ArrayList<IRadarData> radarDatasList = new ArrayList<>(); private ArrayList<Float> radarValue = new ArrayList<>(); private ArrayList<Float> radarValue2 = new ArrayList<>(); @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_radarchart, container, false); initData(); RadarChart radarChart = (RadarChart) view.findViewById(R.id.radarchart); radarChart.setDataList(radarDatasList); radarChart.setTypes(new String[]{"Party A", "Party B", "Party C", "Party D", "Party E", "Party F", "Party G", "Party H"}); return view; } private void initData(){ for (int i=0;i<8;i++){ radarValue.add(points[i][1]); radarValue2.add(points2[i][1]); } mRadarData.setValue(radarValue); mRadarData.setColor(Color.MAGENTA); mRadarData.setPaintWidth(pxTodp(3)); mRadarData2.setValue(radarValue2); mRadarData2.setColor(Color.CYAN); mRadarData2.setPaintWidth(pxTodp(3)); radarDatasList.add(mRadarData); radarDatasList.add(mRadarData2); } }
八、 MainActivity源码如下：
public class MainActivity extends AppCompatActivity { private FrameLayout chartFragments; private TabLayout topTabs; private Fragment barChartFragment, lineChartFragment, curveChartFragment, combineChartFragment, radarChartFragment, pieChartFragment; private FragmentTransaction fragmentTransaction; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { chartFragments = (FrameLayout) findViewById(R.id.chart_fragments); topTabs = (TabLayout) findViewById(R.id.top_tabs); topTabs.setTabMode(TabLayout.MODE_SCROLLABLE); topTabs.setTabGravity(TabLayout.GRAVITY_FILL); topTabs.addTab(topTabs.newTab().setText("曲线图"), 0); topTabs.addTab(topTabs.newTab().setText("柱状图"), 1); topTabs.addTab(topTabs.newTab().setText("折线图"), 2); topTabs.addTab(topTabs.newTab().setText("组合图"), 3); topTabs.addTab(topTabs.newTab().setText("环形图"), 4); topTabs.addTab(topTabs.newTab().setText("雷达图"), 5); topTabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { FragmentManager manager = getSupportFragmentManager(); fragmentTransaction = getSupportFragmentManager().beginTransaction(); hideFragment(fragmentTransaction); switch (tab.getPosition()) { case 0: curveChartFragment = manager.findFragmentByTag("Tag0"); if (curveChartFragment == null) { curveChartFragment = new CurveChartFragment(); fragmentTransaction.add(R.id.chart_fragments, curveChartFragment, "Tag0"); } else { fragmentTransaction.show(curveChartFragment); } break; case 1: barChartFragment = manager.findFragmentByTag("Tag1"); if (barChartFragment == null) { barChartFragment = new BarChartFragment(); fragmentTransaction.add(R.id.chart_fragments, barChartFragment, "Tag1"); } else { fragmentTransaction.show(barChartFragment); } break; case 2: lineChartFragment = manager.findFragmentByTag("Tag2"); if (lineChartFragment == null) { lineChartFragment = new LineChartFragment(); fragmentTransaction.add(R.id.chart_fragments, lineChartFragment, "Tag2"); } else { fragmentTransaction.show(lineChartFragment); } break; case 3: combineChartFragment = manager.findFragmentByTag("Tag3"); if (combineChartFragment == null) { combineChartFragment = new CombineChartFragment(); fragmentTransaction.add(R.id.chart_fragments, combineChartFragment, "Tag3"); } else { fragmentTransaction.show(combineChartFragment); } break; case 4: pieChartFragment = manager.findFragmentByTag("Tag4"); if (pieChartFragment == null) { pieChartFragment = new PieChartFragment(); fragmentTransaction.add(R.id.chart_fragments, pieChartFragment, "Tag4"); } else { fragmentTransaction.show(pieChartFragment); } break; case 5: radarChartFragment = manager.findFragmentByTag("Tag5"); if (radarChartFragment == null) { radarChartFragment = new RadarChartFragment(); fragmentTransaction.add(R.id.chart_fragments, radarChartFragment, "Tag5"); } else { fragmentTransaction.show(radarChartFragment); } break; } fragmentTransaction.commit(); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { fragmentTransaction.show(curveChartFragment); } }); topTabs.getTabAt(1).select(); topTabs.getTabAt(0).select(); } private void hideFragment(FragmentTransaction fragmentTransaction) { if (barChartFragment != null) { fragmentTransaction.hide(barChartFragment); } if (lineChartFragment != null) { fragmentTransaction.hide(lineChartFragment); } if (curveChartFragment != null) { fragmentTransaction.hide(curveChartFragment); } if (combineChartFragment != null) { fragmentTransaction.hide(combineChartFragment); } if (radarChartFragment != null) { fragmentTransaction.hide(radarChartFragment); } if (pieChartFragment != null) { fragmentTransaction.hide(pieChartFragment); } } }
九、 更加详细的使用方法请下载demo查看，地址：http://download.csdn.net/detail/zhimingshangyan/9591156