1. 程式人生 > >一步一步教你寫股票走勢圖——K線圖五(高亮聯動二)

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

Bug分析:

之前我們長按移動上面圖表的高亮時,下面柱狀圖的高亮顯示是正常的,但是,我們長按柱狀圖高亮時,bug就來了,上面的圖表很傲嬌啊,高亮壓根不顯示,我們還是看一下之前的效果圖:

這裡寫圖片描述

Bug解決:

還好這位chenguang79的小夥伴比較給力,在文章的結尾,給我留了言,雖然沒有解決掉bug,但是卻給了我思路啊,於是博主迫不及待動工,順著思路就開幹啊!

我們發現當柱狀圖高亮主動,蠟燭圖高亮被動的時候,蠟燭圖是壓根不給你面子的,就是穩穩不動,你能拿我咋地?於是我們就換一種方式,你蠟燭圖不動,但是我上面的圖表除了你蠟燭圖,還有三根折線圖啊,你不動,我去找他們幫忙,至多塞點小費唄,咱不缺錢!

於是我們在setMaLine方法中,加入如下程式碼:

 if(ma==5) {
            lineDataSetMa.setHighlightEnabled(true);
            lineDataSetMa.setDrawHorizontalHighlightIndicator(false);
            lineDataSetMa.setHighLightColor(Color.WHITE);
        }else{/*此處必須得寫*/
            lineDataSetMa.setHighlightEnabled(false
); }

這裡需要注意的是,我們只設置5日均線圖的高亮,其他兩根你既不能設定高亮,也不能放任不管,我們得設為false,小夥伴們可以測試下為什麼這樣,好啦,這下我們來看看效果咋樣:

這裡寫圖片描述

哎喲,還真有用了啊,但是仔細一看,fuck啊,這他媽的bug又來了啊,雖然可以高亮聯動了,但是你前面那幾根怎麼還是那麼傲嬌呢,我們坐下來靜靜想了想,奧,我們設定了5日均線的高亮,mp庫預設的沒有資料的情況下,它是沒有高亮的,於是乎,我們只能從原始碼著手了啊。

順著藤,摸著瓜,一路找到它老家。這一路找的可心酸啦,總算找到折線圖高亮實現的地方了。請大家傳送到LineChartRenderer這個類下面,然後找到drawHighlighted(Canvas c, Highlight[] indices)這個方法,這就是繪製折線圖高亮的地方。

  @Override
    public void drawHighlighted(Canvas c, Highlight[] indices) {

        LineData lineData = mChart.getLineData();

        for (Highlight high : indices) {

            final int minDataSetIndex = high.getDataSetIndex() == -1
                    ? 0
                    : high.getDataSetIndex();
            final int maxDataSetIndex = high.getDataSetIndex() == -1
                    ? lineData.getDataSetCount()
                    : (high.getDataSetIndex() + 1);
            if (maxDataSetIndex - minDataSetIndex < 1)
                continue;

            for (int dataSetIndex = minDataSetIndex;
                 dataSetIndex < maxDataSetIndex;
                 dataSetIndex++) {

                ILineDataSet set = lineData.getDataSetByIndex(dataSetIndex);

                if (set == null || !set.isHighlightEnabled())
                    continue;

                int xIndex = high.getXIndex(); // get the
                // x-position

                if (xIndex > mChart.getXChartMax() * mAnimator.getPhaseX())
                    continue;

                final float yVal = set.getYValForXIndex(xIndex);

                if (Float.isNaN(yVal))
                    continue;

                float y = yVal * mAnimator.getPhaseY(); // get
                // the
                // y-position

                float[] pts = new float[]{
                        xIndex, y
                };

                mChart.getTransformer(set.getAxisDependency()).pointValuesToPixel(pts);

                // draw the lines
                drawHighlightLines(c, pts, set);
            }
        }
    }

我們簡單的看一下原始碼,發現也很好理解,就是遍歷高亮嘛!將位置傳給drawHighlightLines去繪製,我們可以列印下xIndex,發現它是從0開始的,那就放心了,看到裡面有這句話,二話不說幹掉他:

 /*註釋此處,防止資料為空時,無高亮*/
 if (Float.isNaN(yVal))
                    continue;

這樣,我們遇到空資料時,就不會跳過啦!最後看下效果:

這裡寫圖片描述

完美!完美!完美!完美!完美!完美!完美!完美!完美!完美!完美!完美!完美!完美!完美!完美!

高亮聯動就到此為止啦,如果有啥問題,歡迎留言啊!