在图表的 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

希望这个库能帮到你

https://github.com/danielgindi/Charts

import Charts

@IBOutlet weak var chartView: LineChartView!
var options: [Option]!
let dayOfWeeks = ["mon", "tue", "wen", "thu", "fri", "sat", "sun"]

func settingsChart() -> Void {
    self.options = [.toggleValues,
                    .toggleFilled,
                    .toggleCircles,
                    .toggleCubic,
                    .toggleHorizontalCubic,
                    .toggleIcons,
                    .toggleStepped,
                    .toggleHighlight,
                    .animateX,
                    .animateY,
                    .animateXY,
                    .saveToGallery,
                    .togglePinchZoom,
                    .toggleAutoScaleMinMax,
                    .toggleData]


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

    chartView.legend.form = .line
    chartView.rightAxis.enabled = false

    let xAxis = chartView.xAxis
    xAxis.labelPosition = .bottom
    xAxis.granularity = 1
    xAxis.gridLineDashLengths = [10, 10]
    xAxis.gridLineDashPhase = 0
    xAxis.valueFormatter = self
}


func showDataOnChartView() -> Void {

    let data = [5000.0, 5100.0, 5200.0] // In your case, this array must have only 3 elements!
    let values = (0..<data.count).map { (i) -> ChartDataEntry in
        let val:Double = data[i]
        return ChartDataEntry(x: Double(i), y: val, icon: UIImage(named: "ic_test"))
    }

    let set1 = LineChartDataSet(values: values, label: "Test")
    set1.drawIconsEnabled = false

    set1.lineDashLengths = [5, 0.5]
    set1.highlightLineDashLengths = [5, 2.5]
    set1.setColor(Utility.mainBlueColor)
    set1.setCircleColor(Utility.mainBlueColor)
    set1.lineWidth = 1
    set1.circleRadius = 3
    set1.drawCircleHoleEnabled = false
    set1.valueFont = .systemFont(ofSize: 9)
    set1.formLineDashLengths = [5, 2.5]
    set1.formLineWidth = 1
    set1.formSize = 15

    let gradientColors = [ChartColorTemplates.colorFromString("#00ff0000").cgColor,
                          ChartColorTemplates.colorFromString("#ffff0000").cgColor]
    let gradient = CGGradient(colorsSpace: nil, colors: gradientColors as CFArray, locations: nil)!


    set1.fillAlpha = 1
    set1.fill = Fill(linearGradient: gradient, angle: 90) //.linearGradient(gradient, angle: 90)
    set1.drawFilledEnabled = true

    let chartData = LineChartData(dataSets: [set1])

    chartView.data = chartData
    for set in chartView.data!.dataSets as! [LineChartDataSet] {
        set.drawValuesEnabled = false
    }
    chartView.animate(yAxisDuration: 2.5)
}

和数据源：

extension TotalSalesVC: IAxisValueFormatter {
func stringForValue(_ value: Double, axis: AxisBase?) -> String {
    if value != -1 && !value.isNaN{
        return NSLocalizedString(dayOfWeeks[Int(value) % dayOfWeeks.count] , comment: "")
    }
    return ""
    }
}

Answer 2

您可以像这样设置标签数

xAxis.setLabelCount(3, force: true)

你可能也想要这个

xAxis.centerAxisLabelsEnabled = true

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

Display three label on XAxis of chart

ios

swift

ios-charts