??? 在這里使用的插件為Mpchart，只以折線圖為例。首先需要導入包。

??? 在Layout.xml中設置布局，如下：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"><LinearLayoutandroid:id="@+id/linearLayout1"android:layout_width="fill_parent"android:layout_height="40.0dip"><TextViewandroid:id="@+id/text4"android:layout_width="fill_parent"android:layout_height="match_parent"android:text="2016年油耗統計"android:textSize="15dp" /></LinearLayout><com.github.mikephil.charting.charts.LineChartandroid:id="@+id/chart1"android:layout_width="match_parent"android:layout_height="400dp"android:layout_marginTop="20dp" /></RelativeLayout>

? 在Activity中設置數據和圖表的格式。如下：

package com.example.view;import java.util.ArrayList;import android.app.Activity; import android.graphics.Color; import android.graphics.Typeface; import android.os.Bundle; import android.view.WindowManager;import com.example.iov.R; import com.github.mikephil.charting.charts.BarLineChartBase.BorderPosition; import com.github.mikephil.charting.charts.LineChart; import com.github.mikephil.charting.data.Entry; import com.github.mikephil.charting.data.LineData; import com.github.mikephil.charting.data.LineDataSet; import com.github.mikephil.charting.utils.Legend; import com.github.mikephil.charting.utils.Legend.LegendForm; import com.github.mikephil.charting.utils.XLabels; import com.github.mikephil.charting.utils.XLabels.XLabelPosition; import com.github.mikephil.charting.utils.YLabels;public class gaschar extends Activity {private LineChart mChart;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);setContentView(R.layout.gasinfo);mChart = (LineChart) findViewById(R.id.chart1);// 設置在Y軸上是否是從0開始顯示mChart.setStartAtZero(true);//是否在Y軸顯示數據，就是曲線上的數據mChart.setDrawYValues(true);//設置網格mChart.setDrawBorder(true);mChart.setBorderPositions(new BorderPosition[] {BorderPosition.BOTTOM});//在chart上的右下角加描述mChart.setDescription("曲線圖");//設置Y軸上的單位mChart.setUnit("￥"); //設置透明度mChart.setAlpha(0.8f);//設置網格底下的那條線的顏色mChart.setBorderColor(Color.rgb(213, 216, 214));//設置Y軸前后倒置mChart.setInvertYAxisEnabled(false);//設置高亮顯示mChart.setHighlightEnabled(true);//設置是否可以觸摸，如為false，則不能拖動，縮放等mChart.setTouchEnabled(true);//設置是否可以拖拽，縮放mChart.setDragEnabled(true);mChart.setScaleEnabled(true);//設置是否能擴大擴小mChart.setPinchZoom(true);// 設置背景顏色// mChart.setBackgroundColor(Color.GRAY);//設置點擊chart圖對應的數據彈出標注MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);// define an offset to change the original position of the marker// (optional)mv.setOffsets(-mv.getMeasuredWidth() / 2, -mv.getMeasuredHeight());// set the marker to the chart mChart.setMarkerView(mv);// enable/disable highlight indicators (the lines that indicate the// highlighted Entry)mChart.setHighlightIndicatorEnabled(false);//設置字體格式，如正楷Typeface tf = Typeface.createFromAsset(getAssets(),"OpenSans-Regular.ttf");mChart.setValueTypeface(tf);XLabels xl = mChart.getXLabels(); // xl.setAvoidFirstLastClipping(true); // xl.setAdjustXLabels(true);xl.setPosition(XLabelPosition.BOTTOM); // 設置X軸的數據在底部顯示xl.setTypeface(tf); // 設置字體xl.setTextSize(10f); // 設置字體大小xl.setSpaceBetweenLabels(3); // 設置數據之間的間距 YLabels yl = mChart.getYLabels();// yl.setPosition(YLabelPosition.LEFT_INSIDE); // set the positionyl.setTypeface(tf); // 設置字體yl.setTextSize(10f); // s設置字體大小yl.setLabelCount(5); // 設置Y軸最多顯示的數據個數// 加載數據 setData();//從X軸進入的動畫mChart.animateX(4000);mChart.animateY(3000); //從Y軸進入的動畫mChart.animateXY(3000, 3000); //從XY軸一起進入的動畫//設置最小的縮放mChart.setScaleMinima(0.5f, 1f);//設置視口// mChart.centerViewPort(10, 50);// get the legend (only possible after setting data)Legend l = mChart.getLegend();l.setForm(LegendForm.LINE); //設置圖最下面顯示的類型 l.setTypeface(tf); l.setTextSize(15);l.setTextColor(Color.rgb(104, 241, 175));l.setFormSize(30f); // set the size of the legend forms/shapes// 刷新圖表 mChart.invalidate();}private void setData() {String[] aa = {"1","2","3","4","5","6","7","8","9","10","11","12","月"};String[] bb = {"122.00","234.34","85.67","117.90","332.33","113.33"};ArrayList<String> xVals = new ArrayList<String>();for (int i = 0; i < aa.length; i++) {xVals.add(aa[i]);}ArrayList<Entry> yVals = new ArrayList<Entry>();for (int i = 0; i < bb.length; i++) {yVals.add(new Entry(Float.parseFloat(bb[i]), i));}// create a dataset and give it a typeLineDataSet set1 = new LineDataSet(yVals, "DataSet Line");set1.setDrawCubic(true); //設置曲線為圓滑的線set1.setCubicIntensity(0.2f);set1.setDrawFilled(false); //設置包括的范圍區域填充顏色set1.setDrawCircles(true); //設置有圓點set1.setLineWidth(2f); //設置線的寬度set1.setCircleSize(5f); //設置小圓的大小set1.setHighLightColor(Color.rgb(244, 117, 117));set1.setColor(Color.rgb(104, 241, 175)); //設置曲線的顏色// create a data object with the datasetsLineData data = new LineData(xVals, set1);// set data mChart.setData(data);} }

其中MyMarkerView（點擊節點類）代碼：

package com.example.view;import android.content.Context; import android.widget.TextView;import com.example.iov.R; import com.github.mikephil.charting.data.CandleEntry; import com.github.mikephil.charting.data.Entry; import com.github.mikephil.charting.utils.MarkerView; import com.github.mikephil.charting.utils.Utils;public class MyMarkerView extends MarkerView {private TextView tvContent;public MyMarkerView(Context context, int layoutResource) {super(context, layoutResource);tvContent = (TextView) findViewById(R.id.tvContent);}// callbacks everytime the MarkerView is redrawn, can be used to update the// content @Overridepublic void refreshContent(Entry e, int dataSetIndex) {if (e instanceof CandleEntry) {CandleEntry ce = (CandleEntry) e;tvContent.setText("" + Utils.formatNumber(ce.getHigh(), 0, true));} else {// tvContent.setText("" + Utils.formatNumber(e.getVal(), 0, true));tvContent.setText("" +e.getVal());}} }

效果如下：

?

轉載于:https://www.cnblogs.com/bingoing/p/5865585.html

總結

以上是生活随笔為你收集整理的android开发之图表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。