2. 程式人生 > >一步一步教你寫股票走勢圖——分時圖五（自定義標記）

一步一步教你寫股票走勢圖——分時圖五（自定義標記）

阿新 • • 發佈：2019-01-08

分時圖開發到現在，基本已經完成了，這部分開發完，就會開始著手k線圖部分的開發。於是我們做了最後的對比，看下還有什麼地方需要增加修改，最後發現，還有標記檢視沒有，先看下什麼是標記檢視（博主不知道這個名字叫啥，自己起的）：

這裡寫圖片描述

我們可以看到高亮線的左右兩邊分別標記了y軸的左右兩邊的資料， 而且左右滑動的時候，他們位置會隨著交界點的變化而變。

本節將會介紹下如何去自定義左右兩個標記，相信小夥伴們理解之後，中間的白點也是可以自己任意新增的，不妨在本篇結束後，自己動手試一試！

好了，我們開始本章節的內容吧！

相信有的小夥伴們在剛使用MP這個庫的時候，一定見過如下的東東：

這裡寫圖片描述

沒錯，這就是標記檢視，選中某條資料的情況下，出現的檢視，我們就仿照它就沒錯。

看原始碼

MarkerView

public abstract class MarkerView extends RelativeLayout {

    /**
     * Constructor. Sets up the MarkerView with a custom layout resource.
     *
     * @param context
     * @param layoutResource the layout resource to use for the MarkerView
     */
    public MarkerView(Context context, int
 
 layoutResource) {
        super(context);
        setupLayoutResource(layoutResource);
    }

    /**
     * Sets the layout resource for a custom MarkerView.
     *
     * @param layoutResource
     */
    private void setupLayoutResource(int layoutResource) {

        View inflated = LayoutInflater.from(getContext()).inflate(layoutResource, this
 
);

        inflated.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        inflated.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));

        // measure(getWidth(), getHeight());
        inflated.layout(0, 0, inflated.getMeasuredWidth(), inflated.getMeasuredHeight());
    }

    /**
     * Draws the MarkerView on the given position on the screen with the given Canvas object.
     *
     * @param canvas
     * @param posx
     * @param posy
     */
    public void draw(Canvas canvas, float posx, float posy) {

        // take offsets into consideration
        posx += getXOffset(posx);
        posy += getYOffset(posy);

        // translate to the correct position and draw
        canvas.translate(posx, posy);
        draw(canvas);
        canvas.translate(-posx, -posy);
    }

    /**
     * This method enables a specified custom MarkerView to update it's content everytime the MarkerView is redrawn.
     *
     * @param e         The Entry the MarkerView belongs to. This can also be any subclass of Entry, like BarEntry or
     *                  CandleEntry, simply cast it at runtime.
     * @param highlight the highlight object contains information about the highlighted value such as it's dataset-index, the
     *                  selected range or stack-index (only stacked bar entries).
     */
    public abstract void refreshContent(Entry e, Highlight highlight);

    /**
     * Use this to return the desired offset you wish the MarkerView to have on the x-axis. By returning -(getWidth() /
     * 2) you will center the MarkerView horizontally.
     *
     * @param xpos the position on the x-axis in pixels where the marker is drawn
     * @return
     */
    public abstract int getXOffset(float xpos);

    /**
     * Use this to return the desired position offset you wish the MarkerView to have on the y-axis. By returning
     * -getHeight() you will cause the MarkerView to be above the selected value.
     *
     * @param ypos the position on the y-axis in pixels where the marker is drawn
     * @return
     */
    public abstract int getYOffset(float ypos);
}

建構函式中要傳入顯示的佈局檔案，draw會根據傳入的position定位，refreshContent更新裡面的文字。原始碼讀起來很簡單，只有幾個方法而已，我們在例項的時候只需傳入我們的佈局即可，於是我們模仿了一個寫法：

public class MyMarkerView extends MarkerView {
    private TextView markerTv;
    public MyMarkerView(Context context, int layoutResource) {
        super(context, layoutResource);
        markerTv = (TextView) findViewById(R.id.marker_tv);
    }

    @Override
    public void refreshContent(Entry e, Highlight highlight) {
   }

    @Override
    public int getXOffset(float xpos) {
        return 0;
    }

    @Override
    public int getYOffset(float ypos) {
        return 0;
    }
}


