android自定义k线图,Android开发之基于MPAndroidChart实现股票K线图（二）

线图,Android开发之基于MPAndroidChart实现股票K线图（二）"/>

android自定义k线图,Android开发之基于MPAndroidChart实现股票K线图（二）

1 流程

1.1 原理

MPAndroidChart所提供的各种图表其实就是一种自定义控件，例如LineChart(折线图)、BarChart(直方图)以及准备要使用的CandleStickChart(蜡烛图)。

1.2 控件初始化

我们在布局xml文件中或在Activity代码里，去创建这些图表控件实例，然后在代码中进行一些基本交互设置。

android:id="@+id/candler_chart"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

以CandleStickChart为例：

1.2.1 基本设置

mChart.setStartAtZero(true);

mChart.setDrawYValues(false); // disable the drawing of values into the mChart

mChart.setDrawBorder(false); //是否在折线图上添加边框

mChart.setDescription("");// 数据描述

mChart.setNoDataTextDescription("You need to provide data for the mChart."); //如果没有数据的时候，会显示这个，类似listview的emtpyview

mChart.setDrawVerticalGrid(false); // enable / disable grid lines

mChart.setDrawHorizontalGrid(false);

mChart.setDrawGridBackground(false); // 是否显示表格颜色

mChart.setBackgroundColor(color);// 设置背景

mChart.setGridBackgroundColor(color);//设置表格背景色

mChart.setGridColor(Color.WHITE & 0x70FFFFFF); // 表格线的颜色，在这里是是给颜色设置一个透明度

mChart.setGridWidth(1.25f);// 表格线的线宽

mChart.setTouchEnabled(true); // enable touch gestures

mChart.setDragEnabled(true);// 是否可以拖拽

mChart.setScaleEnabled(true);// 是否可以缩放

mChart.setPinchZoom(false);// if disabled, scaling can be done on x- and y-axis separately

mChart.setScaleYEnabled(false);// if disabled, scaling can be done on x-axis

mChart.setScaleXEnabled(false);// if disabled, scaling can be done on y-axis

mChart.setValueTypeface(mTf);// 设置字体

// animate calls invalidate()...

mChart.animateX(2500); // 立即执行的动画,x轴

1.2.2 XY轴设置

X轴

XAxis xAxis =mChart.getXAxis();

xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

xAxis.setDrawGridLines(true);

xAxis.setSpaceBetweenLabels(12);//轴刻度间的宽度，默认值是4

xAxis.setGridColor(colorLine);//X轴刻度线颜色

xAxis.setTextColor(colorText);//X轴文字颜色

Y轴(可以设置左右两个Y轴)

YAxis leftAxis = mChart.getAxisLeft();

leftAxis.setEnabled(true);

leftAxis.setLabelCount(7,false);

leftAxis.setDrawGridLines(true);

leftAxis.setDrawAxisLine(false);

leftAxis.setGridColor(colorLine);

leftAxis.setTextColor(colorText);

YAxis rightAxis =mChart.getAxisRight();

rightAxis.setEnabled(false);

Y轴示意图.png

1.2.3 图例标识设置

// get the legend (only possible after setting data)

Legend l = mChart.getLegend(); // 设置比例图标示

l.setPosition(LegendPosition.BELOW_CHART_RIGHT); //显示位置

l.setForm(LegendForm.SQUARE);// 样式

l.setFormSize(6f);// 字号

l.setTextColor(Color.WHITE);// 颜色

l.setTypeface(mTf);// 字体

List labels=new ArrayList<>();

labels.add("红涨");

labels.add("绿跌");

List colors=new ArrayList<>();

colors.add(Color.RED);

colors.add(Color.GREEN);

l.setExtra(colors,labels);//设置标注的颜色及内容，设置的效果如下图

l.setEnabled(false);//决定显不显示标签

Legend示意图

1.3 传入数据，生成图表

CandleEntry是每一天股票价格的数据模型

public class CandleEntry extends Entry {

private float mShadowHigh = 0.0F;//当天最高价(蜡烛图上影线)

private float mShadowLow = 0.0F;//当天最低价(蜡烛图下影线)

private float mClose = 0.0F;//收盘价

private float mOpen = 0.0F;//开盘价

···

}

//模拟获得数据

List yVals1= Model.getCandleEntries();

CandleDataSet 类可以对图表的元素样式进行设置(例如 涨跌颜色、影线颜色等)

CandleDataSet set = new CandleDataSet(yVals1, "Data Set");

set.setAxisDependency(YAxis.AxisDependency.LEFT);

set.setShadowColor(Color.DKGRAY);//影线颜色

set.setShadowColorSameAsCandle(true);//影线颜色与实体一致

set.setShadowWidth(0.7f);//影线

set.setDecreasingColor(Color.RED);

set.setDecreasingPaintStyle(Paint.Style.FILL);//红涨，实体

set.setIncreasingColor(Color.GREEN);

set.setIncreasingPaintStyle(Paint.Style.STROKE);//绿跌，空心

set.setNeutralColor(Color.RED);//当天价格不涨不跌(一字线)颜色

set.setHighlightLineWidth(1f);//选中蜡烛时的线宽

set.setDrawValues(false);//在图表中的元素上面是否显示数值

set.setLabel(“label");//图表名称，可以通过mChart.getLegend().setEnable(true)显示在标注上

简单粗暴地通过set方法设置数据

CandleData data = new CandleData(xVals, set);

mChart.setData( data);

1.4 效果展示

像手势缩放、XY轴方向平移这些基本交互，框架已经帮我们实现。

当然这只是一个简单的demo，距离实际需求还有很大的差距，坑也是有的，例如：

只能通过一个方法set.setShadowColor(Color.DKGRAY);设置上影线/下影线颜色，如图 上影线/下影线都是黑色的，而不是随着当天的涨跌情况红杖绿跌，十分不和谐！

(此坑已填：set.setShadowColorSameAsCandle(true);)

简单K线图.png

1.5 其他

1.5.1 动画

animateX(int durationMillis) : x轴方向

animateY(int durationMillis) : y轴方向

animateXY(int xDuration, int yDuration) : xy轴方向

1.5.2 获取图表相关的数据

mChart.getCandleData();

mChart.getYChartMax();

mChart.getYChartMin();

mChart.getXChartMax();

mChart.getXChartMin();