Android - 绘制带有渐变色的折线图

图表绘制的需求在安卓开发中并不少见。常见的有饼图，柱状图，折线图等等。
在这里，我们可以给折线图添加一些色彩。除了线条本身的颜色外，还可以增加一些“花样”——渐变色。填充空余的地方，让图形更美观。

效果参考图

示例工程请见： https://github.com/RustFisher/aboutView

代码实现

我们选择直接继承View类，新建ShadowLineChart.java。
在onSizeChanged中获取到View的宽高等等基本信息。
在onDraw(Canvas canvas)中先绘制背景，然后绘制数据。

背景和坐标设定

显示的上下限设定，横轴设定。坐标原点需要在View中计算。

private int mMaxDataCount = 256; // 横轴显示的最大数据个数
private float mDataMax = 2048;
private float mDataMin = -2048;      // 图表显示数据的下限

private float mCoorOriginX; // 坐标原点 x
private float mCoorOriginY; // 坐标原点 y

数据设定和存储

这里使用float，全部存储在float数组中。也可以选用LinkedList之类的数据结构。

private float[] mDataInDraw;
// 初始化
mDataInDraw = new float[mMaxDataCount];

mMaxDataCount是可以自由设定的。

传入数据

数据结构选用了数组，传入新的数据时将旧的数据移动到前面，将新的数据复制到后面。需要判断一下传入数据的个数。

    public void inputData(float[] inputData) {
        if (null == inputData || inputData.length == 0) {
            return;
        }
        int inputLen = inputData.length;
        int maxLen = mDataInDraw.length;
        if (inputLen < maxLen) {
            // 复制原有数据到前面去
            System.arraycopy(mDataInDraw, inputLen, mDataInDraw, 0, maxLen - inputLen);
            System.arraycopy(inputData, 0, mDataInDraw, maxLen - inputLen, inputLen);
        } else {
            System.arraycopy(inputData, inputLen - maxLen, mDataInDraw, 0, maxLen);
        }
        invalidate();
    }

绘制背景和文字

计算出原点坐标后，可以比较容易地画出x和y轴。
绘制坐标轴参数时，需要注意一下居中。

        // 先确定字体所在的矩形
        mTextTmpRect.set(0, (int) (mCoorOriginY - mTextRectHeight), (int) markTextX, (int) (mCoorOriginY + mTextRectHeight));
        // 绘制文字
        canvas.drawText("0", markTextX, calTextBaselineY(mTextTmpRect), mTextPaint);
        mTextTmpRect.set(0, (int) markY1 - mTextRectHeight, (int) markTextX, (int) markY1 + mTextRectHeight);
        canvas.drawText(String.format(Locale.CHINA, "%.0f", mMark1), markTextX, calTextBaselineY(mTextTmpRect), mTextPaint);
        mTextTmpRect.set(0, (int) markY2 - mTextRectHeight, (int) markTextX, (int) markY2 + mTextRectHeight);
        canvas.drawText(String.format(Locale.CHINA, "%.0f", mMark2), markTextX, calTextBaselineY(mTextTmpRect), mTextPaint);

    /**
     * @param textRect 让字体显示在这个矩形的正中间
     * @return 文字的baseline
     */
    private int calTextBaselineY(Rect textRect) {
        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
        float top = fontMetrics.top; // 为基线到字体上边框的距离,即上图中的top
        float bottom = fontMetrics.bottom; // 为基线到字体下边框的距离,即上图中的bottom
        return (int) (textRect.centerY() - top / 2 - bottom / 2);
    }

绘制数据

计算出x轴和y轴每个单元格的长度，然后计算出每个数据点的坐标值，用path连起来即可。

float pointX = mCoorOriginX + xStep * i;
float pointY = calDataYCoor(mDataInDraw[i], perDataDy);
// ...
    private float calDataYCoor(float dataValue, float perDataDy) {
        return mCoorOriginY - dataValue * perDataDy;
    }

绘制渐变色

主要使用的是Paint.setShader方法和线性梯度类LinearGradient

        shadowPaint.setShader(new LinearGradient(0, calDataYCoor(maxDataValue, perDataDy) + mDataPaint.getStrokeWidth(),
                0, mViewHeight, shadowPaint.getColor(), Color.TRANSPARENT, Shader.TileMode.CLAMP));
        canvas.drawPath(mShadowPath, shadowPaint);

mShadowPath 连接所有的数据点，并将图标下方区域全部囊括。

自定义属性设定

自定义属性比如线条颜色，粗细，轴的粗细。可以自行添加方法来设定。
例如使用文件attr_shadow_line_chart.xml

示例代码请见： https://github.com/RustFisher/aboutView/blob/master/FisherView/src/main/java/com/rustfisher/view/ShadowLineChart.java

参考

• Android - 自定义SurfaceView