……

 private void setMarkerView(){
        MyMarkerView myMarkerView = new MyMarkerView(MinutesActivity.this, R.layout.mymarkerview);
        lineChart.setMarkerView(myMarkerView);
    }

最後圖表進行設定markerview，我們看下效果圖：
這裡寫圖片描述

問題：

  • 位置不對，預設只有一個，要顯示兩個標記

  • 觸控柱狀圖時，上面不顯示標記

    MrrkerView自身偏離Offset完成不了這樣的需求，那麼我們只能從表的重寫入手了。

在MyLineChart中重寫drawMarkerw方法


public void setHighlightValue(Entry e, Highlight h) {
        this.e = e;
        if (mData == null)
            mIndicesToHighlight = null;
        else {
            mIndicesToHighlight = new Highlight[]{
                    h};
        }
        invalidate();
    }
  @Override
    protected void drawMarkers(Canvas canvas) {
          if (!mDrawMarkerViews || !valuesToHighlight())
            return;
        for (int i = 0; i < mIndicesToHighlight.length; i++) {
            Highlight highlight = mIndicesToHighlight[i];
            int xIndex = mIndicesToHighlight[i].getXIndex();
            int dataSetIndex = mIndicesToHighlight[i].getDataSetIndex();
            float deltaX = mXAxis != null
                    ? mXAxis.mAxisRange
                    : ((mData == null ? 0.f : mData.getXValCount()) - 1.f);
            if (xIndex <= deltaX && xIndex <= deltaX * mAnimator.getPhaseX()) {
                Entry e = mData.getEntryForHighlight(mIndicesToHighlight[i]);
                // make sure entry not null
                if (e == null || e.getXIndex() != mIndicesToHighlight[i].getXIndex())
                    continue;
                float[] pos = getMarkerPosition(e, highlight);
                // check bounds
                if (!mViewPortHandler.isInBounds(pos[0], pos[1]))
                    continue;

                float yValForXIndex1 = minuteHelper.getDatas().get(mIndicesToHighlight[i].getXIndex()).cjprice;
                float yValForXIndex2 = minuteHelper.getDatas().get(mIndicesToHighlight[i].getXIndex()).per;

                myMarkerViewLeft.setData(yValForXIndex1);
                myMarkerViewRight.setData(yValForXIndex2);
                myMarkerViewLeft.refreshContent(e, mIndicesToHighlight[i]);
                myMarkerViewRight.refreshContent(e, mIndicesToHighlight[i]);
                /*修復bug*/
                // invalidate();
                /*重新計算大小*/
                myMarkerViewLeft.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
                        MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
                myMarkerViewLeft.layout(0, 0, myMarkerViewLeft.getMeasuredWidth(),
                        myMarkerViewLeft.getMeasuredHeight());
                myMarkerViewRight.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
                        MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
                myMarkerViewRight.layout(0, 0, myMarkerViewRight.getMeasuredWidth(),
                        myMarkerViewRight.getMeasuredHeight());

                myMarkerViewLeft.draw(canvas, mViewPortHandler.contentLeft() - myMarkerViewLeft.getWidth(), pos[1] - myMarkerViewLeft.getHeight() / 2);
                myMarkerViewRight.draw(canvas, mViewPortHandler.contentRight(), pos[1] - myMarkerViewRight.getHeight() / 2);
            }
        }

    }

然後在activity中

 private void setMarkerView(MinuteHelper mData){
        MyLeftMarkerView leftMarkerView = new MyLeftMarkerView(MinutesActivity.this, R.layout.mymarkerview);
        MyRightMarkerView rightMarkerView = new MyRightMarkerView(MinutesActivity.this, R.layout.mymarkerview);
        lineChart.setMarker(leftMarkerView, rightMarkerView, mData);
    }

同時圖表的選中也得進行修改傳入引數

  lineChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
            @Override
            public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
                barChart.highlightValues(new Highlight[]{h});
                lineChart.setHighlightValue(e,h);
            }
            @Override
            public void onNothingSelected() {

            }
        });
        barChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
            @Override
            public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
              //  barChart.highlightValues(new Highlight[]{h});
                lineChart.setHighlightValue(e, new Highlight(h.getXIndex(),0));//此函式已經返回highlightBValues的變數，並且重新整理，故上面方法可以註釋
               // barChart.setHighlightValue(h);
            }

            @Override
            public void onNothingSelected() {

            }
        });

