Charts: LineChart X-Axis - Cara Selalu Menampilkan Label Pertama & Terakhir

Dibuat pada 26 Des 2016  ·  21Komentar  ·  Sumber: danielgindi/Charts

Di Bagan Garis saya, saya sudah mengaturnya sehingga jika hanya ada satu entri data, saya membuat titik data muncul di tengah seperti ini:

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

Jika ada lebih banyak entri data, akan terlihat lebih seperti ini:

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

Masalah yang saya alami adalah label terakhir pada X-Axis tidak muncul. Ini adalah data dari 30 hari terakhir, jadi saya ingin label terakhir, 25 Des, muncul. Adakah cara agar Bagan Garis saya selalu menampilkan label pertama dan terakhir pada Sumbu-X? Saya tidak peduli bagaimana itu menghitung atau melompati label di antaranya.

bug

Komentar yang paling membantu

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

Ini akan membantu untuk menampilkan nilai terakhir dari grafik garis - saya mencoba dan bekerja untuk saya

Semua 21 komentar

coba avoidFirstLastClippingEnabled , defaultnya salah.

    /// 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 Apakah Anda dapat menyelesaikan masalah yang disebutkan pada gambar ke-2? Silakan bagikan solusinya

avoidFirstLastClippingEnabled tidak membantu. Label terakhir selalu dipotong

Jika saya melihat ke dalam kode sumber, entri sumbu dihitung dalam AxisRendererBase.computeAxisValues dan tidak ada cara untuk memaksakan nilai maksimal yang akan ditampilkan. Saya yakin fungsi ini didukung di versi sebelumnya.

https://github.com/danielgindi/Charts/issues/2007 tampaknya memiliki masalah yang sama dengan yang satu ini?
@ondrejhanslik secara default, computeAxisValues ​​() akan membutuhkan nilai min dan max untuk menghitung kisaran. Jadi nilai min dan max harus lebih besar dari nilai min / max data untuk menampung semua data. Sudahkah Anda memeriksa berapa nilai min / max Anda di computeAxisValues ​​(), dan berapa nilai min / max data Anda?

@ liuxuan30 Saya menggunakan array String kustom sebagai Nilai X-Axis yaitu Tanggal

Berikut tangkapan layar dari bagan saya

untitled

Beginilah tampilan bagan saya saat menyetel avoidFirstLastClippingEnabled menjadi true:

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

Berikut beberapa kode tambahan yang saya gunakan untuk mengatur X-Axis saya:

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

Omong-omong, saya menggunakan Charts 3.0.1 :)

Sama disini. Grafik 3.0.1 , XCode 8.0 dan Swift 3.0

Jika solusi tidak memungkinkan untuk situasi ini, saya rasa solusi yang mungkin masuk akal adalah, saat bagan ditampilkan, sorot nilai terakhir (hari ini) sehingga "BalloonMarker" muncul dan menampilkan teks "Des XX \ n500 ".

Di sisi saya jelas :)

Oke saya memeriksanya.

Pada bagan 3.0, sumbu x berperilaku seperti sumbu y, sehingga Anda dapat memeriksa label sumbu y Anda, label sumbu y terbesar lebih kecil dari nilai maks data, di
image

Di computeAxisValues() , ia membaca nilai min dan maks dari nilai sumbu min / maks (yang merupakan nilai min / maks data) dan menghitung interval untuk mendapatkan label sumbu x.

Misalnya di ChartsDemo - Line Chart Dual YAxis, jika nilai x saya dari 0 hingga 20,
computeAxisValues() mengambil 0, 20 sebagai nilai min / max, kemudian, labelCount adalah 6 secara default, itu akan menghitung rawInterval = (max - min) / labelCount , dan kemudian interval terakhir adalah 3. Kemudian dimulai dari 0, untuk mendapatkan 7 (labelCount + 1) label, yaitu 0,3,6,9,12,15,18. Label sumbu x terakhir adalah 18, bukan 20.

