Метка круговой диаграммы, накладывающаяся на круговую диаграмму в маленьком устройстве

Question

Я использовал следующую библиотеку для отображения круговой диаграммы в моем текущем проекте: https://github.com/danielgindi/Charts.

Но я столкнулся с проблемой с круговой диаграммой в небольших устройствах iPhone.Я реализовал следующий код для отображения пи-диаграммы:

class ChartVC: UIViewController {

    @IBOutlet weak var pieChartView : PieChartView!

    var arrPiChartData : [PiChartData]?

    func setupPiChart() {

        let l = pieChartView.legend
        l.horizontalAlignment = .right
        l.verticalAlignment = .bottom
        l.orientation = .vertical
        l.xEntrySpace = 0
        l.yEntrySpace = 0
        l.yOffset = 0
        l.font = self.isPhone ? Typography.robotoRegular14 : Typography.robotoRegular18

        self.pieChartView.entryLabelFont = Typography.robotoRegular14
        self.pieChartView.drawHoleEnabled = false
        self.pieChartView.notifyDataSetChanged()
    }

    func setupData() {

        var arr = [PieChartDataEntry]()

        if self.arrPiChartData != nil {

            for piChartData in self.arrPiChartData! {

                var name = ""
                if let strName = piChartData.name {
                    name = strName
                }

                var value = 0.0
                if let floatValue = piChartData.percentAmount {
                    value = Double(floatValue)
                }

                let entry = PieChartDataEntry(value: value, label: name)
                arr.append(entry)
            }

            let set = PieChartDataSet(values: arr, label: "Total Sales by Company Users")
            set.drawIconsEnabled = false
            set.sliceSpace = 2
            set.xValuePosition = .outsideSlice
            set.entryLabelColor = UIColor.black
            set.entryLabelFont = self.isPhone ? Typography.robotoRegular14 : Typography.robotoRegular18

            set.colors = self.arrColours

            let data = PieChartData(dataSets: [set])

            let pFormatter = NumberFormatter()
            pFormatter.numberStyle = .percent
            pFormatter.maximumFractionDigits = 1
            pFormatter.multiplier = 1
            pFormatter.percentSymbol = " %"
            data.setValueFormatter(DefaultValueFormatter(formatter: pFormatter))

            self.pieChartView.data = data

        } else {
            self.pieChartView.data = nil
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        self.setupPiChart()
        self.setupData()
    }

    //------------------------------------------------------------------------------

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        self.pieChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0)
    }
}

Этот код работает для отображения круговой диаграммы.Но возникла проблема, когда я запустил приложение на маленьком устройстве, таком как iPhone SE, 5S, 6, 7, 8. Данные меток перекрываются с круговой диаграммой.

Пожалуйста, см. Следующее изображение, которое опишет, какая проблема.

Я пытался найти решение, но не получил.

Мне нужна помощь, чтобы решить эту проблему или найти лучшее решение.

Answer 1

Из-за отсутствия хорошего способа отображения большего количества легенд по вертикали на круговой диаграмме, я обновил свой код, чтобы отобразить его в горизонтальном направлении.Также заголовок не отображается должным образом на круговой диаграмме, поэтому удалите его.Для этого я обновил свой код следующим образом, чтобы отобразить правильную круговую диаграмму:

func setupPiChart() {

    // This will align label text to top right corner
    let l = pieChartView.legend
    l.horizontalAlignment = .left
    l.verticalAlignment = .bottom
    l.orientation = .horizontal
    l.xEntrySpace = 10
    l.yEntrySpace = 0
    l.font = self.isPhone ? Typography.robotoRegular14 : Typography.robotoRegular18

    self.pieChartView.entryLabelFont = Typography.robotoRegular14
    self.pieChartView.drawHoleEnabled = false
    self.pieChartView.drawEntryLabelsEnabled = false
    self.pieChartView.notifyDataSetChanged()
}

Теперь он хорошо выглядит, как выглядит на следующем рисунке: