基于MPAndroidChart的自定義LineChart(一)----節(jié)點繪制叉號+分段繪制背景

MPAndroidChart是Android平臺上一款強大易用的圖表庫竖幔,支持線狀圖板乙、柱狀圖、散點圖等八種圖表類型和縮放赏枚、拖動(平移)亡驰、選擇等手勢晓猛,還支持動畫和高亮等功能饿幅。但是別人給好的功能畢竟只能滿足一般功能,一個程序員最基本的能力就應(yīng)該是根據(jù)需求做出自定義的功能了戒职,這里我對MPAndroidChart進(jìn)行一些改造栗恩,MPAndroidChart只能在節(jié)點繪制圓形,現(xiàn)在要給它加上繪制叉號的功能洪燥。另外磕秤,本來MPAndroidChart的背景只能設(shè)置整個一大塊背景乳乌,現(xiàn)在我加上了按行設(shè)置背景色的功能。

效果如圖:

節(jié)點的細(xì)節(jié)部分:

功能實現(xiàn)

繼承LineChart

自定義LineChart的第一步是要繼承LineChart市咆,實現(xiàn)其構(gòu)造方法汉操。然后重寫onDraw方法,在onDraw方法中,再繪制背景蒙兰,繪制叉號磷瘤,繪制圖表。這里要注意繪制的順序搜变,從下到上采缚,一層層疊加。

    /**
     * 重寫onDraw方法挠他,注意繪制順序扳抽,先繪制背景色,再繪制叉號殖侵,最后繪制圖表
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        drawBgColor(canvas);
        drawCross(canvas);
        super.onDraw(canvas);
        Log.i(TAG, "onDraw");
    }

畫背景

為了讓代碼看起來更直觀贸呢,我先創(chuàng)建了一個類BgColor,其中包含start拢军,stop和color三個屬性贮尉。

/**
 * Created by xiaoniu on 2017/4/10.
 * BgColor是設(shè)置背景的單位,創(chuàng)建時需要傳入起點和終點的值,還有要設(shè)置的顏色
 * 如要把縱坐標(biāo)20-40的背景設(shè)為紅色朴沿,就新建一個BgColor
 * new BgColor(20猜谚,40,Color.RED)
 */

public class BgColor {

    /**
     * @param start 起始點
     * @param stop 結(jié)束點
     * @param color 顏色
     */
    public BgColor( float start, float stop,int color) {
        this.start = stop;
        this.stop = start;
        this.color = color;
    }

    private float start;
    private float stop;
    private int color;

    public float getStart() {
        return start;
    }

    public void setStart(float start) {
        this.start = start;
    }

    public float getStop() {
        return stop;
    }

    public void setStop(float stop) {
        this.stop = stop;
    }

    public int getColor() {
        return color;
    }

    public void setColor(int color) {
        this.color = color;
    }
}

三個屬性分別對應(yīng)起始點赌渣,結(jié)束點和顏色魏铅。然后將自己需要設(shè)置的背景都放到一個List中。

    /**
     * 分段背景設(shè)置
     * @return 每條背景的組合
     */
    private ArrayList<BgColor> getBg() {
        ArrayList<BgColor> bgList = new ArrayList<>();

        bgList.add(new BgColor(10, 20, Color.YELLOW));//參數(shù)信息:縱坐標(biāo)從0到20設(shè)置顏色為黃色
        bgList.add(new BgColor(20, 40, 0xFF00FF00));//支持16進(jìn)制顏色
        bgList.add(new BgColor(40, 70, Color.BLUE));
        bgList.add(new BgColor(70, 80, Color.RED));
        return bgList;
    }

別忘了給圖表設(shè)置繪制背景的屬性坚芜,之后再把數(shù)據(jù)傳給圖表览芳。

//給表格背景添加顏色
mChart.setDrawBgColor(true);
//設(shè)置背景顏色的屬性
mChart.setBgColor(getBg());

