Charts: 折れ線グラフのX軸-常に最初と最後のラベルを表示する方法

作成日 2016年12月26日  ·  21コメント  ·  ソース: danielgindi/Charts

折れ線グラフでは、データエントリが1つしかない場合に、データポイントが次のように中央に表示されるように設定しています。

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軸の最初と最後のラベルを表示させる方法はありますか? 中間のラベルをどのように計算したりスキップしたりしてもかまいません。

bug

最も参考になるコメント

    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 2番目の画像に記載されている問題を解決できましたか? ソリューションを共有してください

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

ちなみに私はチャート3.0.1を使用しています:)

こっちも一緒。 チャート3.0.1、XCodeの8.03.0スウィフト

この状況で解決できない場合は、チャートが表示されているときに最後の値(今日)を強調表示して、「BalloonMarker」に「Dec」というテキストが表示されるようにすることで、おそらく意味のある回避策になると思います。 XX \ n500 "。

私の側では明らかに:)

OK確認しました。

グラフ3.0では、x軸はy軸のように動作するため、y軸ラベルを確認できます。最大のy軸ラベルは、データの最大値よりも小さくなります。
image

computeAxisValues()では、軸の最小/最大値(データの最小/最大値)から最小値と最大値を読み取り、x軸ラベルを取得するための間隔を計算します。

たとえば、ChartsDemo-折れ線グラフのデュアルY軸で、x値が0から20の場合
computeAxisValues()は最小/最大値として0、20を取ります。その後、私のlabelCountはデフォルトで6であり、 rawInterval = (max - min) / labelCountを計算し、後で最終的な間隔は3になります。 0から始まり、0,3,6,9,12,15,18である7(labelCount + 1)ラベルを取得します。 最後のx軸ラベルは20ではなく18です。

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の入力が必要

たぶん、computeAxisValues()には「tweak」ではなく「override」を使用する必要があります。 最初/最後の値が常に回避策として表示されるように実装を提供できます。 ただし、これにより、ラベルが範囲外またはその他の問題が発生する可能性があります。

もう1つの方法は、 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軸の値が文字列形式の場合はどうなりますか? 私の場合、x軸の値は文字列形式の日付です

@ vaibhav-varshaaweblabs x軸はチャート3.xでのみdoubleを使用するようになったため、doubleの代わりにvalueFormatterを使用してラベルを表示できます。 ただし、ズーム/スクロールを検討する必要がある場合、valueFormatterは複雑になる可能性があります

チャート3.0.2でこれに対する解決策を見つけた人はいますか? x軸ラベルに日付文字列を使用していて、最後のラベルがときどき消えるのを確認していますが、再現に問題があります。 これは、 isAvoidFirstLastClippingEnabledtrue設定されている場合です。 これが#2563に関連しているのではないかと思いますか?

@ vaibhav-varshaaweblabs @raudabaugh :setDataCountメソッドはXとYのint値またはdouble値を期待しているため、どのようにしてX軸に文字列をプロットできましたか。
よろしくお願いします。

bottomAxis.setLabelCount(entries.size()、true); また、マージンを右に設定して、最後のカウントが表示されるようにします。

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

これは折れ線グラフの最後の値を表示するのに役立ちます-私は私のために試し、働きました

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

guanyanlin picture guanyanlin  ·  3コメント

PrashantKT picture PrashantKT  ·  3コメント

Bharati555 picture Bharati555  ·  4コメント

deepumukundan picture deepumukundan  ·  3コメント

valeIT picture valeIT  ·  3コメント