看得比較亂的同學，可以直接檢視demo程式碼，這裡只是簡單的放出程式碼而已，邏輯上估計還有點亂。博主不得不承認，在處理自定義標記的部分程式碼寫的有點渣，中間碰到很多坑，最後也是碰巧實現了效果，博主很納悶，為啥要從activity中傳入Entry的引數才行，而在MyLineChart中直接引用系統的Entry和mData卻行不通，希望哪位大神研究後能給出答案，或者在處理自定義標記這邊有更好見解的歡迎留言或者聯絡我。下面我們看下效果圖吧（考慮到是仿照自選股app，所以顏色上也基本參考了它）：
（注：以上bug，6.17日已修復，上面程式碼已替換最新）

這裡寫圖片描述

總結：分時圖寫到這裡基本告一段落了，大概的功能也都能實現了，如果有什麼問題，請留言，博主一定盡力解決，同時發現demo有bug啥的或者更好的處理方式，也歡迎聯絡我。端午後將會更新大家期待已久的K線圖，歡迎大家star我的專案https://github.com/AndroidJiang/StockChart，最後祝大家端午快樂！。

相關推薦

一步一步教你寫股票走勢圖——分時圖五（自定義標記）

分時圖開發到現在，基本已經完成了，這部分開發完，就會開始著手k線圖部分的開發。於是我們做了最後的對比，看下還有什麼地方需要增加修改，最後發現，還有標記檢視沒有，先看下什麼是標記檢視（博主不知道這個名字叫啥，自己起的）： 我們可以看到高亮

一步一步教你寫股票走勢圖——K線圖二（圖表聯動）

K線圖越做發現坑越多，跟之前做的分時圖完全不是一個重量級的啊，分時圖不需要滾動，少走了很多彎路，K線圖因為滾動的問題，會導致很多其他問題，比如： 多個圖表之間滾動時怎麼聯動 高亮滾動衝突 放縮聯動 … 表對齊 下面我們就開始介紹本

一步一步教你寫股票走勢圖——分時圖四（高亮聯動）

前一節我們學習了有關柱狀圖的高亮自定義，那麼這一節我們來搞一搞兩張圖表的聯動效果，先看一下我們要實現的效果。 我們要實現兩張圖表之間建立了連線，我們滾動高亮第一張圖，第二張圖表的高亮也會跟著動，滾動第二張圖表第一張要跟著動。 分析原始

一步一步教你寫股票走勢圖——K線圖三（新增均線）

在開篇之前，給大家出個小演算法題，一定要做哦，因為既然你打算看本章節內容了，那麼這個小演算法必須得會的喲！ 有一組數，1、2、3……99、100，一共一百個數，假設是ListA，現在將 ListA索引為0、1、2、3、4的數相加

一步一步教你寫股票走勢圖——K線圖四（高亮聯動一）

k線圖的第二節末尾，已經初步講解了高亮聯動，但是效果沒有達到我們的預期，因為k線圖本身就支援左右滾動，所以在滾動高亮的時候就出現了衝突，我們那會只實現了點選圖表，實現高亮的展示，但是效果還是太差，所以才有了我們今天這節的內容，將會優化體驗效果

一步一步教你寫股票走勢圖——K線圖五（高亮聯動二）

Bug分析： 之前我們長按移動上面圖表的高亮時，下面柱狀圖的高亮顯示是正常的，但是，我們長按柱狀圖高亮時，bug就來了，上面的圖表很傲嬌啊，高亮壓根不顯示，我們還是看一下之前的效果圖： Bug解決： 還好這位chenguang79的

少說話多寫程式碼之Python學習056——標準模組（自定義模組）

我們前面知道了如何匯入外部模組，比如常用的math模組， import math print(math.sin(90)) 輸出 0.8939966636005579 我們也可以自己定義一個模組，比如我的程式都在這個目錄下， 圖1 然後在當前目錄下，再建立一個MyFirstLi

Eclipse RCP 資源管理（自定義Project）一 （轉）

com time projects 工作臺 回寫 resource rep abc 管理 基本概念 Eclipse開發平臺提供資源插件（org.eclipse.core.resources），插件提供對項目（Project）、文件（File）、文件夾（Folder）的相關管

