Charts: LineChart X轴-如何始终显示第一个和最后一个标签

创建于 2016-12-26  ·  21评论  ·  资料来源: danielgindi/Charts

在我的折线图中,我进行了设置,以便如果只有一个数据条目,则使数据点显示在中间,如下所示:

screen shot 2016-12-25 at 7 00 36 pm

如果有更多的数据条目,它将看起来像这样:

screen shot 2016-12-25 at 7 00 50 pm

我遇到的问题是X轴上的最后一个标签没有显示。 这是过去30天的数据,因此我希望显示最后一个标签12月25日。 有没有一种方法可以使我的折线图始终在X轴上显示第一个和最后一个标签? 我不在乎它如何计算或跳过之间的标签。

最有用的评论

    lineChart?.xAxis.setLabelCount(arrOfMonth.count, force: true)

这将有助于显示折线图的最后一个值-我为我尝试并工作过

所有21条评论

尝试avoidFirstLastClippingEnabled ,默认为false。

    /// if set to true, the chart will avoid that the first and last label entry in the chart "clip" off the edge of the chart
    open var avoidFirstLastClippingEnabled = false

@ cnowak7您能解决第二张图片中提到的问题吗? 请分享解决方案

avoidFirstLastClippingEnabled没有帮助。 最后一个标签总是被切掉

如果我查看源代码,则轴条目以AxisRendererBase.computeAxisValues计算,并且没有办法强制显示最大值。 我相信此功能在以前的版本中受支持。

https://github.com/danielgindi/Charts/issues/2007似乎与此问题相同?
@ondrejhanslik默认情况下,computeAxisValues()将采用最小值和最大值来计算范围。 因此,最小值和最大值应大于数据的最小值/最大值以容纳所有数据。 您是否检查过computeAxisValues()中的最小/最大值是多少,以及数据的最小/最大值是什么?

@ liuxuan30我将自定义字符串数组用作X轴值,即日期

这是我的图表的屏幕截图

untitled

这是将avoidFirstLastClippingEnabled为true时图表的外观:

screen shot 2016-12-28 at 11 02 15 pm

这是我用来设置X轴的一些额外代码:

private func setUpLineChartPreferences() {
        .
        .
        .
        // x-axis
        self.lineChart.xAxis.labelPosition = .bottom
        self.lineChart.xAxis.drawGridLinesEnabled = true
        self.lineChart.xAxis.granularity = 1.0
        .
        .
        .
}
private func setUpLineChart(withDataEntries entries: [ChartDataEntry]) {
        let entryCount = entries.count
        if entryCount > 0 {
            let dataSet = LineChartDataSet(values: entries, label: nil)
            dataSet.drawFilledEnabled = true
            dataSet.fillColor = .green
            dataSet.circleRadius = 5
            dataSet.drawValuesEnabled = false
            dataSet.setColor(.black)
            dataSet.highlightColor = .green
            dataSet.setCircleColor(.blue)
            let lineChartData = LineChartData(dataSet: dataSet)
            self.lineChart.data = lineChartData
            // SET UP X-AXIS
            self.lineChart.xAxis.valueFormatter = IndexAxisValueFormatter(values: self.chartLabels)
            self.lineChart.xAxis.avoidFirstLastClippingEnabled = true
            print("NOWAK: CHART LABELS THO - \(self.chartLabels)")
            if entryCount == 1 {
                self.lineChart.xAxis.axisMinimum = -1.0
                self.lineChart.xAxis.axisMaximum = 1.0
            } else {
                self.lineChart.xAxis.axisMinimum = 0.0
                self.lineChart.xAxis.axisMaximum = Double(self.chartLabels.count - 1)
            }
            print("X MIN IS \(self.lineChart.xAxis.axisMinimum) AND X MAX IS \(self.lineChart.xAxis.axisMaximum)")
        } else {
            self.lineChart.noDataText = "No Stats For The Past \(self.currentFilter.capitalized)"
            self.lineChart.setNeedsDisplay()
        }
        switch self.currentFilter {
        case "week":
            self.weekFilterButton.backgroundColor = .blue
            self.monthFilterButton.backgroundColor = .darkGray
            self.yearFilterButton.backgroundColor = .darkGray
        case "month":
            self.monthFilterButton.backgroundColor = .blue
            self.weekFilterButton.backgroundColor = .darkGray
            self.yearFilterButton.backgroundColor = .darkGray
        case "year":
            self.yearFilterButton.backgroundColor = .blue
            self.weekFilterButton.backgroundColor = .darkGray
            self.monthFilterButton.backgroundColor = .darkGray
        default:
            print("ERROR SETTING FILTER BUTTON BACKGROUND COLORS")
        }
        self.stopLoading()
}

