1. 程式人生 > >HelloChart應用之柱狀圖--關於需要動態滑動顯示大量柱體遇到的問題

HelloChart應用之柱狀圖--關於需要動態滑動顯示大量柱體遇到的問題

最近專案上需要用到一個圖表的繪製控制元件,於是選用了網路上較為常用的helloChart,專案的需求簡要概述就是收到一條訊息,將訊息中的攜帶的資料更新為介面上的柱狀圖,並且當前螢幕顯示最新的幾條資料,往後翻動可以檢視歷史資料,柱體的x軸標籤為柱體的接收時間。
看似很容易實現吧,實際上確實在查閱資料後確實能利用hello很快的編寫出來,但是…遇到了一個bug,查閱了很多資料也沒有解決掉,後來還是自己慢慢研究了兩天才解決掉(大神也可以覺得是小弟太菜導致的),具體是什麼bug呢?就是剛開始接收資料很好,但是當資料一多,到了某一個臨界點,就會出現柱體自動變窄,當前螢幕內的柱體個數也會隨著發生變化,我專案中編寫的程式碼是到120個柱體便會出現這種情況。(詳情請見下圖)剛開始百思不得其解其解,我在程式中未設定過120這個值啊,難道是helloChart作者設計的?

 出現bug的情況

可以看到在超過120多個柱體後,柱體的寬度在漸漸的變窄,原本設定的一屏六個柱體,慢慢也變得多了起來。如果新增的柱體越來越多,柱體會越來越窄,當然不符合需求了。於是開始尋求解決辦法。

在看了一堆部落格和各種評論後也始終沒有找到解決辦法,只能自己慢慢來,無意之中發現了一個寫helloChart常用API介紹的文章,於是按自己的理解進行嘗試,慢慢的終於解決了,先上一部分關鍵程式碼吧!需要其他程式碼請至文末點選下載連結進行下載。這是原始碼中相關的柱體配置好後需要呼叫的方法。

//設定圖表的相關配置資訊
    private void setColumnConfig(int currentNum) {
        /*===== 座標軸相關設定 =====*/
Axis axisX = new Axis(axisValues);//宣告X軸例項 Axis axisY = new Axis();////宣告Y軸例項 //初始化X軸 axisX.hasTiltedLabels();//設定斜體標籤 axisX.setHasTiltedLabels(true); axisX.setMaxLabelChars(6);//設定標籤與座標軸的距離 axisX.setAutoGenerated(true);//自動產生標籤 //初始化Y軸 axisY.setName("能量值"
);//設定豎軸名稱 axisY.setHasLines(true); axisY.setLineColor(Color.BLACK); axisY.setHasTiltedLabels(true); axisY.setAutoGenerated(true); mColumnChartData.setFillRatio(0.66f); mColumnChartData.setAxisXBottom(axisX); //設定橫軸 mColumnChartData.setAxisYLeft(axisY); //設定豎軸 mColumnChartView.setInteractive(true);//設定圖表是可以互動的(拖拽,縮放等效果的前提) mColumnChartView.setMaxZoom(currentNum/6+66);//按照柱體數量增加縮放次數 mColumnChartView.setColumnChartData(mColumnChartData); //下面的程式碼放在setColumnChartData之前是無法得到有效執行的 Viewport v = new Viewport(mColumnChartView.getMaximumViewport()); v.top = 105; v.bottom= 0; mColumnChartView.setMaximumViewport(v); v.left= currentNum-7;//從最右邊最新的資料開始進行顯示 v.right=currentNum; mColumnChartView.setCurrentViewport(v); }

最終的實現結果如下:
解決bug後效果
分析:最關鍵的就是

mColumnChartView.setMaxZoom(currentNum/6+66);

這行程式碼了,其中currentNum,是我當前新增的柱體個數,通過這句話,我動態的設定了hellochart的縮放倍數,因此能夠實現柱體再多,也能按之前設定的寬度顯示,沒有這句話就會出現上述的bug,終於正常實現需求了!真是開心!!!
還有個需要給大家補充的小竅門就是

axisX.setAutoGenerated(true);

這句程式碼了,因為在使用時無法檢視具體的柱體個數不是我定義的X軸標籤,利用這行程式碼可以自動產生標籤,以便於檢視柱體個數,若程式除錯成功,可將其註釋掉,便能顯示我需要的柱體生成時間了作為x軸的標籤了。
需要原始碼的朋友可以去我的github上下載原始碼:https://github.com/jiwanging/hellochartDemo.git