ML：教你聚類並構建學習模型處理資料（附資料集）

本文將根據41個描述性分類特徵的維度，運用無監督主成分分析(PCA)和層次聚類方法對觀測進行分組。將資料聚類可以更好地用簡單的多元線性模型描述資料或者識別更適合其他模型的異常組。此方法被編寫在python類中，以便將來能實現類似網格搜尋的引數優化。 結果與討論 本專案

Android Studio中AspectJ的簡單使用一（自定義PointCut）

    使用自定義註解的方式，步驟如下     1.建立自定義註解；     2.建立操作類(切入檔案)；     3.呼叫註解。    一、建立自定義註解。      程式碼如下。package cm.richeninfo.com.astestaspect20180309.

少說話多寫程式碼之Python學習039——類01（如何定義類 ）

在我們使用的面嚮物件語言中，類是一個基礎單元；一個超級程式工程，其基本組成也是類。Python中如何定義一個類，我們來看看， class Person:     def setName(self,name):        self

一步一步教你寫一個快遞查詢APP（適合新手）

前言： 水平：自學Android十五天，以前有過混日子的程式設計經驗。 目標： 《第一行程式碼》學完之後，總想寫個APP，天氣的APP寫了個初版，後面再說，今天演示的是製作快遞查詢APP的整個經過。 適合人群：新手 工具：A

一步一步教你寫SAP RFC （實戰專案）

函式目的：OA通過讀取採購訂單號獲取物料號最近5次變價記錄，結果如圖1-1所示   1）  通過TCode：SE37，我們既可以進入RFC的開發初始介面，如圖1-2所示。 2）  與Report不同的是，新建RFC程式前必須先定義一個FuncitonGroup,一個Gr

小程序初體驗：手把手教你寫出第一個小程序（一）

輸入框 個人 創建 公測 快速 nsh 成功 too 調用 本文筆者將根據quick start中的範例代碼，帶大家簡單地剖析一下小程序的運行方式，並介紹小程序開發中一些通用的特性，帶著大家一步步寫出自己的小程序。 適用對象：前端初學者，對小程序開發感興趣者 tip

教你寫響應式框架（一）

在真正開始編寫自己的響應式框架之前，我們先來從觀察者模式說起。已經對觀察者模式很熟悉的可以直接掠過。 基本概念 觀察者模式屬於物件行為模式之一，也可叫做釋出——訂閱模式。它定義了一種以對多的依賴關係，讓多個觀察者（訂閱者）同時觀察（監聽）一個被觀察者（主

手把手教你寫Linux裝置驅動---定時器(一)(基於友善之臂4412開發板)

這個專題我們來說下Linux中的定時器。在Linux核心中，有這樣的一個定時器，叫做核心定時器，核心定時器用於控制某個函式，也就是定時器將要處理的函式在未來的某個特定的時間內執行。核心定時器註冊的處理函

Android開發之手把手教你寫ButterKnife框架（一）

系列文章目錄導讀： 一、概述 JakeWharton我想在Android界無人不知，無人不曉的吧， ButterKnife這個框架就是出自他隻手。這個框架我相信很多人都用過，本系列部落格就是帶大家更加深入的認識這個框架，ButterKnife截至目前

教你寫Http框架（一）

大家都知道，從本質上來說app實際只是整個大系統當中的View層，因為設計優秀的系統中，app基本都不會承擔任何實際的業務邏輯處理，只是負責向用戶展示資料以及從使用者端蒐集使用者資料。而這個資料的一來一去，自然離不開網路通訊協議，而我們用得最多的，自然是這個ht

四個步驟教你寫好一款產品的運營資料分析報告（轉）

收藏~ 遊戲運營期間，我們可以在後臺看到一堆遊戲相關資料，對於這些資料我們要怎麼怎麼進行處理分析呢？下面將圍繞一份報告例項做詳細的分析。內容主要包括分析目標、分析綜述、一週運營資料分析、運營資料總體分析四塊內容 一、 確定分析目標 分析目標主要包括以下三個方面： ●

手把手教你寫fio 插件（一）

type 添加 libaio sample rev any ins The direct FIO是一款方便IO性能測試的工具，以統計全面、模式靈活深得用戶歡心。當前支持libaio、sync等IO引擎。在存儲系統開發中，如何快速快速全面評測系統IO性能？給FIO添加調用存儲