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