這篇文章主要介紹如何使用MPAndroidChart庫實現(xiàn)K線面板的相關功能骡送,我們會著重介紹以下幾個方面:
1.繪制K線圖和展示股票數(shù)據(jù)
2.處理用戶手勢操作
3.拉伸和壓縮K線圖
最終的效果圖:
源碼下載地址:https://github.com/Lonely7th/TsAndroidClient
繪制K線圖和展示股票數(shù)據(jù)
繪制K線圖需要用到真實的股票數(shù)據(jù)淹冰,網(wǎng)上有很多免費的接口可以使用,我們也可以自己編寫一個股票數(shù)據(jù)接口 Python實現(xiàn)股票數(shù)據(jù)接口
1.將MPAndroidChart集成到項目中
在project根目錄的build.gradle添加中央庫地址:
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}
在項目build.gradle中添加相關依賴:
dependencies {
compile 'com.github.PhilJay:MPAndroidChart:v2.2.4'
}
2.在布局文件中添加CandleStickChart
<com.github.mikephil.charting.charts.CandleStickChart
android:id="@+id/candler_chart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/top_line"
android:layout_above="@+id/rl_bottom_view"/>
mChart = findViewById(R.id.candler_chart);
3.基本參數(shù)設置
設置提示文字
mChart.setNoDataTextDescription("加載中...");//如果沒有數(shù)據(jù)的時候兵罢,會顯示這個
設置背景顏色
mChart.setDrawGridBackground(false);//是否顯示表格顏色
mChart.setBackgroundColor(Color.BLACK);//設置背景
mChart.setGridBackgroundColor(Color.BLACK);//設置表格背景色
設置坐標軸栗柒,坐標軸分為x軸、左y軸和右y軸就珠,可以分別設置寇壳,這里我們?nèi)∠鹸軸和右y軸醒颖,只設置左y軸的屬性。
//設置x軸
XAxis xAxis = mChart.getXAxis();
xAxis.setEnabled(false);
//設置y軸(左邊)
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setEnabled(true);
leftAxis.setLabelCount(5, false);
leftAxis.setDrawGridLines(true);//繪制網(wǎng)格線
leftAxis.setDrawAxisLine(false);
leftAxis.setGridColor(ContextCompat.getColor(MainActivity.this, R.color.gray_overlay));//設置網(wǎng)格線的顏色
leftAxis.setTextColor(Color.WHITE);//坐標軸文字顏色
leftAxis.setValueFormatter(new MyYAxisValueFormatter());//坐標軸文字格式
//設置y軸(右邊)
YAxis rightAxis = mChart.getAxisRight();
rightAxis.setEnabled(false);
設置高亮
mChart.setHighlightPerDragEnabled(false);//直接拖動屏幕時不顯示高亮
mChart.setHighlightPerTapEnabled(false);//點擊屏幕時不顯示高亮
設置監(jiān)聽(在第二個章節(jié)中我們會詳細介紹如何使用這些監(jiān)聽實現(xiàn)各種手勢操作壳炎,這里不再贅述)
mChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
@Override
public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
if (isLongPressed) {
}
}
@Override
public void onNothingSelected() {
}
});
mChart.setOnChartGestureListener(new OnChartGestureListener() {
@Override
public void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
}
@Override
public void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
}
@Override
public void onChartLongPressed(MotionEvent me) {
}
@Override
public void onChartDoubleTapped(MotionEvent me) {
}
@Override
public void onChartSingleTapped(MotionEvent me) {
}
@Override
public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY) {
}
@Override
public void onChartScale(MotionEvent me, float scaleX, float scaleY) {
}
@Override
public void onChartTranslate(MotionEvent me, float dX, float dY) {
}
});
4.獲取數(shù)據(jù)/添加數(shù)據(jù)
這里我們通過 http://47.95.243.173/tkdata?code=000001接口獲取數(shù)據(jù)泞歉,接口的實現(xiàn)過程請點擊 Python實現(xiàn)股票數(shù)據(jù)接口
OkGo.get(HttpApi.BASE_URL).tag(this)
.params("code", tkCode)
.execute(new StringCallback() {
@Override
public void onSuccess(String s, Call call, Response response) {
try {
Log.d(TAG, s);
JSONObject result = new JSONObject(s);
if (result.getInt("code") == 200) {
loadError = false;
if (tkData != null) {
tkData.clear();
}
String data = result.getString("data");
JSONArray array = new JSONArray(data);
for (int i = 0; i < array.length(); i++) {
JSONObject item = (JSONObject) array.opt(array.length() - 1 - i);
//解析基礎數(shù)據(jù)
TkDetailsBean bean = new TkDetailsBean(
item.getString("cur_min_price"), item.getString("cur_close_price"),
item.getString("cur_timer"), item.getString("cur_price_range"),
item.getString("cur_max_price"), item.getString("cur_total_money"),
item.getString("cur_total_volume"), item.getString("cur_open_price")
);
tkData.add(bean);
}
}
} catch (JSONException e) {
e.printStackTrace();
}
}
@Override
public void onError(Call call, Response response, Exception e) {
super.onError(call, response, e);
if (reLoad) {
loadStickData(tkCode, false);//首次加載失敗時再次加載
} else {
loadError = true;
SharedPreferencesUtils.setCurrentTkCode(tkCode);
ToastUtils.makeToast(MainActivity.this, "加載失敗,請檢查網(wǎng)絡");
}
}
獲取到數(shù)據(jù)后我們創(chuàng)建一個CandleDataSet對象匿辩,CandleDataSet需要傳入一個List<CandleEntry>類型的參數(shù)腰耙,這個參數(shù)就是待展示的股票數(shù)據(jù)
CandleEntry ce = new CandleEntry(i-start_index, shadowH, shadowL, open, close);
yVals.add(ce);
candleDataSet = new CandleDataSet(yVals, "");
candleDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
candleDataSet.setShadowColor(Color.DKGRAY);//影線顏色
candleDataSet.setShadowColorSameAsCandle(true);//影線顏色與實體一致
candleDataSet.setShadowWidth(0.7f);//影線candleDataSet.setDecreasingColor(ContextCompat.getColor(MainActivity.this, R.color.blue_overlay));//下跌的顏色
candleDataSet.setDecreasingPaintStyle(Paint.Style.FILL);//紅漲,實體
candleDataSet.setIncreasingColor(Color.RED);//上漲的顏色
candleDataSet.setIncreasingPaintStyle(Paint.Style.STROKE);//綠跌铲球,空心
candleDataSet.setNeutralColor(Color.RED);//當天價格不漲不跌(一字線)顏色
candleDataSet.setHighlightLineWidth(0.5f);//選中蠟燭時的線寬 candleDataSet.setDrawValues(false);//在圖表中的元素上面是否顯示數(shù)值
candleDataSet.setHighLightColor(ContextCompat.getColor(MainActivity.this, R.color.y_page_bg));//高亮的顏色
CandleData candleData = new CandleData(xVals, candleDataSet);
最后我們將candleDataSet綁定到CandleStickChart
mChart.setData(candleData);
到此為止挺庞,我們已經(jīng)使用MPAndroidChart完成了一個靜態(tài)的K線面板,下個章節(jié)我們將介紹如何為K線面板添加手勢操作