RecyclerChart的KLine的繪制

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

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

正文

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

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

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

繪制前列一個提綱，然后依此逐一實現即可：

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

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

StockValueFormatter

3. 繪制主體的 drawChart.

4. Mock Bean， Entity數據。

5. 繪制 HighLight

6. 繪制 XAxis

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

8. 嘗試添加縮放， OnScaleGestureListener； Matrix , onTouch . 根據縮放比例，調整 RecyclerChart的 displayNumber， notifyDataChange。

繪制蠟燭圖

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

2. 畫上引線、下引線。

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

主要是CandleChart的繪制，其實里面的主體邏輯跟之前的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ù)修復吧。

private fun drawChart(canvas: Canvas, rectF: RectF, parentLeft: Float, parentRight: Float, radius: Float) {
    // 浮點數的 == 比較需要注意
    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)
    }
}

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

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

以上就是RecyclerChart的KLine的繪制的詳細內容，更多關于RecyclerChart KLine繪制的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: