这篇文章主要介绍如何使用MPAndroidChart库实现K线面板的相关功能，我们会着重介绍以下几个方面：
1.绘制K线图和展示股票数据
2.处理用户手势操作
3.拉伸和压缩K线图
最终的效果图：![]()
图1
绘制K线图和展示股票数据
绘制K线图需要用到真实的股票数据，网上有很多免费的接口可以使用，我们也可以自己编写一个股票数据接口 Python实现股票数据接口
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
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.基本参数设置
设置提示文字
mChart.setNoDataTextDescription("加载中...");//如果没有数据的时候，会显示这个
设置背景颜色
mChart.setDrawGridBackground(false);//是否显示表格颜色mChart.setBackgroundColor(Color.BLACK);//设置背景mChart.setGridBackgroundColor(Color.BLACK);//设置表格背景色
设置坐标轴，坐标轴分为x轴、左y轴和右y轴，可以分别设置，这里我们取消x轴和右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);//绘制网格线leftAxis.setDrawAxisLine(false);
leftAxis.setGridColor(ContextCompat.getColor(MainActivity.this, R.color.gray_overlay));//设置网格线的颜色leftAxis.setTextColor(Color.WHITE);//坐标轴文字颜色leftAxis.setValueFormatter(new MyYAxisValueFormatter());//坐标轴文字格式//设置y轴(右边)YAxis rightAxis = mChart.getAxisRight();
rightAxis.setEnabled(false);
设置高亮
mChart.setHighlightPerDragEnabled(false);//直接拖动屏幕时不显示高亮mChart.setHighlightPerTapEnabled(false);//点击屏幕时不显示高亮
设置监听(在第二个章节中我们会详细介绍如何使用这些监听实现各种手势操作，这里不再赘述)
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.获取数据/添加数据
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);
//解析基础数据 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, "加载失败，请检查网络");
}
}
获取到数据后我们创建一个CandleDataSet对象，CandleDataSet需要传入一个List类型的参数，这个参数就是待展示的股票数据
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);//在图表中的元素上面是否显示数值candleDataSet.setHighLightColor(ContextCompat.getColor(MainActivity.this, R.color.y_page_bg));//高亮的颜色CandleData candleData = new CandleData(xVals, candleDataSet);
最后我们将candleDataSet绑定到CandleStickChart
mChart.setData(candleData);
到此为止，我们已经使用MPAndroidChart完成了一个静态的K线面板，下个章节我们将介绍如何为K线面板添加手势操作
转播
