接上文Android開發(fā)之基于MPAndroidChart實(shí)現(xiàn)股票K線圖（一），在項(xiàng)目中引入了這個框架以后，下面就開始進(jìn)行具體的代碼編寫。

1 流程

1.1 原理

MPAndroidChart所提供的各種圖表其實(shí)就是一種自定義控件，例如LineChart(折線圖）、BarChart（直方圖）以及準(zhǔn)備要使用的CandleStickChart（蠟燭圖）。

1.2 控件初始化

我們在布局xml文件中或在Activity代碼里，去創(chuàng)建這些圖表控件實(shí)例，然后在代碼中進(jìn)行一些基本交互設(shè)置。

<com.github.mikephil.charting.charts.CandleStickChart
        android:id="@+id/candler_chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

以CandleStickChart為例：

1.2.1 基本設(shè)置

mChart.setStartAtZero(true); 
mChart.setDrawYValues(false); // disable the drawing of values into the mChart  
mChart.setDrawBorder(false);   //是否在折線圖上添加邊框 
mChart.setDescription("");// 數(shù)據(jù)描述  
mChart.setNoDataTextDescription("You need to provide data for the mChart.");  //如果沒有數(shù)據(jù)的時候，會顯示這個，類似listview的emtpyview  
mChart.setDrawVerticalGrid(false); // enable / disable grid lines  
mChart.setDrawHorizontalGrid(false);  
mChart.setDrawGridBackground(false); // 是否顯示表格顏色  
mChart.setBackgroundColor(color);// 設(shè)置背景 
mChart.setGridBackgroundColor(color);//設(shè)置表格背景色
mChart.setGridColor(Color.WHITE & 0x70FFFFFF); // 表格線的顏色，在這里是是給顏色設(shè)置一個透明度  
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);// 設(shè)置字體

// animate calls invalidate()...  
mChart.animateX(2500); // 立即執(zhí)行的動畫,x軸

1.2.2 XY軸設(shè)置

1. X軸

XAxis xAxis =mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setDrawGridLines(true);
xAxis.setSpaceBetweenLabels(12);//軸刻度間的寬度，默認(rèn)值是4
xAxis.setGridColor(colorLine);//X軸刻度線顏色
xAxis.setTextColor(colorText);//X軸文字顏色

2. Y軸（可以設(shè)置左右兩個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 圖例標(biāo)識設(shè)置

 // get the legend (only possible after setting data)  
Legend l = mChart.getLegend();  // 設(shè)置比例圖標(biāo)示
l.setPosition(LegendPosition.BELOW_CHART_RIGHT);  //顯示位置
l.setForm(LegendForm.SQUARE);// 樣式  
l.setFormSize(6f);// 字號
l.setTextColor(Color.WHITE);// 顏色  
l.setTypeface(mTf);// 字體  

List<String> labels=new ArrayList<>();
labels.add("紅漲");
labels.add("綠跌");
List<Integer> colors=new ArrayList<>();
colors.add(Color.RED);
colors.add(Color.GREEN);
l.setExtra(colors,labels);//設(shè)置標(biāo)注的顏色及內(nèi)容，設(shè)置的效果如下圖

l.setEnabled(false);//決定顯不顯示標(biāo)簽

Legend示意圖

1.3 傳入數(shù)據(jù)，生成圖表

1. CandleEntry是每一天股票價格的數(shù)據(jù)模型

public class CandleEntry extends Entry {
    private float mShadowHigh = 0.0F;//當(dāng)天最高價（蠟燭圖上影線）
    private float mShadowLow = 0.0F;//當(dāng)天最低價（蠟燭圖下影線）
    private float mClose = 0.0F;//收盤價
    private float mOpen = 0.0F;//開盤價
···
}

//模擬獲得數(shù)據(jù)
List<CandleEntry> yVals1= Model.getCandleEntries();

2. CandleDataSet 類可以對圖表的元素樣式進(jìn)行設(shè)置（例如 漲跌顏色、影線顏色等）

       CandleDataSet set = new CandleDataSet(yVals1, "Data Set");
        set.setAxisDependency(YAxis.AxisDependency.LEFT);
        set.setShadowColor(Color.DKGRAY);//影線顏色
        set.setShadowColorSameAsCandle(true);//影線顏色與實(shí)體一致
        set.setShadowWidth(0.7f);//影線
        set.setDecreasingColor(Color.RED);
        set.setDecreasingPaintStyle(Paint.Style.FILL);//紅漲，實(shí)體
        set.setIncreasingColor(Color.GREEN);
        set.setIncreasingPaintStyle(Paint.Style.STROKE);//綠跌，空心
        set.setNeutralColor(Color.RED);//當(dāng)天價格不漲不跌（一字線）顏色
        set.setHighlightLineWidth(1f);//選中蠟燭時的線寬
        set.setDrawValues(false);//在圖表中的元素上面是否顯示數(shù)值
        set.setLabel(“l(fā)abel");//圖表名稱，可以通過mChart.getLegend().setEnable(true)顯示在標(biāo)注上

3. 簡單粗暴地通過set方法設(shè)置數(shù)據(jù)

CandleData data = new CandleData(xVals, set);
mChart.setData( data);

1.4 效果展示

像手勢縮放、XY軸方向平移這些基本交互，框架已經(jīng)幫我們實(shí)現(xiàn)。
當(dāng)然這只是一個簡單的demo，距離實(shí)際需求還有很大的差距，坑也是有的，例如：

只能通過一個方法set.setShadowColor(Color.DKGRAY);設(shè)置上影線/下影線顏色，如圖 上影線/下影線都是黑色的，而不是隨著當(dāng)天的漲跌情況紅杖綠跌，十分不和諧！
(此坑已填：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 獲取圖表相關(guān)的數(shù)據(jù)

mChart.getCandleData();
mChart.getYChartMax();
mChart.getYChartMin();
mChart.getXChartMax();
mChart.getXChartMin();