Android繪圖機(jī)制（四）-使用HelloCharts開源框架搭建一系列炫酷圖表柱形圖折線圖餅狀圖和動畫特效抽絲剝繭帶你認(rèn)識圖表之美

Android繪圖機(jī)制（四）——使用HelloCharts開源框架搭建一系列炫酷圖表，柱形圖，折線圖，餅狀圖和動畫特效，抽絲剝繭帶你認(rèn)識圖表之美一.官方截圖二.項(xiàng)目架構(gòu)這里我們首先來看一下我排版的思維導(dǎo)圖然后跳轉(zhuǎn)一個(gè)Activity@OverridepublicvoidonItemClick(AdapterView<?>adapter,Viewview,intposition,longid){Intentintent;switch(position){case0://LineChart;intent=newIntent(getActivity(),LineChartActivity.class);startActivity(intent);break;case1://ColumnChart;intent=newIntent(getActivity(),ColumnChartActivity.class);startActivity(intent);break;case2://PieChart;intent=newIntent(getActivity(),PieChartActivity.class);startActivity(intent);break;case3://BubbleChart;intent=newIntent(getActivity(),BubbleChartActivity.class);startActivity(intent);break;case4://PreviewLineChart;intent=newIntent(getActivity(),PreviewLineChartActivity.class);startActivity(intent);break;case5://PreviewColumnChart;intent=newIntent(getActivity(),PreviewColumnChartActivity.class);startActivity(intent);break;case6://ComboChart;intent=newIntent(getActivity(),ComboLineColumnChartActivity.class);startActivity(intent);break;case7://LineColumnDependency;intent=newIntent(getActivity(),LineColumnDependencyActivity.class);startActivity(intent);break;case8://Tempolinechart;intent=newIntent(getActivity(),TempoChartActivity.class);startActivity(intent);break;case9://Speedlinechart;intent=newIntent(getActivity(),SpeedChartActivity.class);startActivity(intent);break;case10://GoodBadfilledlinechart;intent=newIntent(getActivity(),GoodBadChartActivity.class);startActivity(intent);break;case11://GoodBadfilledlinechart;intent=newIntent(getActivity(),ViewPagerChartsActivity.class);startActivity(intent);break;default:break;}}Activity繼承的是FragmentActivity，我們在FragmentActivity內(nèi)部編寫一個(gè)Fragment這樣就可以綁定主Activity而不用繼承自View去多寫一個(gè)類了publicstaticclassPlaceholderFragmentextendsFragment所以你看到的項(xiàng)目也是非常簡潔的項(xiàng)目只有一個(gè)主Activity——MainActivity和一個(gè)關(guān)于軟件的AboutActivity，然后就是十二個(gè)對應(yīng)的類了好了，我們可以編寫了三，實(shí)現(xiàn)圖標(biāo)1.折線圖從這里我們就可以看出，其實(shí)圖表操作主要還是看menu菜單，所以，我們先實(shí)現(xiàn)我們fragment要綁定的布局fragment_line_chart<lecho.lib.hellocharts.view.LineChartViewandroid:id="@+id/chart"android:layout_width="match_parent"android:layout_height="match_parent"></lecho.lib.hellocharts.view.LineChartView>LineChartActivitypackagelecho.lib.hellocharts.samples;importjava.util.ArrayList;importjava.util.List;importlecho.lib.hellocharts.animation.ChartAnimationListener;importlecho.lib.hellocharts.gesture.ZoomType;importlecho.lib.hellocharts.listener.LineChartOnValueSelectListener;importlecho.lib.hellocharts.model.Axis;importlecho.lib.hellocharts.model.Line;importlecho.lib.hellocharts.model.LineChartData;importlecho.lib.hellocharts.model.PointValue;importlecho.lib.hellocharts.model.ValueShape;importlecho.lib.hellocharts.model.Viewport;importlecho.lib.hellocharts.util.ChartUtils;importlecho.lib.hellocharts.view.Chart;importlecho.lib.hellocharts.view.LineChartView;importandroid.os.Bundle;importandroid.support.v4.app.Fragment;importandroid.support.v4.app.FragmentActivity;importandroid.view.LayoutInflater;importandroid.view.Menu;importandroid.view.MenuInflater;importandroid.view.MenuItem;importandroid.view.View;importandroid.view.ViewGroup;importandroid.widget.Toast;publicclassLineChartActivityextendsFragmentActivity{@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_line_chart);if(savedInstanceState==null){getSupportFragmentManager().beginTransaction().add(R.id.container,newPlaceholderFragment()).commit();}}/***Afragmentcontainingalinechart.*/publicstaticclassPlaceholderFragmentextendsFragment{privateLineChartViewchart;privateLineChartDatadata;privateintnumberOfLines=1;privateintmaxNumberOfLines=4;privateintnumberOfPoints=12;float[][]randomNumbersTab=newfloat[maxNumberOfLines][numberOfPoints];privatebooleanhasAxes=true;privatebooleanhasAxesNames=true;privatebooleanhasLines=true;privatebooleanhasPoints=true;privateValueShapeshape=ValueShape.CIRCLE;privatebooleanisFilled=false;privatebooleanhasLabels=false;privatebooleanisCubic=false;privatebooleanhasLabelForSelected=false;privatebooleanpointsHaveDifferentColor;publicPlaceholderFragment(){}@OverridepublicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState){setHasOptionsMenu(true);ViewrootView=inflater.inflate(R.layout.fragment_line_chart,container,false);chart=(LineChartView)rootView.findViewById(R.id.chart);chart.setOnValueTouchListener(newValueTouchListener());//Generatesomerandomevalues.generateValues();generateData();//Disableviewpirtrecalculations,seetoggleCubic()methodfor//moreinfo.chart.setViewportCalculationEnabled(false);resetViewport();returnrootView;}//MENU@OverridepublicvoidonCreateOptionsMenu(Menumenu,MenuInflaterinflater){inflater.inflate(R.menu.line_chart,menu);}//menu的操作@OverridepublicbooleanonOptionsItemSelected(MenuItemitem){intid=item.getItemId();if(id==R.id.action_reset){reset();generateData();returntrue;}if(id==R.id.action_add_line){addLineToData();returntrue;}if(id==R.id.action_toggle_lines){toggleLines();returntrue;}if(id==R.id.action_toggle_points){togglePoints();returntrue;}if(id==R.id.action_toggle_cubic){toggleCubic();returntrue;}if(id==R.id.action_toggle_area){toggleFilled();returntrue;}if(id==R.id.action_point_color){togglePointColor();returntrue;}if(id==R.id.action_shape_circles){setCircles();returntrue;}if(id==R.id.action_shape_square){setSquares();returntrue;}if(id==R.id.action_shape_diamond){setDiamonds();returntrue;}if(id==R.id.action_toggle_labels){toggleLabels();returntrue;}if(id==R.id.action_toggle_axes){toggleAxes();returntrue;}if(id==R.id.action_toggle_axes_names){toggleAxesNames();returntrue;}if(id==R.id.action_animate){prepareDataAnimation();chart.startDataAnimation();returntrue;}if(id==R.id.action_toggle_selection_mode){toggleLabelForSelected();Toast.makeText(getActivity(),"Selectionmodesetto"+chart.isValueSelectionEnabled()+"selectanypoint.",Toast.LENGTH_SHORT).show();returntrue;}if(id==R.id.action_toggle_touch_zoom){chart.setZoomEnabled(!chart.isZoomEnabled());Toast.makeText(getActivity(),"IsZoomEnabled"+chart.isZoomEnabled(),Toast.LENGTH_SHORT).show();returntrue;}if(id==R.id.action_zoom_both){chart.setZoomType(ZoomType.HORIZONTAL_AND_VERTICAL);returntrue;}if(id==R.id.action_zoom_horizontal){chart.setZoomType(ZoomType.HORIZONTAL);returntrue;}if(id==R.id.action_zoom_vertical){chart.setZoomType(ZoomType.VERTICAL);returntrue;}returnsuper.onOptionsItemSelected(item);}privatevoidgenerateValues(){for(inti=0;i<maxNumberOfLines;++i){for(intj=0;j<numberOfPoints;++j){randomNumbersTab[i][j]=(float)Math.random()*100f;}}}privatevoidreset(){numberOfLines=1;hasAxes=true;hasAxesNames=true;hasLines=true;hasPoints=true;shape=ValueShape.CIRCLE;isFilled=false;hasLabels=false;isCubic=false;hasLabelForSelected=false;pointsHaveDifferentColor=false;chart.setValueSelectionEnabled(hasLabelForSelected);resetViewport();}privatevoidresetViewport(){//Resetviewportheightrangeto(0,100)finalViewportv=newViewport(chart.getMaximumViewport());v.bottom=0;v.top=100;v.left=0;v.right=numberOfPoints-1;chart.setMaximumViewport(v);chart.setCurrentViewport(v);}privatevoidgenerateData(){List<Line>lines=newArrayList<Line>();for(inti=0;i<numberOfLines;++i){List<PointValue>values=newArrayList<PointValue>();for(intj=0;j<numberOfPoints;++j){values.add(newPointValue(j,randomNumbersTab[i][j]));}Lineline=newLine(values);line.setColor(ChartUtils.COLORS[i]);line.setShape(shape);line.setCubic(isCubic);line.setFilled(isFilled);line.setHasLabels(hasLabels);line.setHasLabelsOnlyForSelected(hasLabelForSelected);line.setHasLines(hasLines);line.setHasPoints(hasPoints);if(pointsHaveDifferentColor){line.setPointColor(ChartUtils.COLORS[(i+1)%ChartUtils.COLORS.length]);}lines.add(line);}data=newLineChartData(lines);if(hasAxes){AxisaxisX=newAxis();AxisaxisY=newAxis().setHasLines(true);if(hasAxesNames){axisX.setName("AxisX");axisY.setName("AxisY");}data.setAxisXBottom(axisX);data.setAxisYLeft(axisY);}else{data.setAxisXBottom(null);data.setAxisYLeft(null);}data.setBaseValue(Float.NEGATIVE_INFINITY);chart.setLineChartData(data);}/***Addslinestodata,afterthatdatashouldbesetagainwith*{@linkLineChartView#setLineChartData(LineChartData)}.Last4thline*hasnon-monotonicallyxvalues.*/privatevoidaddLineToData(){if(data.getLines().size()>=maxNumberOfLines){Toast.makeText(getActivity(),"Samplesappusesmax4lines!",Toast.LENGTH_SHORT).show();return;}else{++numberOfLines;}generateData();}privatevoidtoggleLines(){hasLines=!hasLines;generateData();}privatevoidtogglePoints(){hasPoints=!hasPoints;generateData();}privatevoidtoggleCubic(){isCubic=!isCubic;generateData();if(isCubic){/***手動設(shè)置高一點(diǎn)最大立方行,因?yàn)橛袝r(shí)超過或低于最大值/最小值。為此使用Viewport.inest()*方法并傳遞負(fù)值作為dy參數(shù)或手動設(shè)置頂部和底部的值*。在這個(gè)例子中我知道Y值(0100)范圍內(nèi)我手動設(shè)置視口高度范圍(105)*。讓這個(gè)作品在動畫應(yīng)該使用Chart.setViewportCalculationEnabled*(false)之前修改窗口。記住你叫setLineChartData后設(shè)置窗口()。*/finalViewportv=newViewport(chart.getMaximumViewport());v.bottom=-5;v.top=105;//Youhavetosetmaxandcurrentviewportsseparately.chart.setMaximumVwport(v);//Ichangingcurrentviewportwithanimationinthiscase.chart.setCurrentViewportWithAnimation(v);}else{//Ifnotcubicrestoreviewportto(0,100)range.finalViewportv=newViewport(chart.getMaximumViewport());v.bottom=0;v.top=100;/***你必須單獨(dú)設(shè)置最大和當(dāng)前視窗。在這種情況下,如果我想要?jiǎng)赢嬑冶仨毾仍O(shè)置currentviewport和使用動畫偵聽器。*最大視窗將onAnimationFinished方法。*/chart.setViewportAnimationListener(newChartAnimationListener(){@OverridepublicvoidonAnimationStarted(){//TODOAuto-generatedmethodstub}@OverridepublicvoidonAnimationFinished(){//設(shè)置最大viewpirt和刪除偵聽器。chart.setMaximumViewport(v);chart.setViewportAnimationListener(null);}});//設(shè)置當(dāng)前viewpirt動畫;chart.setCurrentViewportWithAnimation(v);}}privatevoidtoggleFilled(){isFilled=!isFilled;generateData();}privatevoidtogglePointColor(){pointsHaveDifferentColor=!pointsHaveDifferentColor;generateData();}privatevoidsetCircles(){shape=ValueShape.CIRCLE;generateData();}privatevoidsetSquares(){shape=ValueShape.SQUARE;generateData();}privatevoidsetDiamonds(){shape=ValueShape.DIAMOND;generateData();}privatevoidtoggleLabels(){hasLabels=!hasLabels;if(hasLabels){hasLabelForSelected=false;chart.setValueSelectionEnabled(hasLabelForSelected);}generateData();}privatevoidtoggleLabelForSelected(){hasLabelForSelected=!hasLabelForSelected;chart.setValueS