Android簡易柱狀圖和曲線圖表實現

Wellijohn發表於2017-12-19

之前有寫過一個圖表lib，但是開發的速度，大多很難跟上產品需求變化的腳步，所以修改了下原先的圖表庫，支援圖表下面能整合table顯示對應的類目，用曲線替換了折線，支援多曲線的顯示，增加了顯示的動畫，，增加了一些可定製的屬性，支援水平柱狀圖和疊加柱狀圖，以及多曲線圖和餅狀圖的顯示

1.效果圖

2.各種圖表的使用方式

1.餅狀圖這個和原先的使用一樣，只不過增加了一個動畫，可以參看之前的文章，餅狀圖使用。

2.水平多柱狀圖

2.1 xml佈局

 <wellijohn.org.varchart.hor_bar_with_line_chart.ChartLine
        android:id="@+id/chartline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/white"
        app:default_x_visible_num="4.2"//一個螢幕中顯示多少列
        app:y_interval="40dp"//Y軸的間距
        app:y_num_text_max_width="56dp"//y軸左邊的文字的寬度 />
還有y_visible_num：y軸需要顯示幾列
複製程式碼

2.2 資料設定

public class HorBarActivity extends AppCompatActivity {

  //顯示的座標點
    private ChartLine mChartline;

    //多條折線的座標點
    private List<List<DotVo>> mMulListDisDots;


    //x軸的點
    private String[] mXdots = new String[]{"08/18"
            , "08/19",
            "08/20", "08/21", "08/22", "08/23", "08/24",
            "08/25", "08/26", "08/27", "08/28", "08/29", "09/01", "09/02", "09/23",
    };

    private double mMax = 44;

    private Random rand = new Random();

    private List<CategoryVo> mCategoryList;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hor_bar);

        initView();
        initMulTestData();
        initCategoryList();
        try {
            mChartline.setYAxisMaxValue(mMax).setXdots(mXdots).setAnimationOpen(true).setListDisDots(mMulListDisDots).
                    setCategoryList(mCategoryList).reDraw();
        } catch (YCoordinateException e) {
            Log.d("MainActivity", "onCreate: ");
            e.printStackTrace();
        }
    }


    /**
     * 柱狀圖的資料，是一個list，一個CategoryVo，就是一列中增加一個柱狀
     * CategoryVo：{
     *      卡券類目的名稱
     *      private String categoryName;
     *      每個卡券類目的值
     *      private List<String> categoryValueList;
     * }
     */
    private void initCategoryList() {
        mCategoryList = new ArrayList<>();
        mCategoryList.add(new CategoryVo());
        mCategoryList.add(new CategoryVo());
        mCategoryList.add(new CategoryVo());
    }


    /**
     * 初始化曲線圖,private List<List<DotVo>> mMulListDisDots;
     * List<DotVo>>就是一條曲線圖，
     */
    private void initMulTestData() {
        mMulListDisDots = new ArrayList<>();

        for (int i = 0; i < 3; i++) {
            ArrayList<DotVo> temp = new ArrayList();
            DotVo tempDotVo = new DotVo("08/18", rand.nextInt((int) mMax));
            temp.add(tempDotVo);
            DotVo tempDotVo1 = new DotVo("08/19", rand.nextInt((int) mMax));
            temp.add(tempDotVo1);
            DotVo tempDotVo2 = new DotVo("08/20", rand.nextInt((int) mMax));
            temp.add(tempDotVo2);
            DotVo tempDotVo3 = new DotVo("08/21", rand.nextInt((int) mMax));
            temp.add(tempDotVo3);
            DotVo tempDotVo4 = new DotVo("08/22", rand.nextInt((int) mMax));
            temp.add(tempDotVo4);
            DotVo tempDotVo5 = new DotVo("08/23", rand.nextInt((int) mMax));
            temp.add(tempDotVo5);
            DotVo tempDotVo6 = new DotVo("09/02", rand.nextInt((int) mMax));
            temp.add(tempDotVo6);

            mMulListDisDots.add(temp);
        }


    }


    private void initView() {
        mChartline = findViewById(R.id.chartline);
    }
}

複製程式碼

3.疊加柱狀圖

3.1 xml佈局

<wellijohn.org.varchart.overlay_bar_with_line_chart.OverLayBarChartLine
        android:id="@+id/overlay_chart_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:visibility="visible"
        app:overlay_default_x_visible_num="4.2"
        app:overlay_y_interval="40dp"
        app:overlay_y_num_text_max_width="56dp" />
複製程式碼

3.2 資料設定，如2.2一樣

3.實現的幾個關鍵點

