ios - 在图表的 XAxis 上显示三个标签

Question

我正在使用 iOS 图表在我的应用程序中显示折线图。我在显示 xAxis 时遇到一个问题。

我有以下代码用于配置图表并在其上显示数据。

import UIKit
import Charts

class TotalSalesVC: BaseVC {

    //------------------------------------------------------------------------------
    // MARK:-
    // MARK:- Outlets
    //------------------------------------------------------------------------------

    @IBOutlet weak var lineChartView                        : LineChartView!


    //------------------------------------------------------------------------------
    // MARK:-
    // MARK:- Variables
    //------------------------------------------------------------------------------

    var lineChartData                               : LineChartDataWeb?


    //------------------------------------------------------------------------------
    // MARK:-
    // MARK:- Custom Methods
    //------------------------------------------------------------------------------

    func setupLineChart() {

        self.lineChartView.delegate = self

        self.lineChartView.chartDescription?.enabled = false
        self.lineChartView.dragEnabled = true
        self.lineChartView.setScaleEnabled(true)
        self.lineChartView.pinchZoomEnabled = true

        // X-Axis Limit Line
        let leftAxis = self.lineChartView.leftAxis
        leftAxis.removeAllLimitLines()
        leftAxis.axisMaximum = 300000
        leftAxis.axisMinimum = 0
        leftAxis.drawLimitLinesBehindDataEnabled = false

        let l = self.lineChartView.legend
        l.form = .line
        l.font = self.isPhone ? Typography.robotoRegular14 : Typography.robotoRegular18
        l.textColor = .black
        l.horizontalAlignment = .left
        l.verticalAlignment = .bottom
        l.orientation = .horizontal
        l.drawInside = false

        let xAxis = self.lineChartView.xAxis
        xAxis.labelFont = self.isPhone ? Typography.robotoRegular14 : Typography.robotoRegular18
        xAxis.labelTextColor = .black
        xAxis.drawAxisLineEnabled = false
        xAxis.labelPosition = .bottom
        xAxis.drawGridLinesEnabled = false

        self.lineChartView.rightAxis.enabled = false

        let marker = BalloonMarker(color: UIColor(white: 180/255, alpha: 1),
                                   font: .systemFont(ofSize: 12),
                                   textColor: .white,
                                   insets: UIEdgeInsets(top: 8, left: 8, bottom: 20, right: 8))
        marker.chartView = self.lineChartView
        marker.minimumSize = CGSize(width: 80, height: 40)
        self.lineChartView.marker = marker

        self.lineChartView.legend.form = .line
    }

    //------------------------------------------------------------------------------

    func setupData() {

        if lineChartData != nil {

            var arrCurrentYear = [ChartDataEntry]()

            // Current year data
            if let arrCurrentYearData = lineChartData?.currentYear {

                let formatter = BarChartFormatter()
                let xAxis = XAxis()

                for (index, value) in arrCurrentYearData.enumerated() {
                    let dataEntry = ChartDataEntry(x: Double(index), y: Double(value))
                    arrCurrentYear.append(dataEntry)
                    _ = formatter.stringForValue(Double(index), axis: xAxis)
                }

                xAxis.valueFormatter = formatter

                self.lineChartView.xAxis.valueFormatter = xAxis.valueFormatter
            }

            let currentYear = Calendar.current.component(.year, from: Date())

            // Set 1 - Current year
            let set1 = LineChartDataSet(values: arrCurrentYear, label: "\(currentYear)")
            set1.drawIconsEnabled = false
            set1.setColor(.barColor)
            set1.setCircleColor(.barColor)
            set1.lineWidth = 1
            set1.circleRadius = 3
            set1.drawCirclesEnabled = true
            set1.valueFont = self.isPhone ? Typography.robotoRegular14 : Typography.robotoRegular18
            set1.formLineWidth = 2
            set1.formSize = 15
            set1.drawValuesEnabled = false
            set1.fillAlpha = 1
            set1.fill = Fill(color: ChartColorTemplates.colorFromString("#028ed3").withAlphaComponent(0.6))
            set1.drawFilledEnabled = true

            var arrPreviousYear = [ChartDataEntry]()

            // Previous year data
            if let arrPreviousYearData = lineChartData?.previousYear {

                let formatter = BarChartFormatter()
                let xAxis = XAxis()

                for (index, value) in arrPreviousYearData.enumerated() {
                    let dataEntry = ChartDataEntry(x: Double(index), y: Double(value))
                    arrPreviousYear.append(dataEntry)
                    _ = formatter.stringForValue(Double(index), axis: xAxis)
                }
                xAxis.valueFormatter = formatter

                self.lineChartView.xAxis.valueFormatter = xAxis.valueFormatter
            }

            // Set 2 - Previous year
            let previousYear = Calendar.current.component(.year, from: Calendar.current.date(byAdding: .year, value: -1, to: Date())!)

            let set2 = LineChartDataSet(values: arrPreviousYear, label: "\(previousYear)")
            set2.drawIconsEnabled = false
            set2.setColor(.subTitleColor)
            set2.setCircleColor(.black)
            set2.lineWidth = 1
            set2.circleRadius = 3
            set2.drawCirclesEnabled = true
            set2.valueFont = self.isPhone ? Typography.robotoRegular14 : Typography.robotoRegular18
            set2.formLineWidth = 2
            set2.formSize = 15
            set2.drawValuesEnabled = false
            set2.fillAlpha = 1
            set2.fill = Fill(color: ChartColorTemplates.colorFromString("#4c5b61").withAlphaComponent(0.6))
            set2.drawFilledEnabled = true
            set2.drawCirclesEnabled = false

            let data = LineChartData(dataSets: [set1, set2])

            self.lineChartView.data = data
        }
    }

    //------------------------------------------------------------------------------
    // MARK:-
    // MARK:- View Life Cycle Methods
    //------------------------------------------------------------------------------

    override func viewDidLoad() {
        super.viewDidLoad()
        self.setupLineChart()
        self.initSetup()
        self.setupData()
    }

    //------------------------------------------------------------------------------

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        self.lineChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)
    }
}

//------------------------------------------------------------------------------
// MARK:-
// MARK:- Extension - ChartViewDelegate Methods
//------------------------------------------------------------------------------

extension TotalSalesVC: ChartViewDelegate {

    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {

        self.lineChartView.centerViewToAnimated(xValue: entry.x, yValue: entry.y,
                                            axis: self.lineChartView.data!.getDataSetByIndex(highlight.dataSetIndex).axisDependency,
                                            duration: 1)
    }
}

//------------------------------------------------------------------------------
// MARK:-
// MARK:- BarChartFormatter
//------------------------------------------------------------------------------

@objc(BarChartFormatter)
public class BarChartFormatter: NSObject, IAxisValueFormatter
{

    var arrXAxisQuarter1: [String]! = ["Jan", "Feb", "Mar"]

    public func stringForValue(_ value: Double, axis: AxisBase?) -> String
    {
        return arrXAxisQuarter1[Int(value)]
    }
}

我试过这段代码来配置折线图和显示数据。

问题是，我配置了三个月的图表，但它在图表上显示的月份标签不明确。

输出:

期望:

How can I achieve this ?

Answer 1

你可以像这样设置标签数量

xAxis.setLabelCount(3, force: true)

你可能也想要这个

xAxis.centerAxisLabelsEnabled = true