用MPAndroidChart实现动态折线图

最近做的项目需要用到动态折线图，因为知道一个很好的库MPAndroidChart，所以就想用它来完成，下面是我通过官方Demo制作的一个Demo。

首先初始化折线图

private void initChart() {
    // enable description text
    mChart.getDescription().setEnabled(false);

    // enable touch gestures
    mChart.setTouchEnabled(true);

    // enable scaling and dragging
    mChart.setDragEnabled(true);
    mChart.setScaleEnabled(true);
    mChart.setDrawGridBackground(false);

    // if disabled, scaling can be done on x- and y-axis separately
    mChart.setPinchZoom(true);

    // set an alternative background color
    mChart.setBackgroundColor(Color.WHITE);

    LineData data = new LineData();
    data.setValueTextColor(Color.WHITE);

    // add empty data
    mChart.setData(data);

    // get the legend (only possible after setting data)
    Legend l = mChart.getLegend();

    // modify the legend ...
      l.setForm(Legend.LegendForm.LINE);
      l.setTypeface(mTfLight);
      l.setTextColor(Color.WHITE);
    l.setEnabled(false);

    XAxis xl = mChart.getXAxis();
      xl.setPosition(XAxis.XAxisPosition.BOTTOM);
    xl.setDrawLabels(false);
      xl.setGranularity(1f);
      xl.setTypeface(mTfLight);
    xl.setTextColor(Color.WHITE);
    xl.setDrawGridLines(true);
    xl.enableGridDashedLine(10f, 10f, 0f);
    xl.setAvoidFirstLastClipping(true);
    xl.setEnabled(true);

    YAxis leftAxis = mChart.getAxisLeft();
      leftAxis.setTypeface(mTfLight);
    leftAxis.setGranularity(1f);
    leftAxis.setTextColor(Color.parseColor("#A2A2A2"));
    leftAxis.setAxisMaximum(100f);
    leftAxis.setAxisMinimum(0f);
    //重置y轴的最小最大值   这样会让曲线随着自己的数据变化而变化
    leftAxis.resetAxisMinimum();
    leftAxis.resetAxisMaximum();

    leftAxis.setDrawGridLines(true);
    leftAxis.enableGridDashedLine(10f, 10f, 0f);

    YAxis rightAxis = mChart.getAxisRight();
    rightAxis.setEnabled(false);
}

然后添加数据

private void feedMultiple() {

    if (thread != null) {

        thread.interrupt();
    } else {

        final Runnable runnable = new Runnable() {

            @Override
            public void run() {
                addEntry();
            }
        };

        thread = new Thread(new Runnable() {

            @Override
            public void run() {
                for (int i = 0; i < 400; i++) {

                    // Don't generate garbage runnables inside the loop.
                    runOnUiThread(runnable);

                    try {
                        Thread.sleep(25);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        });

        thread.start();
    }
}

private int i = 0;
private void addEntry() {

    LineData data = mChart.getData();

    if (data != null) {

        ILineDataSet set = data.getDataSetByIndex(0);
        // set.addEntry(...); // can be called as well

        if (set == null) {
            set = createSet();
            data.addDataSet(set);
        }

    //在120个数据之后开始删除已经没有显示在折线图范围的数据 后面的数据还是从右向左出现  当然也可以不用删除，这样可以滑动折线图浏览以前的数据
    if (i > 120) {

        set.removeFirst();
        data.addEntry(new Entry(set.getEntryCount() + (float) (i - 120), y), 0);
    } else {

        data.addEntry(new Entry(set.getEntryCount(), y), 0);
    }
    i++;

        if (index % 5 == 0) {
            data.addEntry(new Entry(set.getEntryCount(), 50), 0);
        } else if (index % 5 == 1) {
            data.addEntry(new Entry(set.getEntryCount(), 50), 0);
        } else if (index % 5 == 2) {
            data.addEntry(new Entry(set.getEntryCount(), 80), 0);
        } else if (index % 5 == 3) {
            data.addEntry(new Entry(set.getEntryCount(), 20), 0);
        } else if (index % 5 == 4) {
            data.addEntry(new Entry(set.getEntryCount(), 50), 0);
        }
        index++;
        data.notifyDataChanged();

        // let the chart know it's data has changed
        mChart.notifyDataSetChanged();

        // 折线图最多显示的数量
        mChart.setVisibleXRangeMaximum(120);
        // mChart.setVisibleYRange(30, AxisDependency.LEFT);

        // move to the latest entry
        mChart.moveViewToX(data.getEntryCount());

        // this automatically refreshes the chart (calls invalidate())
        // mChart.moveViewTo(data.getXValCount()-7, 55f,
        // AxisDependency.LEFT);
    }
}

private LineDataSet createSet() {

    LineDataSet set = new LineDataSet(null, "Dynamic Data");
    set.setAxisDependency(YAxis.AxisDependency.LEFT);
    set.setColor(Color.parseColor("#FDC328"));
      set.setCircleColor(Color.WHITE);
    set.setLineWidth(2f);
      set.setCircleRadius(3f);
    set.setDrawCircles(false);
    set.setFillAlpha(65);
    set.setFillColor(ColorTemplate.getHoloBlue());
    set.setHighLightColor(Color.rgb(244, 117, 117));
    set.setValueTextColor(Color.WHITE);
    set.setValueTextSize(9f);
    set.setDrawValues(false);
    return set;
}