Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

你好,请问如果我想加入分时图,该怎么做呢?新手求指教? #25

Open
emerana opened this issue Oct 10, 2018 · 1 comment

Comments

@emerana
Copy link

emerana commented Oct 10, 2018

我想把分时也弄上去

@Nick-Hoper
Copy link

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
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants