快捷導(dǎo)航

RecyclerChart的KLine的繪制

更新時間：2023年03月02日 08:45:28 作者：cxy107750

這篇文章主要為大家介紹了RecyclerChart的KLine的繪制示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

繼上次章節(jié)介紹完RecyclerChart的一些動態(tài)屬性之后，本章節(jié)開始基于RecyclerChart繪制新的圖表，股票相關(guān)的Chart，筆者花了大概一天，繪制如下的一個效果，發(fā)現(xiàn)換了電腦之后沒有裝PS，所以CandleChart的顏色自己隨意取的。其實(shí)無論繪制什么業(yè)務(wù)的圖形，最終交給圖表的不過是一堆要展示的數(shù)據(jù)而已。

下面是gif圖，還有好些功能沒有加，比如高亮用的是原來的RecyclerChart之前的樣式。Kline作為CombineChart,還有5日、10日、20日均線的繪制等以及底部一系列的比如MACD, 成交量圖等待該系列后續(xù)漸漸實(shí)現(xiàn)

基于RecyclerChart繪制一種新的圖表，類似于搭積木一樣，之前的心電圖也是如此。

繪制前列一個提綱，然后依此逐一實(shí)現(xiàn)即可：

1.創(chuàng)建 StockAttr、StockBean, StockEntity.

2.創(chuàng)建 StockChartRecyclerView, StockChartRenderer,StockChartItemDecoration,

StockValueFormatter

3. 繪制主體的 drawChart.

4. Mock Bean， Entity數(shù)據(jù)。

5. 繪制 HighLight

6. 繪制 XAxis

7. 繪制 YAxis, 最大、最小值局部留有 padding

8. 嘗試添加縮放， OnScaleGestureListener； Matrix , onTouch . 根據(jù)縮放比例，調(diào)整 RecyclerChart的 displayNumber， notifyDataChange。

繪制蠟燭圖

1.計(jì)算 color, 參照上個Entry的 close大小。定義 mStockAttrs 里的兩種 color值，并且是否 Fill。

2. 畫上引線、下引線。

圖表的樣式跟它所依賴的數(shù)據(jù)是相對應(yīng)的，然后就是一個業(yè)務(wù)數(shù)據(jù)到Chart數(shù)據(jù)的一個轉(zhuǎn)化，然后圖表依照Chart數(shù)據(jù)進(jìn)行繪制即可。這里的YAxis、XAxis、board, HighLight 好些跟之前的都是相通的，部分可以復(fù)用；注意一些邊界上的處理。

主要是CandleChart的繪制，其實(shí)里面的主體邏輯跟之前的BarChart也是類似的；這里看看代碼吧：

fun <Y : YAxis> drawStockChart(canvas: Canvas, parent: RecyclerView, yAxis: Y) {
  val parentRight = (parent.width - parent.paddingRight).toFloat()
  val parentLeft = parent.paddingLeft.toFloat()
  val childCount = parent.childCount
  for (i in 0 until childCount) {
    val child = parent.getChildAt(i)
    val stockEntry = child.tag as StockEntry
    val rectMain = getStockRectF(child, parent, yAxis, mStockAttrs, stockEntry)
    val radius = 1f
    val color = if (stockEntry.isRise) mStockAttrs.riseColor else mStockAttrs.downColor
    mBarChartPaint.color = color
    //todo 注意RTL
    drawChart(canvas, rectMain, parent.left.toFloat(), parent.right.toFloat(), radius)
    mHighLightLinePaint.color = color
    if (stockEntry.mShadowHigh > Math.max(stockEntry.mClose, stockEntry.mOpen)){
      drawTopLine(stockEntry.mShadowHigh, canvas, rectMain, yAxis, parent)
    }
    if (stockEntry.mShadowLow < Math.min(stockEntry.mClose, stockEntry.mOpen)){
      drawDownLine(stockEntry.mShadowLow, canvas, rectMain, yAxis, parent)
    }
  }
}

