Android 使用開源表格架構MPAndroidChart

標籤：point   highlight   encoding   return   super   oom   icon   smi   das   

地址：https://github.com/PhilJay/MPAndroidChart

1. Gradle dependency (recommended)

• Add the following to your project level build.gradle:

allprojects {    repositories {        maven { url "https://jitpack.io" }    }}

 

• Add this to your app build.gradle:

dependencies {    implementation ‘com.github.PhilJay:MPAndroidChart:v3.0.3‘}

2.建立ChartEvent.java檔案

public class ChartEvent implements OnChartGestureListener, OnChartValueSelectedListener {    private  int specMount;//需要顯示的道數    private LineChart mChart;    private ArrayList<Entry> values = new ArrayList<Entry>();    private int[] specArray;    public ChartEvent(LineChart wChart, int specNum){        specMount = specNum;        specArray = new int[specMount];        mChart = wChart;        mChart.setOnChartGestureListener(this);        mChart.setOnChartValueSelectedListener(this);        mChart.setDrawGridBackground(false);        mChart.getDescription().setText("");        mChart.setTouchEnabled(true);        mChart.setDragEnabled(true);        mChart.setScaleEnabled(true);        mChart.setPinchZoom(true);        mChart.setDoubleTapToZoomEnabled(false);        MyMarkerView mv = new MyMarkerView(MyApplication.getContext(), R.layout.custom_marker_view);        mv.setChartView(mChart); // For bounds control        mChart.setMarker(mv); // Set the marker to the chart        XAxis xAxis = mChart.getXAxis();        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);        xAxis.setValueFormatter(new IAxisValueFormatter() {            @Override            public String getFormattedValue(float value, AxisBase axis) {                return ((int)value)*3000/specMount+"KeV";            }        });        YAxis leftAxis = mChart.getAxisLeft();        leftAxis.setAxisMinimum(0);        YAxis rightAxis = mChart.getAxisRight();        rightAxis.setEnabled(false);//        mChart.setBackgroundColor(Color.GRAY);        setData();        mChart.animateX(100);        Legend l = mChart.getLegend();        l.setForm(Legend.LegendForm.LINE);    }    public void updateChart(int[] specData){        specArray = specData;        for(int i=0;i<specMount;i++){                values.set(i,new Entry(i, specArray[i]));        }        setData();        mChart.invalidate();    }    private void setData() {        LineDataSet set1;        if (mChart.getData() != null &&                mChart.getData().getDataSetCount() > 0) {            set1 = (LineDataSet)mChart.getData().getDataSetByIndex(0);            set1.setValues(values);            mChart.getData().notifyDataChanged();            mChart.notifyDataSetChanged();        } else {            for (int i = 0; i < specMount; i++) {                values.add(new Entry(i, 0));            }            // create a dataset and give it a type            set1 = new LineDataSet(values, "即時譜線");            set1.setDrawIcons(false);            // set the line to be drawn like this "- - - - - -"//            set1.enableDashedLine(10f, 0f, 0f);//            set1.enableDashedHighlightLine(10f, 0f, 0f);            set1.setHighLightColor(Color.RED);            set1.disableDashedLine();            set1.setColor(Color.BLACK);            set1.setCircleColor(Color.BLACK);            set1.setLineWidth(0.5f);            set1.setCircleRadius(1f);            set1.setDrawCircleHole(false);            set1.setValueTextSize(9f);            set1.setDrawFilled(true);            set1.setFormLineWidth(1f);            set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f));            set1.setFormSize(15.f);            if (Utils.getSDKInt() >= 18) {                // fill drawable only supported on api level 18 and above                Drawable drawable = ContextCompat.getDrawable(MyApplication.getContext(), R.drawable.fade_red);                set1.setFillDrawable(drawable);            }            else {                set1.setFillColor(Color.BLACK);            }            ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();            dataSets.add(set1); // add the datasets            // create a data object with the datasets            LineData data = new LineData(dataSets);            // set data            mChart.setData(data);        }    }    @Override    public void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {    }    @Override    public void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {    }    @Override    public void onChartLongPressed(MotionEvent me) {    }    @Override    public void onChartDoubleTapped(MotionEvent me) {    }    @Override    public void onChartSingleTapped(MotionEvent me) {    }    @Override    public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY) {    }    @Override    public void onChartScale(MotionEvent me, float scaleX, float scaleY) {    }    @Override    public void onChartTranslate(MotionEvent me, float dX, float dY) {    }    @Override    public void onValueSelected(Entry e, Highlight h) {    }    @Override    public void onNothingSelected() {    }}

3.建立MyMarkerView.java檔案

/** * Custom implementation of the MarkerView. *  * @author Philipp Jahoda */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 (user-interface)    @Override    public void refreshContent(Entry e, Highlight highlight) {        if (e instanceof CandleEntry) {            CandleEntry ce = (CandleEntry) e;            tvContent.setText("" + Utils.formatNumber(ce.getHigh(), 0, true));        } else {            tvContent.setText("" + Utils.formatNumber(e.getY(), 0, true));        }        super.refreshContent(e, highlight);    }    @Override    public MPPointF getOffset() {        return new MPPointF(-(getWidth() / 2), -getHeight());    }}

4.在布局檔案夾中建立layout.custom_marker_view.xml檔案

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="40dp"    android:background="@drawable/marker2" >    <TextView        android:id="@+id/tvContent"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:layout_marginTop="7dp"        android:layout_marginLeft="5dp"        android:layout_marginRight="5dp"        android:text=""        android:textSize="12dp"        android:textColor="@android:color/white"        android:ellipsize="end"        android:singleLine="true"        android:textAppearance="?android:attr/textAppearanceSmall" /></RelativeLayout>

5.在drawable檔案夾中配置，marker2.png圖片，fade_red.xml檔案，這兩個檔案也可以不用，一個是點擊顯示表徵圖提示，一個是表徵圖線顏色填充。

Android 使用開源表格架構MPAndroidChart