饼图的标签与小型设备中的饼图重叠答案

【问题标题】：Pie Chart's label overlapping to pie chart in small device饼图的标签与小型设备中的饼图重叠
【发布时间】：2019-01-29 05:19:24
【问题描述】：

我在当前项目中使用了以下库来显示饼图：https://github.com/danielgindi/Charts。

但是，我在 iPhone 小型设备中遇到了饼图问题。我已经实现了以下代码来显示 pi 图表：

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 等小型设备上运行应用程序时出现问题。标签数据与饼图重叠。

请参见下图，该图将描述实际问题。

我试图找到解决方案，但没有得到。

我需要帮助来解决此问题或更好的解决方案。

【问题讨论】：

使用水平方向怎么样？我认为 PieChart 不像其他图表那样缩放，因此您可能需要为该 iPhone 尺寸明确设置高度或使用水平方向作为图例。
您是否尝试过在较小的设备中减小标签字体大小？
如果名称不是有限的，则不应在此处使用饼图。相反，您可以使用条形图显示百分比。
@MayurKarmur 从技术上讲，不可能在不重叠标签的情况下将 100 个用户数据显示到饼图中。试想你只有一个圆圈，0.4%、0.5% 的数据会使线条的厚度可能小于 1px，那么在这种情况下，你将如何显示标题？您最多可以做的是更改替代标题标签的 X 位置，以便它们以锯齿形图案显示。
正如@TheTiger 所说，如果您有更多 5-10 个条目，最好使用其他图表。 6 度角不像条形图上的 6 个像素那样可见。如果您要显示图例，则可以禁用显示 valueLinePart/xAxisLabels。

标签： ios swift charts pie-chart

【解决方案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()
}

现在，它的显示效果如下图所示：

【讨论】：