滚动折线图

效果图：

主函数

public class MainActivity extends AppCompatActivity {
    private List<LineChart> mData;
    private LineChartView lineChartView;
    private LinearLayout mLinearLayout;
    private HorizontalScrollView mHorizontalScrollView;
    private boolean isTouch=false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mLinearLayout= (LinearLayout) findViewById(R.id.linearlayout);
        mHorizontalScrollView= (HorizontalScrollView) findViewById(R.id.horizontalscrollview);
        lineChartView = (LineChartView) findViewById(R.id.linechart);
        mLinearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                isTouch=!isTouch;
                if (isTouch){
                    init();
                    mHorizontalScrollView.setVisibility(View.VISIBLE);
                    lineChartView.setmData(mData);
                }
                else {
                    mHorizontalScrollView.setVisibility(View.GONE);
                }

            }
        });

    }

    private void init() {
        mData = new ArrayList<>();
        mData.add(new LineChart("13", 210));
        mData.add(new LineChart("14", 410));
        mData.add(new LineChart("15", 220));
        mData.add(new LineChart("16", 400));
        mData.add(new LineChart("17", 210));
        mData.add(new LineChart("18", 210));
        mData.add(new LineChart("19", 270));
        mData.add(new LineChart("20", 400));
        mData.add(new LineChart("21", 360));
        mData.add(new LineChart("22", 1000));
        mData.add(new LineChart("23", 270));
        mData.add(new LineChart("24", 170));
        mData.add(new LineChart("25", 140));
        mData.add(new LineChart("26", 290));
        mData.add(new LineChart("27", 270));
        mData.add(new LineChart("28", 800));
        mData.add(new LineChart("29", 150));
        mData.add(new LineChart("30", 400));
        mData.add(new LineChart("01", 360));
        mData.add(new LineChart("02", 140));
        mData.add(new LineChart("03", 1000));
        mData.add(new LineChart("04", 150));
        mData.add(new LineChart("05", 440));
        mData.add(new LineChart("06", 140));
        mData.add(new LineChart("07", 870));
        mData.add(new LineChart("08", 560));
        mData.add(new LineChart("09", 170));
        mData.add(new LineChart("10", 453));
        mData.add(new LineChart("11", 440));
        mData.add(new LineChart("12", 300));

}
    }

LineChartView

public class LineChartView extends View {
    private int width;
    private int height;
    private int max = 5;//设置最大值
    private int Chartwidth = 80;//表格的宽度
    private int Chartheight = 60;//表格的高度
    private Paint mPaintWhite;
    private float topDistance = 30;//表格上面的白框距离
    private float bottomdistance = 50;//表格下面的白框距离
    private Paint mPaintBackground;//表格背景色画笔
    private Paint mPaintChart;//表格的画笔
    private Paint mPaintCover;//填充的颜色
    private Paint mPaintCircle;//画圆圈的画笔
    private Paint mPaintLineChart;//画折线的画笔
    private Paint mPaintVisitValues;//拜访量的画笔
    private Paint mPaintDate;//画日期
    private Path mPath;//画线的
    private List<LineChart> mData;

    public void setmData(List<LineChart> mData) {
        this.mData = mData;
        requestLayout();//onMesure
        invalidate();//onDraw
    }

    public LineChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
         //dip和px之间的转换
//        topDistance=Dptools.dip2px(context,100);
//        bottomdistance=Dptools.dip2px(context,50);
//        Chartheight=Dptools.dip2px(context,60);
//        Chartwidth=Dptools.dip2px(context,80);
        mPaintWhite = new Paint();
        mPaintWhite.setColor(Color.WHITE);
        mPaintWhite.setStyle(Paint.Style.FILL);


        mPaintBackground = new Paint();
        mPaintBackground.setColor(Color.argb(0xff, 0xf5, 0xf5, 0xf5));
        mPaintBackground.setStyle(Paint.Style.FILL);

        mPaintChart = new Paint();
        mPaintChart.setColor(Color.argb(0xff, 0xdc, 0xdc, 0xdc));
        mPaintChart.setStyle(Paint.Style.FILL);
        mPaintChart.setAntiAlias(true);

        mPaintCover = new Paint();
        mPaintCover.setColor(Color.argb(0xff, 0xe6, 0xe6, 0xfa));
        mPaintCover.setStyle(Paint.Style.FILL);
        mPaintCover.setAlpha(10);//调节透明度的
//        mPaintCover.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN));

        mPaintCircle = new Paint();
        mPaintCircle.setColor(Color.argb(0xff, 0x00, 0xff, 0xff));
        mPaintCircle.setStrokeWidth(4);
        mPaintCircle.setStyle(Paint.Style.STROKE);
        mPaintCircle.setAntiAlias(true);

