Charts: LineChart X-Axis - Comment toujours afficher la première et la dernière étiquette

Créé le 26 déc. 2016  ·  21Commentaires  ·  Source: danielgindi/Charts

Dans mon graphique en courbes, je l'ai configuré de sorte que s'il n'y a qu'une seule entrée de données, je fais apparaître le point de données au milieu comme ceci:

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

S'il y a plus d'entrées de données, cela ressemblera plus à ceci:

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

Le problème que j'ai, c'est que la dernière étiquette de l'axe X n'apparaît pas. Ce sont des données des 30 derniers jours, alors j'aimerais que la dernière étiquette, le 25 décembre, apparaisse. Existe-t-il un moyen de faire en sorte que mon graphique linéaire affiche toujours la première et la dernière étiquette sur l'axe X? Peu m'importe comment il calcule ou ignore les étiquettes entre les deux.

bug

Commentaire le plus utile

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

Cela aidera à afficher la dernière valeur du graphique en courbes - j'ai essayé et travaillé pour moi

Tous les 21 commentaires

essayez avoidFirstLastClippingEnabled , la valeur par défaut est 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 Avez-vous réussi à résoudre le problème mentionné dans la deuxième image? Veuillez partager la solution

avoidFirstLastClippingEnabled n'aide pas. La dernière étiquette est toujours coupée

Si je regarde dans le code source, les entrées de l'axe sont calculées en AxisRendererBase.computeAxisValues et il n'y a aucun moyen d'appliquer la valeur maximale à afficher. Je pense que cette fonctionnalité était prise en charge dans la version précédente.

https://github.com/danielgindi/Charts/issues/2007 semble même problème avec celui-ci?
@ondrejhanslik par défaut, computeAxisValues ​​() prendra les valeurs min et max pour calculer la plage. Ainsi, les valeurs min et max doivent être plus grandes que la valeur min / max des données pour contenir toutes les données. Avez-vous vérifié quelle est votre valeur min / max dans computeAxisValues ​​() et quelle est la valeur min / max de vos données?

@ liuxuan30 J'utilise un tableau de chaînes personnalisé comme valeurs de l'axe X, c'est-à-dire des dates

Voici une capture d'écran de mon graphique

untitled

Voici à quoi ressemble mon graphique lorsque vous définissez avoidFirstLastClippingEnabled sur true:

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

Voici un code supplémentaire que j'utilise pour configurer mon axe 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()
}

Au fait, j'utilise les graphiques 3.0.1 :)

Pareil ici. Graphiques 3.0.1 , XCode 8.0 et Swift 3.0

Si une solution n'est pas possible pour cette situation, je suppose qu'une solution de contournement qui aurait probablement du sens serait, lorsque le graphique est affiché, de mettre en surbrillance la dernière valeur (aujourd'hui) afin que le "BalloonMarker" s'affiche en affichant le texte "Dec XX \ n500 ".

De mon côté évidemment :)

OK je l'ai vérifié.

Dans le graphique 3.0, l'axe des x se comporte comme l'axe des y, vous pouvez donc consulter les étiquettes de votre axe des y, la plus grande étiquette de l'axe des y est plus petite que la valeur maximale des données, en
image

Dans computeAxisValues() , il lit les valeurs min et max à partir de la valeur min / max de l'axe (qui est la valeur min / max des données) et calcule un intervalle pour obtenir les étiquettes de l'axe x.

Par exemple dans ChartsDemo - Line Chart Dual YAxis, si mes valeurs x sont comprises entre 0 et 20,
computeAxisValues() prend 0, 20 comme valeur min / max, alors, mon labelCount est 6 par défaut, il calculera rawInterval = (max - min) / labelCount , et plus tard l'intervalle final sera 3. Puis il commence à 0, pour obtenir 7 étiquettes (labelCount + 1), qui sont 0,3,6,9,12,15,18. La dernière étiquette de l'axe des x est 18 et non 20.

La raison isAvoidFirstLastClippingEnabled laquelle

Si vous voulez vous assurer que l'étiquette correspond à la valeur x de vos données, vous devez modifier computeAxisValues() pour renvoyer les étiquettes. Vérifiez simplement computeAxisValues() pour voir les détails et vous devriez pouvoir le changer.

@danielgindi que pensez-vous de ces cas d'utilisateurs?

@ liuxuan30 Nous ne voulons pas modifier computeAxisValues pour renvoyer des étiquettes spécifiques. Par exemple, lorsque j'affiche un graphique sur des dates (par exemple, les valeurs x sont des jours d'une semaine, des jours d'un mois ou des mois d'une année), j'ai besoin que les premier et dernier libellés soient affichés (par exemple, lundi et dimanche ou 1 / 1 et 31/1).

Je génère d'abord les valeurs formatées (par exemple les noms de jour ou les jours formatés), puis je les définit comme:

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

Ce dont j'ai besoin, c'est d'un computeAxisValues plus intelligent qui affichera toujours la première étiquette et la dernière étiquette, puis calculera les étiquettes entre elles.

Il s'agit d'un cas d'utilisation très basique et très courant.

Je comprends. Il y a encore des bogues concernant les étiquettes de l'axe x, par exemple le chevauchement d'étiquettes.
La logique actuelle consiste d'abord à connaître la valeur min / max, à générer des intervalles à partir de celle-ci et à s'accumuler pour obtenir les étiquettes d'axe. Cependant, le computeAxisValues() actuel ne garantit pas que la valeur maximale / la dernière étiquette est xAxis.axisMaximum. C'est ce dont j'ai besoin de la contribution de

Je devrais peut-être utiliser «override» plutôt que «tweak» pour computeAxisValues ​​(). Vous pouvez fournir une implémentation pour vous assurer que votre première / dernière valeur est toujours affichée comme solution de contournement. Cependant, cela peut entraîner des problèmes d'étiquette hors de la limite ou d'autres problèmes.

Une autre façon est que vous pouvez essayer setLabelCount(count, forceLabelEnabled) égal à votre nombre de x valeurs ou la moitié pour voir le résultat.
La logique est alors assez différente:

        // 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
        }

Cela n'implique pas le processus supplémentaire, juste des calculs simples.

@ liuxuan30 Que faire si les valeurs de l'axe des x sont au format chaîne? Dans mon cas, les valeurs de l'axe des x sont des dates au format chaîne

L'axe des x @ vaibhav-varshaaweblabs prend désormais le double UNIQUEMENT dans le graphique 3.x, vous pouvez donc utiliser valueFormatter pour afficher l'étiquette au lieu du double. Cependant, la valeur valueFormatter peut être compliquée, lorsque vous devez envisager de zoomer / faire défiler

Quelqu'un a-t-il trouvé une solution à ce problème dans les graphiques 3.0.2? J'utilise des chaînes de date pour mes étiquettes sur l'axe des x et je vois la dernière étiquette disparaître de temps en temps, mais j'ai du mal à se reproduire. C'est avec isAvoidFirstLastClippingEnabled mis à true . Je me demande si cela pourrait être lié à # 2563?

@ vaibhav-varshaaweblabs @raudabaugh : Comment avez-vous réussi à tracer des chaînes sur l'axe X, car la méthode setDataCount attend des valeurs int ou doubles pour X et Y.
Veuillez me le faire savoir, merci d'avance

bottomAxis.setLabelCount (entries.size (), true); et définissez également la marge à droite pour rendre visible le dernier décompte.

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

Cela aidera à afficher la dernière valeur du graphique en courbes - j'ai essayé et travaillé pour moi

Cette page vous a été utile?
0 / 5 - 0 notes