HelloChart應用之柱狀圖--關於需要動態滑動顯示大量柱體遇到的問題
最近專案上需要用到一個圖表的繪製控制元件,於是選用了網路上較為常用的helloChart,專案的需求簡要概述就是收到一條訊息,將訊息中的攜帶的資料更新為介面上的柱狀圖,並且當前螢幕顯示最新的幾條資料,往後翻動可以檢視歷史資料,柱體的x軸標籤為柱體的接收時間。
看似很容易實現吧,實際上確實在查閱資料後確實能利用hello很快的編寫出來,但是…遇到了一個bug,查閱了很多資料也沒有解決掉,後來還是自己慢慢研究了兩天才解決掉(大神也可以覺得是小弟太菜導致的),具體是什麼bug呢?就是剛開始接收資料很好,但是當資料一多,到了某一個臨界點,就會出現柱體自動變窄,當前螢幕內的柱體個數也會隨著發生變化,我專案中編寫的程式碼是到120個柱體便會出現這種情況。(詳情請見下圖)剛開始百思不得其解其解,我在程式中未設定過120這個值啊,難道是helloChart作者設計的?
可以看到在超過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);
}
最終的實現結果如下:
分析:最關鍵的就是
mColumnChartView.setMaxZoom(currentNum/6+66);
這行程式碼了,其中currentNum,是我當前新增的柱體個數,通過這句話,我動態的設定了hellochart的縮放倍數,因此能夠實現柱體再多,也能按之前設定的寬度顯示,沒有這句話就會出現上述的bug,終於正常實現需求了!真是開心!!!
還有個需要給大家補充的小竅門就是
axisX.setAutoGenerated(true);
這句程式碼了,因為在使用時無法檢視具體的柱體個數不是我定義的X軸標籤,利用這行程式碼可以自動產生標籤,以便於檢視柱體個數,若程式除錯成功,可將其註釋掉,便能顯示我需要的柱體生成時間了作為x軸的標籤了。
需要原始碼的朋友可以去我的github上下載原始碼:https://github.com/jiwanging/hellochartDemo.git