Android开发之基于MPAndroidChart实现股票K线图(三)

接上文Android开发之基于MPAndroidChart实现股票K线图(二),实现了最基本的K线图效果后,接下来要做的事便是引入移动平均线。

1 介绍

移动平均线(Moving Average,简称MA),它是将某一段时间的收盘价之和除以该周期。 比如日线MA5指5天内的收盘价除以5 。通常情况下,日K线图和平均线放在同一张图里分析,最简单的分析思路就是 比较证券价格移动平均线与证券自身价格的关系。当证券价格上涨,高于其移动平均线,则产生购买信号。当证券价格下跌,低于其移动平均线,则产生出售信号。
在每日K线图上常出现的是5日均线(MA5)、10日均线(MA10)、20日均线(MA20)三种。

《Android开发之基于MPAndroidChart实现股票K线图(三)》 日K线图和平均线

2 代码思路

现在的需求就是 使用MPAndroidChart在画出日K线图移动平均线,也就是说 要在同一个坐标系下,同时画出K线图(CandleStickChart)和折线图(LineChart)。而框架提供了一个强大的CombinedChart让我们去绘制这种组合图形。

public class CombinedChart

This chart class allows the combination of lines, bars, scatter and candle data all displayed in one chart area.

CombinedChartCandleStickChart以及LineChart的使用方式差不多。都是通过chart.setData()方法将数据以及相关设置传递到图表中并展示出来。

public class CombinedChart{
……
public void setData(CombinedData data)
}

那么关键就是如何去构建这个CombinedData实例。

public Class CombinedData{
……
void setData(BarData data)
void setData(BubbleData data)
void setData(CandleData data)
void setData(LineData data)
void setData(ScatterData data)
}

可以发现,CombinedData可以通过简单的setData方法来设置我们在CombinedChart中要显示的图表数据。
那么,代码流程如下:

  1. 构建好CandleData以及LineData
  2. 通过CombinedData.setData(CandleData data)CombinedData.setData(LineData data)完成组合图中的数据模型构建
  3. 最后通过CombinedChart.setData(CombinedData data)便轻松绘制出日K线图+移动平均线的股票价格图表!

3 核心代码

First of all,在Activity的布局中中加入CombinedChart

   <com.github.mikephil.charting.charts.CombinedChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
  1. 构建CandleData
private CandleData generateCandleData() {
       List<CandleEntry> candleEntries = Model.getCandleEntries();
        CandleDataSet set = new CandleDataSet(candleEntries, "");
        set.setAxisDependency(YAxis.AxisDependency.LEFT);
        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.setShadowColorSameAsCandle(true);
        set.setHighlightLineWidth(0.5f);
        set.setHighLightColor(Color.WHITE);
        set.setDrawValues(false);
        CandleData candleData = new CandleData(xVals);
        candleData.addDataSet(set);
        return candleData;
    }```
2.  指定数据、线颜色、标签生成LineDataSet

private LineDataSet generateLineDataSet(List<Entry> entries, int color, String label) {
LineDataSet set = new LineDataSet(entries, label);
set.setColor(color);
set.setLineWidth(1f);
set.setDrawCubic(true);//圆滑曲线
set.setDrawCircles(false);
set.setDrawCircleHole(false);
set.setDrawValues(false);
set.setHighlightEnabled(false);
set.setAxisDependency(YAxis.AxisDependency.LEFT);
return set;
}

3. 构建LineData:MA5\MA10\MA20三条折线图对应不同的数据和折线颜色(这些通过LineDataSet指定),所以传入一个LineDataSet数组来构建LineData

private LineData generateMultiLineData(LineDataSet… lineDataSets) {
List<ILineDataSet> dataSets = new ArrayList<>();
for (int i = 0; i < lineDataSets.length; i++) {
dataSets.add(lineDataSets[i]);
}
LineData data = new LineData(xVals, dataSets);

    return data;
}```
  1. 构建CombineData
 private void loadChartData() {
        mChart.resetTracking();
        candleEntries = Model.getCandleEntries();//模拟获取日K图数据集合
        itemcount = candleEntries.size();
        List<StockListBean.StockBean> stockBeans = Model.getData();
        xVals = new ArrayList<>();//X轴坐标集合
        for (int i = 0; i < itemcount; i++) {
            xVals.add(stockBeans.get(i).getDate());
        }

       CombinedData combinedData = new CombinedData(xVals);

        /*k line*/
        candleData = generateCandleData();
        combinedData.setData(candleData);//加入K线图数据

        /*ma5*/
        ArrayList<Entry> ma5Entries = new ArrayList<Entry>();
        for (int index = 0; index < itemcount; index++) {
            ma5Entries.add(new Entry(stockBeans.get(index).getMa5(), index));
        }
        /*ma10*/
        ArrayList<Entry> ma10Entries = new ArrayList<Entry>();
        for (int index = 0; index < itemcount; index++) {
            ma10Entries.add(new Entry(stockBeans.get(index).getMa10(), index));
        }
        /*ma20*/
        ArrayList<Entry> ma20Entries = new ArrayList<Entry>();
        for (int index = 0; index < itemcount; index++) {
            ma20Entries.add(new Entry(stockBeans.get(index).getMa20(), index));
        }

        lineData = generateMultiLineData(//包含三种折线图的LineData
                generateLineDataSet(ma5Entries, colorMa5, "ma5"),
                generateLineDataSet(ma10Entries, colorMa10, "ma10"),
                generateLineDataSet(ma20Entries, colorMa20, "ma20"));

        combinedData.setData(lineData);//加入MA5\MA10\MA20三种折线图数据
    }
  1. 大功告成
    做完以上的数据初始化工作以后,只剩最后一步,更新CombinedChart:
 mChart.setData(combinedData);//当前屏幕会显示所有的数据
 mChart.animateX(1500);

《Android开发之基于MPAndroidChart实现股票K线图(三)》 最终效果:日K+MA5\MA10\MA20

4 总结

强大的MPAndroidChart库 支持绘制多种图表,不同的Chart之间的设置方法基本一致,setData()万变不离其宗。

5 Demo源码

github_KLineChartDemo

    原文作者:天才木木
    原文地址: https://www.jianshu.com/p/c86c82441012
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