ios Charts 3.0 - 将 x 标签(日期)与图表对齐 [英] ios Charts 3.0 - Align x labels (dates) with plots

问题描述

我很难将库 Charts(来自 Daniel Gindi)从版本 2 (Swift 2.3) 迁移到版本 3 (Swift 3).

I am having a hard time to migrate library Charts (from Daniel Gindi) from version 2 (Swift 2.3) to 3 (Swift 3).

基本上，我无法将 x 标签(日期)与相应的图正确对齐.

Basically, I can't have the x labels (dates) aligned correctly with the corresponding plots.

这是我之前在第 2 版中所拥有的:

在第 2 版中，我有第 7、8、10 和 11 天的值.所以我在中间错过了一天，但标签与情节正确对齐.

In version 2, I had values for days 7, 8, 10 and 11. So I was missing a day in the middle, but the labels were correctly alined with the plots.

这是我在第 3 版中的内容:

在第 3 版中，x 轴上的标签"现在已替换为 double(对于日期，它是自 1970 年以来的 timeInterval)，并通过格式化程序进行格式化.因此，不可否认，图表现在更加正确"，因为图表正确推断了第 9 次的值，但我找不到如何将标签放在相应的图下方.

In version 3, the "labels" in the x axis have now been replaced by double (for dates, it's a timeInterval since 1970), and formatted via a formatter. So, indeniably, the graph is more "correct" now, since the chart correctly extrapolates the value for the 9th, but I can't find how to put the labels under the corresponding plots.

这是我的 x 轴代码:

This is my code for the x axis:

 let chartView = LineChartView()
 ...
 let xAxis = chartView.xAxis
 xAxis.labelPosition = .bottom
 xAxis.labelCount = entries.count
 xAxis.drawLabelsEnabled = true
 xAxis.drawLimitLinesBehindDataEnabled = true
 xAxis.avoidFirstLastClippingEnabled = true

 // Set the x values date formatter
 let xValuesNumberFormatter = ChartXAxisFormatter()
 xValuesNumberFormatter.dateFormatter = dayNumberAndShortNameFormatter // e.g. "wed 26"
 xAxis.valueFormatter = xValuesNumberFormatter

这是我创建的 ChartXAxisFormatter 类:

Here is the ChartXAxisFormatter class I created:

import Foundation
import Charts

class ChartXAxisFormatter: NSObject {
    var dateFormatter: DateFormatter?
}

extension ChartXAxisFormatter: IAxisValueFormatter {

    func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        if let dateFormatter = dateFormatter {

            let date = Date(timeIntervalSince1970: value)
            return dateFormatter.string(from: date)
        }

        return ""
    }

}

所以，这里的值是正确的，格式是正确的，图表的形状是正确的，但是标签与相应图表的对齐不好.感谢您的帮助

So, the values here are correct, the formatting is correct, the shape of the chart is correct, but the alignment of the labels with the corresponding plots is not good. Thanks for your help

推荐答案

好的，知道了！

您必须定义一个参考时间间隔(x 轴的0").然后计算每个 x 值的附加时间间隔.

You've got to define a reference time Interval (the "0" for the x axis). And then calculate the additional time interval for each x value.

ChartXAxisFormatter 变为:

The ChartXAxisFormatter becomes:

import Foundation
import Charts

class ChartXAxisFormatter: NSObject {
    fileprivate var dateFormatter: DateFormatter?
    fileprivate var referenceTimeInterval: TimeInterval?

    convenience init(referenceTimeInterval: TimeInterval, dateFormatter: DateFormatter) {
        self.init()
        self.referenceTimeInterval = referenceTimeInterval
        self.dateFormatter = dateFormatter
    }
}


extension ChartXAxisFormatter: IAxisValueFormatter {

    func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        guard let dateFormatter = dateFormatter,
        let referenceTimeInterval = referenceTimeInterval
        else {
            return ""
        }

        let date = Date(timeIntervalSince1970: value * 3600 * 24 + referenceTimeInterval)
        return dateFormatter.string(from: date)
    }

}

然后，当我创建数据条目时，它的工作方式如下:

And, then, when I create my data entries, it works like so:

// (objects is defined as an array of struct with date and value)

// Define the reference time interval
var referenceTimeInterval: TimeInterval = 0
if let minTimeInterval = (objects.map { $0.date.timeIntervalSince1970 }).min() {
        referenceTimeInterval = minTimeInterval
    }


    // Define chart xValues formatter
    let formatter = DateFormatter()
    formatter.dateStyle = .short
    formatter.timeStyle = .none
    formatter.locale = Locale.current

    let xValuesNumberFormatter = ChartXAxisFormatter(referenceTimeInterval: referenceTimeInterval, dateFormatter: formatter)



    // Define chart entries
    var entries = [ChartDataEntry]()
    for object in objects {
        let timeInterval = object.date.timeIntervalSince1970
        let xValue = (timeInterval - referenceTimeInterval) / (3600 * 24)

        let yValue = object.value
        let entry = ChartDataEntry(x: xValue, y: yValue)
        entries.append(entry)
    }

// Pass these entries and the formatter to the Chart ...

结果要好得多(顺便说一下，我删除了立方体):

The result is much nicer (I removed cubic by the way):

这篇关于ios Charts 3.0 - 将 x 标签(日期)与图表对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！