iOS 图表 : Bar chart spacing and position

Question

目标

我正在尝试在条形图中显示来自两组(ACTIVE 和 REST)的数据。这些集合是交替的(意味着有一个事件间隔，然后是一个休息间隔，等等)。相反，每两个 ACTIVE 集之间总是有一个 REST 集。

我使用的代码如下，供引用。但是，我遇到了条形位置和间距的问题。

问题:在 x 值处居中条

第一个问题，条形图没有以相应的 x 值为中心。在下面的示例中，第一个橙色条的 x = 1。

它显然从 x 轴上的值 1 开始(它的最左侧对应于大约 1)，但我希望它以 x 轴上的 1 值为中心

问题:条间距

由于某种原因，条形交点和间距不相等(见屏幕截图)。请注意第 2 条和第 3 条之间的空白，以及第 1 条和第 2 条之间没有空格。

这里的相关代码是:

let barWidth = 1.0
let barSpace = 0.10
let groupSpace = 0.1

chartData.groupBars(fromX: 1, groupSpace: groupSpace, barSpace: barSpace)
chartData.barWidth = barWidth

索引柱和 BarChartDataEntry

每个集合(REST 和 ACTIVE)都来自不同的值数组。

如果我按下第一个 REST 栏，我想获得相应的值 0。在第一个 ACTIVE 栏上，值也为 0。第二个活跃栏，值 1...

但是，在 chartValueSelected 中，使用 entry.x 值给出了柱在轴上的 x 位置(不是我在代码中设置的 x 值) , 这是大小写错误。

如何获取所选柱在其所属集合中的索引值？

代码

//
//  MARK: Chart Setup
//
func setupBarChart() {

    let intervals = self.session!.getIntervals()

    //  Set chart delegate
    intervalBarChartView.delegate = self

    //
    // Create pairs (x, y) of values 
    //
    var values_ACTIVE : [BarChartDataEntry] = []
    var values_REST   : [BarChartDataEntry] = []

    for i in 0...(intervals.count - 1) {

        let newValue_ACTIVE    = intervals[i].duration!.doubleValue
        //            let newIndex_ACTIVE       = Double(2*i+1)
        let newIndex_ACTIVE      = Double(i)

        values_ACTIVE += [BarChartDataEntry(x: newIndex_ACTIVE, y: newValue_ACTIVE)]

        if i < (intervals.count - 1) {

            let newValue_REST      = (intervals[i+1].startTime!.doubleValue) - intervals[i].getEndTime()!
            //                let newIndex_REST         = Double(2*i+2)
            let newIndex_REST         = Double(i)

            values_REST += [BarChartDataEntry(x: newIndex_REST, y: newValue_REST)]

        }

    }

    //  Create data sets
    let dataSet_ACTIVE  = BarChartDataSet(values: values_ACTIVE, label: "ACTIVE")
    let dataSet_REST    = BarChartDataSet(values: values_REST, label: "REST")

    //Set chart data
    let chartData = BarChartData()
    chartData.addDataSet(dataSet_REST)
    chartData.addDataSet(dataSet_ACTIVE)

    self.intervalBarChartView.data = chartData

    //  Bar sizes
    let barWidth = 1.0
    let barSpace = 0.10
    let groupSpace = 0.1

    chartData.groupBars(fromX: 0, groupSpace: groupSpace, barSpace: barSpace)
    chartData.barWidth = barWidth

    //  Bar Colors
    dataSet_ACTIVE.colors = [runOrange]
    dataSet_REST.colors = [RunGreen]
    self.intervalBarChartView.gridBackgroundColor = NSUIColor.white

    //  Enable/Disable show values and position of values
    chartData.setDrawValues(false)
    intervalBarChartView.drawValueAboveBarEnabled = false

    //  Bar Axes: 
    intervalBarChartView.xAxis.axisMinimum = 0.0
    intervalBarChartView.xAxis.axisMaximum = 10
    intervalBarChartView.leftAxis.axisMinimum = 0.0
    intervalBarChartView.rightAxis.enabled = false

    //  Bar Axes: GridLines
    self.intervalBarChartView.xAxis.drawGridLinesEnabled = false
    self.intervalBarChartView.xAxis.drawAxisLineEnabled = false

    self.intervalBarChartView.rightAxis.drawAxisLineEnabled = true
    self.intervalBarChartView.rightAxis.drawGridLinesEnabled = false

    self.intervalBarChartView.leftAxis.drawGridLinesEnabled = false
    self.intervalBarChartView.leftAxis.drawAxisLineEnabled = false

    //  Bar Text
    self.intervalBarChartView.chartDescription?.text = "Barchart Demo"

    //  Control interaction
    self.intervalBarChartView.doubleTapToZoomEnabled = false

}

编辑

这是我通过两种不同的设置编译得到的结果:

使用这些设置:

    //  Bar sizes
    let barWidth = 0.3
    let barSpace = 0.10
    let groupSpace = 0.1

条形之间的间隙(或多或少)相等:

但是，使用这些设置:

let groupSpace = 0.3
let barSpace = 0.05
let barWidth = 0.3

我在第 2 条和第 3 条之间的差距更大(与第 1 条和第 2 条相比)

Answer 1

您需要更改您的 barWidth 计算，以便您可以在输出中获得您期望的结果。

GroupBarChart Bar & Spacing 计算逻辑:

(baSpace + barWidth) * dataSet count + groupSpace = 1.0

因此在您的情况下，您需要像这样更新以上值:

let groupSpace = 0.3
let barSpace = 0.05
let barWidth = 0.3
// (0.3 + 0.05) * 2 + 0.3 = 1.00 -> interval per "group"

let startVal = 0

chartData.barWidth = barWidth;
chartData.groupBars(fromX: Double(startVal), groupSpace: groupSpace, barSpace: barSpace)

通过这样做，您将在条形图中获得正确的中心条位置。

还有一个选项是仅为您的图表设置 BarWidth，如下所示:

let barChartData = BarChartData(dataSet: barChartDataSet)
barChartData.barWidth = 0.4

希望这会有所帮助!