3.1 寬度需要重寫，onMeasure，因為的控制元件的寬度是大於螢幕的寬度的，寬度是根據顯示的x軸的點和間距，以及y軸座標的文字的所佔的寬度的距離所組成。

        int widthParentMeasureMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthParentMeasureSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightParentMeasureMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightParentMeasureSize = MeasureSpec.getSize(heightMeasureSpec);
        int resultWidthSize = 0;
        int resultHeightSize = 0;
        int resultWidthMode = MeasureSpec.EXACTLY;//用來對childView進行計算的
        int resultHeightMode = MeasureSpec.EXACTLY;
        int paddingWidth = getPaddingLeft() + getPaddingRight();
        int paddingHeight = getPaddingTop() + getPaddingBottom();
        ViewGroup.LayoutParams thisLp = getLayoutParams();
        switch (widthParentMeasureMode) {
            //父類不加限制給子類
            case MeasureSpec.UNSPECIFIED:
                //這個代表在佈局寫死了寬度
                if (thisLp.width > 0) {
                    resultWidthSize = thisLp.width;
                    resultWidthMode = MeasureSpec.EXACTLY;
                } else {
                    resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
                    resultWidthMode = MeasureSpec.UNSPECIFIED;
                }
                break;
            case MeasureSpec.AT_MOST:
                //這個代表在佈局寫死了寬度
                if (thisLp.width > 0) {
                    resultWidthSize = thisLp.width;
                    resultWidthMode = MeasureSpec.EXACTLY;
                } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
                    resultWidthSize = Math.max(0, widthParentMeasureSize - paddingWidth);
                    resultWidthMode = MeasureSpec.AT_MOST;
                } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
                    resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
                    resultWidthMode = MeasureSpec.AT_MOST;
                }
                break;
            case MeasureSpec.EXACTLY:
                //這個代表在佈局寫死了寬度
                if (thisLp.width > 0) {
                    resultWidthSize = Math.min(widthParentMeasureSize, thisLp.width);
                    resultWidthMode = MeasureSpec.EXACTLY;
                } else if (thisLp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
                    resultWidthSize = widthParentMeasureSize;
                    resultWidthMode = MeasureSpec.EXACTLY;
                } else if (thisLp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
                    resultWidthSize = (int) (getYMaxTextWidth() + mXinterval * mXdots.length);
                    resultWidthMode = MeasureSpec.AT_MOST;
                }
                break;
        }


        setMeasuredDimension(MeasureSpec.makeMeasureSpec(resultWidthSize, resultWidthMode),
                MeasureSpec.makeMeasureSpec(resultHeightSize, resultHeightMode));
複製程式碼

3.2 規劃固定的區域，在超出區域的部分不可見，這個在之前用的bitmap來實現，總感覺彆扭，後面讀官方的原始碼的時候，瞭解了canvas的clipRect方法，我們在繪製這塊的時候，onDraw方法中呼叫

    int clipRestoreCount = canvas.save();
    canvas.clipRect(mContentRect);//繪製之前呼叫
    doDraw();//進行想要的繪製
    canvas.restoreToCount(clipRestoreCount);//繪製完成呼叫restoreToCount恢復到繪製這塊之前的狀態
複製程式碼

3.3 動畫我們基本都可以用ValueAnimator來實現，比如說餅狀圖：他的一個繪製是0-360的角度的轉變，我們就可以

    private void startPathAnim(long duration) {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 360);
        valueAnimator.setDuration(duration);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mDrawAngle = (float) animation.getAnimatedValue();
                ViewCompat.postInvalidateOnAnimation(CirclePercentChart.this);
            }
        });

        valueAnimator.start();

    }
複製程式碼

然後通過mDrawAngle來控制每次繪製的角度，這樣就可以有從0-360度繪製的感覺，那個柱狀圖的動畫也是一樣的，以不變應萬變。

3.4 貝塞爾曲線繪製的演算法

    if (i == 0) {// 第一條為二階貝塞爾
        path.moveTo(mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);// 起點
    } else {
        float cpx = preX + (mDots[0] - preX) / 2.0f;
        path.cubicTo(cpx, preY + (mLastHorLineY - preY) * mPhaseY,
                cpx, mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY,
                mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);}
複製程式碼

在繪製貝塞爾曲線，我仔細去查過這些控制點的計算規則，有根據三點，來計算出兩個控制點，但是這樣繪製出來在三個點內部曲線是很平滑的，但是在接下來的第四個點的銜接的時候，感覺不是很好，所以我還是用了上面的計算方法來計算控制點，演算法我貼出來，引數分別是1，2，3的x和y座標和彎曲係數