Alasan isAvoidFirstLastClippingEnabled tidak berfungsi adalah karena menangani saat label terakhir di luar batas, jadi tidak relevan dengan masalah ini.

Jika Anda ingin memastikan label yang merupakan nilai x data Anda, Anda harus mengubah computeAxisValues() untuk mengembalikan label. Cukup periksa computeAxisValues() untuk melihat detailnya dan Anda seharusnya dapat mengubahnya.

@danielgindi apa yang Anda pikirkan untuk kasus pengguna seperti itu?

@ liuxuan30 Kami tidak ingin mengubah computeAxisValues untuk mengembalikan beberapa label tertentu. Misalnya, ketika saya menampilkan bagan di atas tanggal (misalnya nilai x adalah hari dalam seminggu, hari dalam sebulan atau bulan dalam setahun), saya memerlukan label pertama dan terakhir untuk ditampilkan (misalnya Senin dan Minggu atau 1 / 1 dan 31/1).

Saya pertama kali menghasilkan nilai yang diformat (misalnya nama hari atau hari yang diformat) dan kemudian mengaturnya sebagai:

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

Yang saya butuhkan adalah computeAxisValues yang lebih pintar yang akan selalu menampilkan label pertama dan label terakhir dan kemudian akan menghitung label di antara mereka.

Ini adalah kasus penggunaan yang sangat mendasar dan sangat umum.

Saya mengerti. Masih ada bug tentang label sumbu x, misalnya label overlap.
Logika saat ini pertama-tama mengetahui nilai min / maks, dan menghasilkan interval darinya dan mengakumulasi untuk mendapatkan label sumbu. Namun computeAxisValues() ini tidak menjamin nilai maksimal / label terakhir adalah xAxis.axisMaximum. Untuk itulah saya membutuhkan masukan dari @danielgindi tentang hal ini.

Mungkin saya harus menggunakan 'override' daripada 'tweak' untuk computeAxisValues ​​(). Anda dapat menyediakan implementasi untuk memastikan nilai pertama / terakhir Anda selalu ditampilkan sebagai solusi. Namun, ini mungkin menyebabkan label tidak terikat atau masalah lainnya.

Cara lain adalah, Anda dapat mencoba setLabelCount(count, forceLabelEnabled) sama dengan jumlah nilai x Anda atau setengahnya untuk melihat hasilnya.
Logikanya cukup berbeda maka:

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

Ini tidak melibatkan proses tambahan, hanya matematika sederhana.

@ liuxuan30 Bagaimana jika nilai sumbu x dalam format String? Dalam kasus saya, nilai sumbu x adalah Tanggal dalam format String

@ vaibhav-varshaaweblabs x axis sekarang mengambil ganda HANYA di Bagan 3.x, jadi Anda dapat menggunakan valueFormatter untuk menampilkan label, bukan ganda. Namun, valueFormatter mungkin rumit, saat Anda perlu mempertimbangkan untuk memperbesar / menggulir

Adakah yang menemukan solusi untuk ini di Bagan 3.0.2? Saya menggunakan string tanggal untuk label sumbu x saya dan melihat label terakhir menghilang sesekali, tetapi mengalami masalah saat mereproduksi. Ini dengan isAvoidFirstLastClippingEnabled disetel ke true . Saya ingin tahu apakah ini terkait dengan # 2563?

@ vaibhav-varshaaweblabs @raudabaugh : Bagaimana kalian bisa memplot string di X-Axis, karena metode setDataCount mengharapkan nilai int atau double untuk X dan Y.
Mohon beri tahu saya, terima kasih sebelumnya

bottomAxis.setLabelCount (entries.size (), true); dan juga mengatur margin ke kanan untuk membuat hitungan terakhir terlihat.

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

Ini akan membantu untuk menampilkan nilai terakhir dari grafik garis - saya mencoba dan bekerja untuk saya

Apakah halaman ini membantu?
0 / 5 - 0 peringkat