而在自定義LineChart的drawBgColor方法中,就是從List中取出每個BgColor鸿竖,獲得其start和stop沧竟,再根據(jù)MPAndroidChart提供的能夠?qū)D表上的值轉(zhuǎn)換為像素坐標(biāo)點的方法getPixelForValues,得到需要繪制背景的左下角和右上角的坐標(biāo)缚忧,用canvas畫矩形就可以了悟泵。

private void drawBgColor(Canvas canvas) {
        if (enableDrawBgColor) {
            if (!bgList.isEmpty()) {
                Paint paint = new Paint();
                for (BgColor r : bgList
                        ) {
                    MPPointD pStart = this.getPixelForValues(this.getXChartMin(), r.getStart(), YAxis.AxisDependency.LEFT);//左下角
                    MPPointD pStop = this.getPixelForValues(this.getXChartMax(), r.getStop(), YAxis.AxisDependency.LEFT);//右上角
                    paint.setColor(r.getColor());
                    canvas.drawRect(new RectF((float) pStart.x, (float) pStart.y, (float) pStop.x, (float) pStop.y), paint);
                }
            }else {
                Log.i(TAG, "No BgColor to Draw");
            }
        }
    }

畫叉號

畫叉號之前要得到節(jié)點的數(shù)據(jù),同樣是利用getPixelForValues將圖表上的值轉(zhuǎn)化為像素坐標(biāo)點

private void drawCross(Canvas canvas) {

        if (enableDrawCross) {
            if (this.getData() != null) {
                LineDataSet set = (LineDataSet) this.getData().getDataSetByIndex(0);
                list = set.getValues();
                set.setDrawCircles(false);
                LineData data = new LineData(set);
                this.setData(data);
                for (Entry e : list
                        ) {
                    MPPointD p = this.getPixelForValues(e.getX(), e.getY(), YAxis.AxisDependency.LEFT);
                    drawNode(canvas, (float) p.x, (float) p.y);
                }
            }else{
                Log.i(TAG, "No Data to Draw");
            }
        }
    }

畫叉號就是繪制兩個互相垂直的直線糕非,有了像素坐標(biāo)點和canvas也就很簡單了。

    private void drawNode(Canvas canvas, float x, float y) {
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStrokeWidth(crossWidth);
        canvas.drawLine(x - crossLength / 2, y - crossLength / 2, x + crossLength / 2, y + crossLength / 2, paint);
        canvas.drawLine(x - crossLength / 2, y + crossLength / 2, x + crossLength / 2, y - crossLength / 2, paint);
    }

END

細(xì)節(jié)比較粗糙朽肥,以后再完善,歡迎評論交流衡招。

最后附上github代碼:https://github.com/xiaoniu/CrossNodeLineChart

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末篱昔,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子旱爆,更是在濱河造成了極大的恐慌,老刑警劉巖怀伦,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異山林,居然都是意外死亡房待,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進(jìn)店門桑孩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人流椒,你說我怎么就攤上這事明也。” “怎么了温数?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長撑刺。 經(jīng)常有香客問我,道長甫菠,這世上最難降的妖魔是什么冕屯? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮刹衫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘带迟。我一直安慰自己囱桨,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布搀继。 她就那樣靜靜地躺著翠语,像睡著了一般叽躯。 火紅的嫁衣襯著肌膚如雪肌括。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天黑滴,我揣著相機與錄音,去河邊找鬼袁辈。 笑死珠漂,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的媳危。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼卿泽,長吁一口氣:“原來是場噩夢啊……” “哼滋觉!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起椎侠,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤我纪,失蹤者是張志新(化名)和其女友劉穎慎宾,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體券犁,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡汹碱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了稚新。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片跪腹。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖笤妙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蹲盘,我是刑警寧澤膳音,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站苍凛,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏醇蝴。R本人自食惡果不足惜想罕,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望按价。 院中可真熱鬧,春花似錦癞志、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽屯碴。三九已至妖谴,卻和暖如春窿锉,著一層夾襖步出監(jiān)牢的瞬間膝舅,已是汗流浹背窑多。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留技潘,地道東北人。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓千康,卻偏偏與公主長得像,于是被迫代替她去往敵國和親值桩。 傳聞我的和親對象是個殘疾皇子豪椿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容