public static ControlPonits getControlPoints(double x0, double y0, double x1, double y1, double x2, double y2, double paramCoefficient) {
        double d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
        double d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
        double fa = paramCoefficient * d01 / (d01 + d12);   // scaling factor for triangle Ta
        double fb = paramCoefficient * d12 / (d01 + d12);   // ditto for Tb, simplifies to fb=t-fa
        double p1x = x1 - fa * (x2 - x0);    // x2-x0 is the width of triangle T
        double p1y = y1 - fa * (y2 - y0);    // y2-y0 is the height of T
        double p2x = x1 + fb * (x2 - x0);
        double p2y = y1 + fb * (y2 - y0);
        ControlPonits tempControlPoints = new ControlPonits();

        tempControlPoints.beforeControlPointX = (float) p1x;
        tempControlPoints.beforeControlPointY = (float) p1y;
        tempControlPoints.afterControlPointX = (float) p2x;
        tempControlPoints.afterControlPointY = (float) p2y;
        return tempControlPoints;
    }
複製程式碼

github地址
如果大家有好的想法的話，希望能夠交流下,如果你們覺得文章對你自定義view有幫助，希望你們幫忙點個贊或者關注下，謝謝

Android使用AChartEngine製作曲線、柱狀圖、餅形等圖表
2015-04-21
Android
canvas圖表(1) - 柱狀圖
2017-11-13
Canvas
資料視覺化：圖表篇（1）—— 基本柱狀圖、堆疊柱狀圖
2019-04-15
視覺化
柱狀圖
2024-04-02
使用 Flutter 繪製圖表（一）柱狀圖?
2020-06-02
Flutter
九、柱狀圖和3D柱狀圖
2020-12-21
3D
CSS3 - vue中純css實現柱狀圖表效果
2019-07-05
CSSS3Vue
vue實現一個動效柱狀圖
2018-08-04
Vue
【matplotlib 實戰】--柱狀圖
2023-10-07
MPAndroidChart繪製曲線圖、柱狀圖總結
2018-03-20
Android
oracle 柱狀圖（Histograms）
2018-04-25
OracleHistogram
CSS實現的柱狀圖效果例項程式碼
2017-02-23
CSS
JavaScript介面畫柱狀圖
2021-09-09
JavaScript
快捷簡易統計圖表模型設計與實現
2020-04-16
模型
銀彈谷v平臺圖表裡的柱狀圖顏色配置實用技巧
2021-11-10
柱狀圖、直方圖、散點圖、餅圖講解
2020-12-30
直方圖
如何基於 echarts 實現區間柱狀圖（包括橫向）？
2020-07-05
Echarts
Android原生簡易圖文編輯器和展示實現
2017-05-21
Android
Echarts 柱狀圖配置詳解
2018-07-28
Echarts
垂直柱狀圖（模擬+字串）
2020-10-03
字串
Oracle直方圖 (柱狀圖 histograms) 詳解
2009-09-10
Oracle直方圖Histogram
關於如何使用原生HTML + JS + CSS繪製簡單折線柱狀圖
2018-11-29
HTMLJSCSS
用Python生成柱狀圖、折線圖、餅狀圖來統計自己的手機話費
2019-05-07
Python
在Report Builder 3.0中生成柱狀圖和折線圖NU
2022-03-21
UI
Android 折線圖之hellocharts （餅狀圖）餅圖
2018-05-30
Android
自定義控制元件之kotlin繪製折線圖和曲線圖
2018-08-02
控制元件Kotlin
柱狀圖與執行計劃
2019-07-19
echarts 設定柱狀圖寬度
2024-03-20
Echarts
Android 折線圖的實現
2015-07-27
Android
Excel圖表中使用形狀並將柱形圖中的柱條變為箭頭的簡單技巧
2022-05-10
Excel
echarts如何在每個柱狀圖上都顯示氣泡詳解（好看的柱狀圖）
2017-12-15
Echarts
Python 利用pandas和matplotlib繪製柱狀折線圖
2023-11-09
Python
Android鬼點子 100行程式碼，搞定柱狀圖!
2019-02-26
Android行程
如何基於 echarts 在柱狀圖或條形圖上實現轉換率？（有想法嗎？）
2020-05-31
Echarts
echarts 柱狀圖詳解與使用集合
2020-10-19
Echarts
canvas帶有座標的柱狀圖效果
2018-05-28
Canvas
CSS如何實現柱狀效果
2017-02-10
CSS
Echarts根據資料長度變換柱狀圖柱狀的顏色
2019-01-10
Echarts