Android使用MPAndroidChart绘制图表

    由于Google提供的AChartEngine的功能强大但使用起来较为复杂,MPAndroidChart同样能够实现一些效果较好的直方图,折线图,饼图等绘制,使用也较为简单轻便;项目地址:https://github.com/PhilJay/MPAndroidChart
    效果图:
  • LineChart (with legend, simple design) alt tagAndroid使用MPAndroidChart绘制图表_第1张图片
  • LineChart (with legend, simple design) alt tagAndroid使用MPAndroidChart绘制图表_第2张图片

  • LineChart (cubic lines) 

  • alt tagAndroid使用MPAndroidChart绘制图表_第3张图片

  • Combined-Chart (bar- and linechart in this case) alt tagAndroid使用MPAndroidChart绘制图表_第4张图片

  • BarChart (with legend, simple design)Android使用MPAndroidChart绘制图表_第5张图片

alt tag

  • BarChart (grouped DataSets)
  • Android使用MPAndroidChart绘制图表_第6张图片

alt tag

  • Horizontal-BarChart
  • Android使用MPAndroidChart绘制图表_第7张图片

alt tag

  • PieChart (with selection, ...)
  • Android使用MPAndroidChart绘制图表_第8张图片

alt tag

  • ScatterChart (with squares, triangles, circles, ... and more)Android使用MPAndroidChart绘制图表_第9张图片

alt tag

  • CandleStickChart (for financial data)Android使用MPAndroidChart绘制图表_第10张图片

alt tag

  • BubbleChart (area covered by bubbles indicates the value)Android使用MPAndroidChart绘制图表_第11张图片

alt tag

  • RadarChart (spider web chart)
  • Android使用MPAndroidChart绘制图表_第12张图片

alt tag


一、代码中使用:

1、在gradle文件中添加:

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

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v2.1.6'
}

2、在xml布局文件中使用

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/mTemperChart"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_below="@id/patientInfoHeader"
    android:layout_marginBottom="10dp"
    />

3、在代码中进行绘制:

// 弹出详细信息界面
    private void popUpPatientWindow() {
        popView = inflater.inflate(R.layout.patient_info_layout, null);

        // 表格控件使用
        mTemperChart = $(popView, R.id.mTemperChart);
        // === 测试温度表 ====
        LineData data = getData(8, MIN_TEMPER, MAX_TEMPER);
        setupChart(mTemperChart, data);

        popupWindow = new PopupWindow(popView, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, true);

        popupWindow.setBackgroundDrawable(new BitmapDrawable());
        popupWindow.setOutsideTouchable(true);

        popupWindow.showAtLocation(popView, Gravity.CENTER, 0, 0);

    }

    // 设置显示的样式
    void setupChart(LineChart chart, LineData data) {

        chart.setDescription("");// 数据描述
        // 如果没有数据的时候,会显示这个,类似listview的emtpyview
        chart.setNoDataTextDescription("暂时没有温度数据记录");
        chart.setDrawGridBackground(false); // 是否显示表格颜色

        chart.setTouchEnabled(true); // 设置是否可以触摸
        chart.setDragEnabled(true);// 是否可以拖拽
        chart.setScaleEnabled(true);// 是否可以缩放
        chart.setPinchZoom(false);//
        chart.setBackgroundColor(Color.WHITE);// 设置背景

        // 自定义字体
//        Typeface tf = Typeface.createFromAsset(getAssets(), "OpenSans-Regular.ttf");

        // ====== 设置标准线  ======
        LimitLine ll1 = new LimitLine(UPPER_TEMPER, "高烧危险");
        ll1.setLineWidth(4f);
        ll1.enableDashedLine(1.0f, 1.0f, 0f);
        ll1.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);
        ll1.setTextSize(10f);
//        ll1.setTypeface(tf);

        LimitLine ll2 = new LimitLine(LOWER_TEMPER, "低烧危险");
        ll2.setLineWidth(4f);
        ll2.enableDashedLine(1.0f, 1.0f, 0f);
        ll2.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_BOTTOM);
        ll2.setTextSize(10f);
//        ll2.setTypeface(tf);

        // ====== 设置Y轴显示 ======
        YAxis leftAxis = chart.getAxisLeft();
        leftAxis.removeAllLimitLines();
        leftAxis.addLimitLine(ll1);   // 添加标准线
        leftAxis.addLimitLine(ll2);
        leftAxis.setAxisMaxValue(MAX_TEMPER);
        leftAxis.setAxisMinValue(MIN_TEMPER);
        leftAxis.setStartAtZero(false);
        //leftAxis.setYOffset(20f);
        leftAxis.enableGridDashedLine(1.0f, 1.0f, 0f);
        // limit lines are drawn behind data (and not on top)
        leftAxis.setDrawLimitLinesBehindData(true);

        chart.getAxisRight().setEnabled(false);


        // ======设置数据=======
        chart.setData(data);

        chart.animateX(2500, Easing.EasingOption.EaseInOutQuart);
//        mChart.invalidate();
        // get the legend (only possible after setting data)
        Legend l = chart.getLegend();

        // modify the legend ...
        // l.setPosition(LegendPosition.LEFT_OF_CHART);
        l.setForm(Legend.LegendForm.LINE);
    }

    // 生成数据
    LineData getData(int count, float max, float min) {
        ArrayList<String> xVals = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            // x轴显示的数据,这里默认使用数字下标显示
            xVals.add((i + 8) + ":00");
        }

        // y轴的数据
        ArrayList<Entry> yVals = new ArrayList<Entry>();
        for (int i = 0; i < count; i++) {
            float val = (float) (Math.random() * (max - min) + min);
            yVals.add(new Entry(val, i));
        }

        // create a dataset and give it a type
        // y轴的数据集合
        LineDataSet set1 = new LineDataSet(yVals, "病人一天温度表");
        // set1.setFillAlpha(110);
        // set1.setFillColor(Color.RED);

        set1.setLineWidth(1.75f); // 线宽
        set1.setCircleSize(3f);// 显示的圆形大小
        set1.setColor(getResources().getColor(R.color.id_blue));// 显示颜色
        set1.setCircleColor(getResources().getColor(R.color.colorPrimary));// 圆形的颜色
        set1.setHighLightColor(getResources().getColor(R.color.id_blue)); // 高亮的线的颜色

        ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();
        dataSets.add(set1); // add the datasets

        // create a data object with the datasets
        LineData data = new LineData(xVals, dataSets);

        return data;
    }
 

 4、生成效果图:

Android使用MPAndroidChart绘制图表_第13张图片

你可能感兴趣的:(Android使用MPAndroidChart绘制图表)