這里包含了主體柱子Chart的繪制，以及上引線、下引線的繪制。

//繪制上引線、下引線
private fun drawTopLine(value:Float, canvas: Canvas, rectF: RectF, yAxis: YAxis,  parent: RecyclerView){
  canvas.save()
  val y = getYPosition(value, parent, yAxis, mStockAttrs)
  val x = (rectF.left + rectF.right)/2
  if (DecimalUtil.bigOrEquals(x, parent.left.toFloat()) && DecimalUtil.smallOrEquals(x, parent.right.toFloat())){
  canvas.drawLine(x, rectF.top, x, y, mHighLightLinePaint)
  canvas.restore()
}
}
//下引線
private fun drawDownLine(value:Float, canvas: Canvas, rectF: RectF, yAxis: YAxis,  parent: RecyclerView){
  canvas.save()
  val y = getYPosition(value, parent, yAxis, mStockAttrs)
  val x = (rectF.left + rectF.right)/2
  if (DecimalUtil.bigOrEquals(x, parent.left.toFloat()) && DecimalUtil.smallOrEquals(x, parent.right.toFloat())){
  canvas.drawLine(x, rectF.bottom, x, y, mHighLightLinePaint)
  canvas.restore()
}
}

繪制Chart 主體，按照先前的繪制，左右邊界的處理。目前還是有些bug，先處理主邏輯，后續(xù)修復(fù)吧。

private fun drawChart(canvas: Canvas, rectF: RectF, parentLeft: Float, parentRight: Float, radius: Float) {
    // 浮點(diǎn)數(shù)的 == 比較需要注意
    if (DecimalUtil.smallOrEquals(rectF.right, parentLeft)) {
    //continue 會閃，原因是end == parentLeft 沒有過濾掉，顯示出來柱狀圖了。
    } else if (rectF.left < parentLeft && rectF.right > parentLeft) {
    //左邊部分滑入的時候，處理柱狀圖的顯示
    rectF.left = parentLeft
    val path = CanvasUtil.createRectRoundPath(rectF, radius, RoundRectType.TYPE_RIGHT_TOP)
    mBarChartPaint.color = mBarChartAttrs.chartEdgeColor
    canvas.drawPath(path, mBarChartPaint)
    } else if (DecimalUtil.bigOrEquals(rectF.left, parentLeft) && DecimalUtil.smallOrEquals(rectF.right, parentRight)) {
    // 中間部分的Item
    val path = CanvasUtil.createRectRoundPath(rectF, radius, RoundRectType.TYPE_ALL)
    canvas.drawPath(path, mBarChartPaint)
    //            canvas.drawRoundRect(rectF, radius, radius, mBarChartPaint);
    } else if (DecimalUtil.smallOrEquals(rectF.left, parentRight) && rectF.right > parentRight) {
    //右邊部分滑出的時候，處理柱狀圖，文字的顯示
    val distance = parentRight - rectF.left
    rectF.right = rectF.left + distance
    val path = CanvasUtil.createRectRoundPath(rectF, radius, RoundRectType.TYPE_LEFT_TOP)
    mBarChartPaint.color = mBarChartAttrs.chartEdgeColor
    canvas.drawPath(path, mBarChartPaint)
    }
}

總體大致上，思路還是蠻簡單的，關(guān)于動態(tài)加載數(shù)據(jù)，高亮，Y軸在滑動過程中動態(tài)調(diào)整，隨時更改Max/Min值等功能都是公用之前的邏輯。

然后就是下一章節(jié)的需要實(shí)現(xiàn)的均線跟Candle Chart 在一個For循環(huán)里繪制，省開銷，計(jì)劃將均線的Bean數(shù)據(jù)放StockEntity，方便在一個For里拿去。再就是里面草稿大綱里提到的第8項(xiàng)，圖表的縮放的功能，大致的思路如上所述，待實(shí)現(xiàn)。

以上就是RecyclerChart的KLine的繪制的詳細(xì)內(nèi)容，更多關(guān)于RecyclerChart KLine繪制的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: