Coder Social home page Coder Social logo

Comments (1)

Nick-Hoper avatar Nick-Hoper commented on July 20, 2024

1、在CHKLineChartView新增方法
/**
绘制图表分区上的系列点先
*/
func drawSerie(_ serie: CHSeries) -> CHShapeLayer {
if !serie.hidden {
//循环画出每个模型的线
for model in serie.chartModels {
//如果是分时线
if serie.isShowLayer{
let serieLayer = model.drawSerieAndShapeLayer(self.rangeFrom, endIndex: self.rangeTo)
serie.seriesLayer.addSublayer(serieLayer)
}else{
let serieLayer = model.drawSerie(self.rangeFrom, endIndex: self.rangeTo)
serie.seriesLayer.addSublayer(serieLayer)
}
}
}

    return serie.seriesLayer
}

2、CHChartModel新增重制方法
/**
画点线,带深度图的效果的

 - parameter startIndex:     起始索引
 - parameter endIndex:       结束索引
 - parameter plotPaddingExt: 点与点之间间断所占点宽的比例
 */
open func drawSerieAndShapeLayer(_ startIndex: Int, endIndex: Int) -> CAShapeLayer {
    return CAShapeLayer()
}

3、实现方法
/**
画点线包含深度图效果

 - parameter startIndex:     起始索引
 - parameter endIndex:       结束索引
 - parameter plotPaddingExt: 点与点之间间断所占点宽的比例
 */
open override func drawSerieAndShapeLayer(_ startIndex: Int, endIndex: Int) -> CAShapeLayer {
    
    let serieLayer = CAShapeLayer()
    
    let modelLayer = CAShapeLayer()
    modelLayer.strokeColor = self.upStyle.color.cgColor
    modelLayer.fillColor = UIColor.clear.cgColor
    modelLayer.lineWidth = self.lineWidth
    modelLayer.lineCap = CAShapeLayerLineCap.round
    modelLayer.lineJoin = CAShapeLayerLineJoin.round
    
    //每个点的间隔宽度
    let plotWidth = (self.section.frame.size.width - self.section.padding.left - self.section.padding.right - 20) / CGFloat(endIndex - startIndex)
    
    //使用bezierPath画线段
    let linePath = UIBezierPath()
    
    var maxValue: CGFloat = 0       //最大值的项
    var maxPoint: CGPoint?          //最大值所在坐标
    var minValue: CGFloat = CGFloat.greatestFiniteMagnitude       //最小值的项
    var minPoint: CGPoint?          //最小值所在坐标
  
    var isStartDraw = false
    
    
    var endX: CGFloat = 0
    
    //循环起始到终结
    for i in stride(from: startIndex, to: endIndex, by: 1) {
        
        //开始的点
        guard let value = self[i].value else {
            continue //无法计算的值不绘画
        }
        
        //开始X
        let ix = self.section.frame.origin.x + self.section.padding.left + CGFloat(i - startIndex) * plotWidth
        //结束X
        //            let iNx = self.section.frame.origin.x + self.section.padding.left + CGFloat(i + 1 - startIndex) * plotWidth
        
        //把具体的数值转为坐标系的y值
        let iys = self.section.getLocalY(value)
        //            let iye = self.section.getLocalY(valueNext!)
        let point = CGPoint(x: ix + plotWidth / 2, y: iys)
        //第一个点移动路径起始
        if !isStartDraw {
            linePath.move(to: point)
            isStartDraw = true
            endX = point.x
        } else {
            linePath.addLine(to: point)
            endX = ix + plotWidth
        }
        
        //记录最大值信息
        if value > maxValue {
            maxValue = value
            maxPoint = point
        }
        
        //记录最小值信息
        if value < minValue {
            minValue = value
            minPoint = point
        }
    }
    
    linePath.smoothedPath(withGranularity: 15)

    modelLayer.path = linePath.cgPath
    serieLayer.addSublayer(modelLayer)
    
    //【二】绘制填充区域
    let fillLayer = CAShapeLayer()
    linePath.addLine(to: CGPoint(x: endX, y: (minPoint?.y)!))
    linePath.addLine(to: CGPoint(x: 0, y: (minPoint?.y)!))

    fillLayer.path = linePath.cgPath
    fillLayer.frame = CGRect(x:self.section.padding.left, y: 0, width:self.section.frame.width, height: self.section.frame.height + self.section.padding.top)
    fillLayer.fillColor = UIColor(hex:0xD0021B).withAlphaComponent(0.3).cgColor
    fillLayer.strokeColor = UIColor.clear.cgColor
    fillLayer.lineCap = CAShapeLayerLineCap.round
    fillLayer.lineJoin = CAShapeLayerLineJoin.round

    //绘制渐变图层,然后使用填充区域的frame来截取
    let fillGradientLayer = CAGradientLayer()
    fillGradientLayer.frame = fillLayer.frame
    fillGradientLayer.startPoint = CGPoint(x: 0, y: 0)
    fillGradientLayer.endPoint = CGPoint(x: 1, y: 0)
    fillGradientLayer.colors = [
        UIColor(hex: 0xE40434).withAlphaComponent(0.5).cgColor,
        UIColor(hex: 0x745BD8).withAlphaComponent(0.5).cgColor
    ]
    fillGradientLayer.zPosition -= 1
    fillGradientLayer.mask = fillLayer
    serieLayer.addSublayer(fillGradientLayer)

    //显示最大最小值
    if self.showMaxVal && maxValue != 0 {
        let highPrice = maxValue.ch_toString(maxF: section.decimal)
        let maxLayer = self.drawGuideValue(value: highPrice, section: section, point: maxPoint!, trend: CHChartItemTrend.up)
        
        serieLayer.addSublayer(maxLayer)
    }
    
    //显示最大最小值
    if self.showMinVal && minValue != CGFloat.greatestFiniteMagnitude {
        let lowPrice = minValue.ch_toString(maxF: section.decimal)
        let minLayer = self.drawGuideValue(value: lowPrice, section: section, point: minPoint!, trend: CHChartItemTrend.down)
        
        serieLayer.addSublayer(minLayer)
    }
    return serieLayer
}

from chklinechart.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.