        mPaintLineChart = new Paint();
        mPaintLineChart.setColor(Color.argb(0xff, 0x00, 0xff, 0xff));
        mPaintLineChart.setStrokeWidth(3);
        mPaintLineChart.setStyle(Paint.Style.FILL);
        mPaintLineChart.setAntiAlias(true);


        mPaintDate = new Paint();
        mPaintDate.setColor(Color.argb(0xff, 0xc0, 0xc0, 0xc0));
        mPaintDate.setStyle(Paint.Style.FILL);
        mPaintDate.setTextSize(15);

        mPaintVisitValues = new Paint();
        mPaintVisitValues.setColor(Color.argb(0xff, 0x00, 0xff, 0xff));
        mPaintVisitValues.setTextSize(20);
        mPaintVisitValues.setStyle(Paint.Style.FILL);
        mPaintVisitValues.setAntiAlias(true);

        mPath = new Path();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mData == null) {
            width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        } else {
            width = ((mData.size() + 1) * Chartwidth);
        }

        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画矩形  上、中、下
        canvas.drawRect(0, 0, width, topDistance, mPaintWhite);
        canvas.drawRect(0, topDistance, width, topDistance + 4 * Chartheight, mPaintBackground);
        canvas.drawRect(0, topDistance + 4 * Chartheight, width, topDistance + 4 * Chartheight + bottomdistance, mPaintWhite);
        //画表格横线
        for (int i = 0; i < 5; i++) {
            canvas.drawLine(15, topDistance + i * Chartheight, width, topDistance + i * Chartheight, mPaintChart);
        }

        //画表格竖线和标注日期和拜访量和画圆圈
        if (mData != null) {
            for (int i = 0; i < mData.size(); i++) {
                LineChart lineChart = mData.get(i);
                canvas.drawLine(15 + Chartwidth * i, topDistance, 15 + Chartwidth * i, topDistance + 4 * Chartheight, mPaintChart);
                canvas.drawText(lineChart.getDate(), 15 + Chartwidth * i - mPaintDate.measureText(lineChart.getDate()) / 2, topDistance + 4 * Chartheight + 15, mPaintDate);
                canvas.drawCircle(15 + Chartwidth * i, topDistance + 4 * Chartheight - lineChart.getPercent() / max, 6, mPaintCircle);
                String visitNumber = lineChart.getPercent() / max + "";
                canvas.drawText(visitNumber, 15 + Chartwidth * i, topDistance + 4 * Chartheight - lineChart.getPercent() / max - 15, mPaintVisitValues);
            }
            //画折线，将圆圈连起来
            for (int i = 0; i < mData.size() - 1; i++) {
                LineChart lineChart = mData.get(i);
                canvas.drawLine(15 + Chartwidth * i + 7, topDistance + 4 * Chartheight - lineChart.getPercent() / max, 15 + Chartwidth * (i + 1) - 7, topDistance + 4 * Chartheight - mData.get(i + 1).getPercent() / max, mPaintVisitValues);

            }
            //画填充的边界
            for (int i = 0; i < mData.size() - 1; i++) {
                LineChart lineChart = mData.get(i);
                mPath.moveTo(15 + Chartwidth * i, topDistance + 4 * Chartheight);
                mPath.lineTo(15 + Chartwidth * i, topDistance + 4 * Chartheight);
                mPath.lineTo(15 + Chartwidth * i, topDistance + 4 * Chartheight - lineChart.getPercent() / max);
                mPath.lineTo(15 + Chartwidth * (i + 1), topDistance + 4 * Chartheight - mData.get(i + 1).getPercent() / max);
                mPath.lineTo(15 + Chartwidth * (i + 1), topDistance + 4 * Chartheight);
                mPath.close();
                canvas.drawPath(mPath, mPaintCover);
            }
        }
    }
}

LineChart 类

public class LineChart {
  private String date;
    private int percent;
    public LineChart(){

    }

    public LineChart(String date, int percent) {
        this.date = date;
        this.percent = percent;
    }

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public int getPercent() {
        return percent;
    }

    public void setPercent(int percent) {
        this.percent = percent;
    }
}

activity_main.xml

<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"
    tools:context=".MainActivity">
    <LinearLayout
        android:id="@+id/linearlayout"

        android:background="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:textColor="#000000"
            android:text="客户拜访"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="10月人均拜访：1.7"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:text="昨日总拜访：9"/>

        <HorizontalScrollView
            android:id="@+id/horizontalscrollview"
            android:visibility="gone"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <com.redcircle.myprictise.linechart.LineChartView
                android:id="@+id/linechart"
                android:layout_width="1000dp"
                android:layout_height="match_parent" />
        </HorizontalScrollView>

    </LinearLayout>
</RelativeLayout>

linechart.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<com.redcircle.myprictise.linechart.LineChartView
    android:id="@+id/linechartview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>