swift - 如何将名称/标题/值(月)添加到折线图的 Y 轴？

Question

我正在尝试简单的折线图。图表进展顺利，我想为 x 轴和 y 轴的每个点添加值/名称。

请参见下图，这是即将到来的，但我想在 x 和 y 轴上添加/显示值。

例如:查看我的示例代码，我提到了月份和单位销售值。

在 X 轴上，我想显示月份名称，在 Y 轴上，我想显示一些单位销售值(value)。

如何在 x 和 y 轴上执行或显示值？

import UIKit
import Charts


class ViewController: UIViewController {


    var dataEntries: [ChartDataEntry] = []
   // var chartDataBeanArray = [ChartDataBean]()

    let months = ["Jan" , "Feb", "Mar", "Apr", "May", "June", "July", "August", "Sept", "Oct", "Nov", "Dec"]
    let unitsSold = [24.0,43.0,56.0,23.0,56.0,68.0,48.0,120.0,41.0,34.0,55.9,12.0,34.0]

    @IBOutlet weak var chartViewOutlet: LineChartView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        setChart(months, values: unitsSold)

    }


     func setChart(_ dataPoints: [String], values: [Double]) {

        print(values)
        print(dataPoints)
        chartViewOutlet.noDataText = "No data available!"

        for i in 0..<values.count {
            print("chart point : \(values[i])")
            let dataEntry = ChartDataEntry(x: Double(i), y: values[i])
            dataEntries.append(dataEntry)
        }

        let line1 = LineChartDataSet(entries: dataEntries, label: "Units Consumed")
        line1.colors = [NSUIColor.blue]
        line1.mode = .cubicBezier
        line1.cubicIntensity = 0.2

        let gradient = getGradientFilling()
        line1.fill = Fill.fillWithLinearGradient(gradient, angle: 90.0)
        line1.drawFilledEnabled = true


        let data = LineChartData()
        data.addDataSet(line1)
        chartViewOutlet.data = data
        chartViewOutlet.setScaleEnabled(false)
        chartViewOutlet.animate(xAxisDuration: 1.5)
        chartViewOutlet.drawGridBackgroundEnabled = false
        chartViewOutlet.xAxis.drawAxisLineEnabled = false
        chartViewOutlet.xAxis.drawGridLinesEnabled = false
        chartViewOutlet.leftAxis.drawAxisLineEnabled = false
        chartViewOutlet.leftAxis.drawGridLinesEnabled = false
        chartViewOutlet.rightAxis.drawAxisLineEnabled = false
        chartViewOutlet.rightAxis.drawGridLinesEnabled = false
        chartViewOutlet.legend.enabled = false
        chartViewOutlet.xAxis.enabled = false
        chartViewOutlet.leftAxis.enabled = false
        chartViewOutlet.rightAxis.enabled = false
        chartViewOutlet.xAxis.drawLabelsEnabled = false


    }

    /// Creating gradient for filling space under the line chart
    private func getGradientFilling() -> CGGradient {
        // Setting fill gradient color
        let coloTop = UIColor(red: 141/255, green: 133/255, blue: 220/255, alpha: 1).cgColor
        let colorBottom = UIColor(red: 230/255, green: 155/255, blue: 210/255, alpha: 1).cgColor
        // Colors of the gradient
        let gradientColors = [coloTop, colorBottom] as CFArray
        // Positioning of the gradient
        let colorLocations: [CGFloat] = [0.7, 0.0]
        // Gradient Object
        return CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: gradientColors, locations: colorLocations)!
    }


}

编辑:添加@marc建议的以下代码后

chartViewOutlet.xAxis.enabled = true
chartViewOutlet.leftAxis.enabled = true

现在显示图表。

现在我想在底部(x 轴)显示月份值...如何显示它？

如果你想查看源代码，可以在这里找到:https://drive.google.com/file/d/1vkPqktZ3mX3q9f75-bihVYeublwc2dXE/view?usp=sharing

Answer 1

在您的项目中添加以下代码。

 func setChart(dataPoints: [String], values: [Double]) {

    for i in 0 ..< dataPoints.count {
        dataEntries.append(ChartDataEntry(x: Double(i), y: values[i]))
    }

    let lineChartDataSet = LineChartDataSet(entries: dataEntries, label: "Units Consumed")
    lineChartDataSet.axisDependency = .left
    lineChartDataSet.setColor(UIColor.black)
    lineChartDataSet.setCircleColor(UIColor.black) // our circle will be dark red
    lineChartDataSet.lineWidth = 1.0
    lineChartDataSet.circleRadius = 3.0 // the radius of the node circle
    lineChartDataSet.fillAlpha = 1
    lineChartDataSet.fillColor = UIColor.black
    lineChartDataSet.highlightColor = UIColor.white
    lineChartDataSet.drawCircleHoleEnabled = true

    var dataSets = [LineChartDataSet]()
    dataSets.append(lineChartDataSet)


    let lineChartData = LineChartData(dataSets: dataSets)
    chartViewOutlet.data = lineChartData
    chartViewOutlet.rightAxis.enabled = false
    chartViewOutlet.xAxis.drawGridLinesEnabled = false
    chartViewOutlet.xAxis.labelPosition = .bottom
    chartViewOutlet.xAxis.valueFormatter = IndexAxisValueFormatter(values: dataPoints)
    chartViewOutlet.legend.enabled = true
}

输出:

这 100% 有效。尝试一下。