xAxis is occluded and the line of the chart is broken

[karise-guo]

Charts Environment

Charts version: 3.2.0
Xcode version: 10.2
Swift version: 5.0
Platform(s) running Charts: iOS
macOS version running Xcode: 10.14.4

The Problem

• As shown below, xAxis is occluded when it is too long.

• As shown below, the line of the chart is broken.

The Code

// 混合图表
public lazy var combinedChartView: CombinedChartView = {
    let view = CombinedChartView()
    view.drawOrder = [DrawOrder.bar.rawValue, DrawOrder.line.rawValue] // 绘制顺序
    view.noDataText = FMModuleChart.localized("chart_empty") // 无数据时显示的文字
    view.chartDescription = nil // 描述文字
    view.legend.enabled = false // 隐藏图例
    view.dragEnabled = true // 拖拽图表
    view.pinchZoomEnabled = false // 触控放大
    view.doubleTapToZoomEnabled = false // 双击放大
    view.scaleXEnabled = false // X 轴缩放
    view.scaleYEnabled = false // Y 轴缩放
    view.highlightPerTapEnabled = false // 单击高亮
    view.highlightPerDragEnabled = false // 拖拽高亮
    // X 轴
    view.xAxis.labelPosition = .bottom // 显示位置
    view.xAxis.drawGridLinesEnabled = false // 网格绘制
    view.xAxis.axisLineColor = UIColor(hexString: "#e5e5e5")! // X 轴颜色
    view.xAxis.axisLineWidth = FMSize.separator // X 轴线宽
    view.xAxis.labelFont = FMFont.font30 // 字号
    view.xAxis.labelTextColor = FMColor.description // 颜色
    // 左侧 Y 轴
    view.leftAxis.labelPosition = .outsideChart // 显示位置
    view.leftAxis.drawGridLinesEnabled = true // 网格绘制
    view.leftAxis.gridColor = UIColor(hexString: "#e5e5e5")! // 网格颜色
    view.leftAxis.gridLineWidth = FMSize.separator // 网格线宽
    view.leftAxis.drawAxisLineEnabled = false // 是否显示轴线
    view.leftAxis.labelFont = FMFont.font30 // 字号
    view.leftAxis.labelTextColor = FMColor.description // 颜色
    view.leftAxis.axisMinimum = 0 // 最小值
    view.leftAxis.setLabelCount(6, force: true) // Y 轴段数
    // 右侧 Y 轴
    view.rightAxis.labelPosition = .outsideChart // 显示位置
    view.rightAxis.drawGridLinesEnabled = false // 网格绘制
    view.rightAxis.drawAxisLineEnabled = false // 是否显示轴线
    view.rightAxis.labelFont = FMFont.font30 // 字号
    view.rightAxis.labelTextColor = FMColor.description // 颜色
    view.rightAxis.axisMinimum = 0 // 最小值
    view.rightAxis.axisMaximum = 100 // 最大值
    view.rightAxis.setLabelCount(6, force: true) // Y 轴段数
    return view
}()

/// 设置图表数据
public func setChartData(xValues: [String], finishData: [Double], unfinishData: [Double], completionData: [Double], isXLabelRotation: Bool = false) {
    if !xValues.isEmpty, xValues.count == finishData.count, xValues.count == unfinishData.count, xValues.count == completionData.count {
        // 柱状图数据
        var barEntries = [BarChartDataEntry]()
        var maxTotalData: Double = 0
        for index in 0..<finishData.count {
            let finish = finishData[index]
            let unfinish = unfinishData[index]
            if (finish + unfinish) > maxTotalData { maxTotalData = finish + unfinish }
            let entry = BarChartDataEntry(x: index.double, yValues: [finish, unfinish])
            barEntries.append(entry)
        }
        let barDataSet = BarChartDataSet(values: barEntries, label: nil)
        barDataSet.colors = [finishColor, unfinishColor] // 柱状颜色
        barDataSet.axisDependency = .left // 根据左边数据显示
        barDataSet.drawValuesEnabled = false // 是否显示数据
        let barData = BarChartData(dataSet: barDataSet)
        barData.barWidth = 0.55 // 柱状图宽度（数值范围 0 ~ 1）
        // 折线图数据
        var lineEntries = [ChartDataEntry]()
        for index in 0..<completionData.count {
            let entry = ChartDataEntry(x: index.double, y: completionData[index])
            lineEntries.append(entry)
        }
        let lineDataSet = LineChartDataSet(values: lineEntries, label: nil)
        lineDataSet.colors = [completionColor] // 线的颜色
        lineDataSet.lineWidth = 1.0 // 线宽
        lineDataSet.circleRadius = FMSize.sizeByPX(14.0) / 2 // 圆点外圆半径
        lineDataSet.circleHoleRadius = FMSize.sizeByPX(10.0) / 2 // 圆点内圆半径
        lineDataSet.circleColors = [completionColor] // 圆点外圆颜色
        lineDataSet.circleHoleColor = FMColor.white // 圆点内圆颜色
        lineDataSet.axisDependency = .right // 根据右边数据显示
        lineDataSet.drawValuesEnabled = false // 是否显示数据
        lineDataSet.mode = .cubicBezier // 折线图类型
        lineDataSet.drawFilledEnabled = true // 是否显示折线图阴影
        let shadowColors = [completionColor.withAlphaComponent(0).cgColor, completionColor.withAlphaComponent(0.7).cgColor] as CFArray
        let gradient = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: shadowColors, locations: nil)!
        lineDataSet.fill = Fill(linearGradient: gradient, angle: 90.0) // 阴影渐变效果
        lineDataSet.fillAlpha = 1.0 // 阴影透明度
        let lineData = LineChartData(dataSet: lineDataSet)
        // 混合图表数据
        let combinedData = CombinedChartData()
        combinedData.barData = barData
        combinedData.lineData = lineData
        combinedChartView.data = combinedData
        combinedChartView.leftAxis.axisMaximum = getYMaxValue(value: maxTotalData, count: 5) // 左侧Y轴的最大值
        combinedChartView.xAxis.axisMinimum = combinedData.xMin - 0.5 // X 轴最小值
        combinedChartView.xAxis.axisMaximum = xValues.count < 7 ? 6.5 : combinedData.xMax + 0.5 // X 轴最大值
        combinedChartView.xAxis.labelRotationAngle = isXLabelRotation ? 30.0 : 0 // 倾斜
        combinedChartView.xAxis.valueFormatter = FMChartAxisValueFormatter(values: xValues, isXLabelRotation: isXLabelRotation) // X 轴数据
        combinedChartView.setVisibleXRangeMaximum(7) // X 轴最多显示数量（其余可滑动显示）
        combinedChartView.animate(yAxisDuration: 1.0) // 添加 Y 轴动画
        combinedChartView.notifyDataSetChanged() // 通知数据改变
    }
}

[liuxuan30]

are you able to help submit a demo project with ChartsDemo?