需求：

通過以上例子我們修改測試數據後，拿到的View圖像是這樣的：

而我們要的效果是縱坐標7.45以上與5.97以下的部分為紅色，7.45與6.43間為綠色，6.18與6.43之間為黃色，效果如下：

vcz1srvNrLXEz9+jrM7e0snKx7j8vNPU9rTzwcvU9bj2u+bWxrn9s8y1xLi01NO2yKGjPGJyIC8+DQrEx8O0ztLDx8jnus7Ipdf2s8nPws28tcTV4tbW0Ke5+6GjPC9wPg0KPGgzIGlkPQ=="1初始化渲染背景的rect">1、初始化渲染背景的Rect

private Rect mColorBgRect = new Rect(0, mTopPadding, w, mColEndY);

2、渲染背景筆

    // 渲染背景筆
    public void shaderColorBgPaint(Rect rect) {
        LinearGradient linearGradient = new LinearGradient(rect.left, rect.top, rect.left, rect.bottom, getShaderColor(), getShaderPosition(), Shader.TileMode.MIRROR);
        mColorBgPaint.setShader(linearGradient);
    }

    // 將正常理解的顏色@COLORS_SHADER轉換為LinearGradient繪制所需的顏色
    public int[] getShaderColor(){
        int[] colors = new int[COLORS_SHADER.length * 2];
        for (int i = 0, len = colors.length; i < len ; i+=2) {
            colors[i] = COLORS_SHADER[i/2];
            colors[i+1] = COLORS_SHADER[i/2];
        }
        return colors;
    }

    // 將正常理解的比例@RATIOS_SHADER轉換為LinearGradient繪制所需的比例
    public float[] getShaderPosition() {
        float[] position = new float[COLORS_SHADER.length * 2];
        position[0] = JOIN_SHADER;
        position[1] = RATIOS_SHADER[0] - JOIN_SHADER;
        for (int i = 1, len = RATIOS_SHADER.length; i < len ; i++) {
            position[i*2] = RATIOS_SHADER[i-1] + JOIN_SHADER;
            position[i*2+1] = RATIOS_SHADER[i] - JOIN_SHADER;
        }
        return position;
    }

3、設置setShader()所需要的Shader

mColorBgPaint.setShader(linearGradient);  

4、繪制一個渲染的背景

      // 繪制一個渲染的背景
        Bitmap tagBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        Canvas tagCanvas = new Canvas(tagBitmap);
        tagCanvas.drawRect(mColorBgRect, mColorBgPaint);

5、繪制顯示的數據–這裡是曲線

        // 繪制曲線
        Bitmap curveBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        Canvas curveCanvas = new Canvas(curveBitmap);
        drawCurve(curveCanvas);  //這個方法是具體的繪制，後面會給出源碼地址

6、設置合成模式PorterDuff.Mode.DST_IN

        Paint paint = new Paint(); 
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); // 設置合成模式
        tagCanvas.drawBitmap(curveBitmap, mMatrix, paint);

其中具體的PorterDuff.Mode.DST_IN為 取兩層繪制交集。顯示下層這裡就是取下層的背景色。

7、繪制渲染後的曲線圖

    // 繪制渲染後的曲線圖
    private void drawBeautifulCurve(Canvas canvas) {
        if (mCurveBitmap == null) {
            mCurveBitmap = getBeautfulCurve();
        }
        canvas.drawBitmap(mCurveBitmap, 0, 0, null);
    }

通過以上步驟即可完成對圖形的渲染繪制，具體的代碼已更新至Github中，

本期優化內容：

1、添加點擊、滑動事件，通過點擊與滑動即可查看當前點的具體信息。
2、優化屏幕適配。
3、點擊外區域取消當前信息顯示。
4、渲染當前先的繪制顏色。

以下是最新下載鏈接：

Github下載地址：https://github.com/JackWaiting/ChartView