我正在使用Charts 3.0.1 :)

同样在这里。 图表3.0.1XCode 8.0Swift 3.0

如果在这种情况下无法解决,我想可能有一个可行的解决方法,当显示图表时,突出显示最后一个值(今天),以便显示“ BalloonMarker”并显示文本“ Dec XX \ n500”。

在我这边显然是:)

好的,我检查了一下。

在图表3.0中,x轴的行为类似于y轴,因此您可以签出y轴标签,最大的y轴标签小于数据的最大值,
image

computeAxisValues() ,它从轴的最小值/最大值(它是数据的最小值/最大值)中读取最小值和最大值,并计算一个间隔以获取x轴标签。

例如在ChartsDemo-折线图双YAxis中,如果我的x值介于0到20之间,
computeAxisValues()最小值/最大值为0、20,然后,我的labelCount默认为6,它将计算rawInterval = (max - min) / labelCount ,之后的最终间隔为3。然后从0开始,得到7(labelCount + 1)个标签,分别是0,3,6,9,12,15,18。 x轴标签的最后一个是18,而不是20。

isAvoidFirstLastClippingEnabled不起作用的原因是,它可以处理最后一个标签超出范围的情况,因此与此问题无关。

如果要确定标签是数据的x值,则必须调整computeAxisValues()以返回标签。 只需签出computeAxisValues()即可查看详细信息,您应该可以对其进行更改。

@danielgindi您对这种用例有何看法?

@ liuxuan30我们不想调整computeAxisValues以返回一些特定的标签。 例如,当我显示日期上的图表时(例如x值是一周中的几天,一个月中的某天或一年中的几个月),我需要显示第一个和最后一个标签(例如,星期一和星期日或1 / 1和31/1)。

我首先生成格式化的值(例如,日期名称或格式化的日期),然后将其设置为:

    xAxis.axisMinimum = 0
    xAxis.axisMaximum = Double(xValues.count - 1)
    xAxis.valueFormatter = IndexAxisValueFormatter(values: xValues)

我需要的是一个更聪明的computeAxisValues ,它将始终显示第一个标签和最后一个标签,然后计算它们之间的标签。

这是一个非常基本且非常常见的用例。

我明白。 关于x轴标签仍然存在错误,例如标签重叠。
当前逻辑首先要知道最小值/最大值,并据此生成间隔并累加以获得轴标签。 但是,当前computeAxisValues()不保证最大值/最后一个标签为xAxis.axisMaximum。 这就是我需要@danielgindi对此的投入。

也许我应该将“ override”而不是“ tweak”用于computeAxisValues()。 您可以提供一个实现来确保您的第一个/最后一个值始终显示为解决方法。 但是,这可能会导致标签超出范围或其他问题。

另一种方法是,您可以尝试setLabelCount(count, forceLabelEnabled)等于您的x值计数或一半来查看结果。
逻辑是完全不同的:

        // force label count
        if axis.isForceLabelsEnabled
        {
            interval = Double(range) / Double(labelCount - 1)

            // Ensure stops contains at least n elements.
            axis.entries.removeAll(keepingCapacity: true)
            axis.entries.reserveCapacity(labelCount)

            var v = yMin

            for _ in 0 ..< labelCount
            {
                axis.entries.append(v)
                v += interval
            }

            n = labelCount
        }

它不涉及附加过程,仅涉及简单的数学运算。

@ liuxuan30如果x轴值为String格式怎么办? 就我而言,x轴值是String格式的Dates

@ vaibhav-varshaaweblabs x轴现在在图表3.x中仅采用双精度,因此您可以使用valueFormatter来显示标签而不是双精度。 但是,当您需要考虑缩放/滚动时,valueFormatter可能会很复杂。

有人在Charts 3.0.2中找到解决方案吗? 我在x轴标签上使用日期字符串,并且看到最后一个标签偶尔会消失,但是在复制时遇到了麻烦。 isAvoidFirstLastClippingEnabled设置为true 。 我想知道这是否与#2563有关?

@ vaibhav-varshaaweblabs @raudabaugh :由于setDataCount方法期望X和Y为int或double值,因此
请让我知道,在此先感谢

bottomAxis.setLabelCount(entries.size(),true); 并设置边距权限以显示最后的计数。

    lineChart?.xAxis.setLabelCount(arrOfMonth.count, force: true)

这将有助于显示折线图的最后一个值-我为我尝试并工作过

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

sjdevlin picture sjdevlin  ·  3评论

Aungbandlab picture Aungbandlab  ·  4评论

guoyutaog picture guoyutaog  ·  3评论

kwstasna picture kwstasna  ·  3评论

JW00332 picture JW00332  ·  4评论