饼图的标签与小型设备中的饼图重叠
Pie Chart's label overlapping to pie chart in small device
我在当前项目中使用了以下库来显示饼图: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 等小型设备上安装 运行 应用程序时出现问题。标签数据与饼图重叠。
请参阅下图,其中描述了实际问题。
我试图找到解决方案但没有成功。
我需要帮助来解决这个问题或更好的解决方案。
由于没有很好的方法在饼图中垂直显示更多图例,我更新了我的代码以在水平方向显示它。此外,标题在饼图中显示不正确,因此请将其删除。为此,我更新了我的代码,以显示正确的饼图:
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()
}
现在显示效果不错,如下图所示:
我在当前项目中使用了以下库来显示饼图: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 等小型设备上安装 运行 应用程序时出现问题。标签数据与饼图重叠。
请参阅下图,其中描述了实际问题。
我试图找到解决方案但没有成功。
我需要帮助来解决这个问题或更好的解决方案。
由于没有很好的方法在饼图中垂直显示更多图例,我更新了我的代码以在水平方向显示它。此外,标题在饼图中显示不正确,因此请将其删除。为此,我更新了我的代码,以显示正确的饼图:
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()
}
现在显示效果不错,如下图所示: