iOS图表：条形图间距和位置

目标

我试图在条形图中显示两组数据（活动和休息）。 这些集合是交替的（意味着有一个活动间隔，然后是一个休息间隔，等等）。相反，每两个活动集之间都有一个休息集

下面是我使用的代码，仅供参考。 然而，我遇到了酒吧位置和间距的问题

问题：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

}

第一个问题是，条形图未居中于相应的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

每个集合（静止和活动）都来自不同的值数组

如果我按下第一个静止条，我想得到相应的值0。在第一个活动条上，值也为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

}

钢筋之间的间隙（或多或少）相等：

但是，通过这些设置：

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

杆2和杆3之间的间隙更大（与杆1和杆2相比）

---

您需要更改条形宽度的计算，以便在输出中达到预期效果

GroupBarChart

条形图和间距计算的逻辑：

(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)

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

还有一个选项仅用于设置图表的条形宽度，如下所示：

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

---

希望这会有帮助

嘿！谢谢你的回答。不幸的是，它只是扩大了条2和条3之间的差异（与条1和条2相比）——然而，通过这些设置，差距是相同的：`//Bar size`

让barWidth=0.3

让barSpace=0.10

让groupSpace=0.1

不幸的是，无法添加图像来显示我的意思。的确，这个图书馆没有很好的文档记录。有没有办法知道barSpacing和groupSpacing有什么不同？它们如何影响计算？在图表中设置上述建议值后，能否在问题中添加屏幕截图？完成。非常感谢！嘿我的意思是我已经按照你的建议上传了截图。还有一个条形图索引设计的问题：在

chartValueSelected

中，我无法轻松检索集合中条形图的索引，相反，我只有通过设置条形图宽度和间距修改的x值。因此，根据您的屏幕截图，现在您需要增加条形图宽度并减小条形图和组间距。