我正在尝试简单的折线图。图表运行良好,我想为x和y轴的每个点添加值/名称。
请参见下图,这是正常现象,但是我想在x和y轴上添加/显示值。
例如:在示例代码中,我提到了months和unitSold值。
在X轴上,我想显示月份名称,在Y轴上,我想显示一些单位销售价值。
如何在x和y轴上显示或显示值?
import UIKit
import Charts
class ViewController: UIViewController {
var dataEntries: [ChartDataEntry] = []
// var chartDataBeanArray = [ChartDataBean]()
let months = ["Jan" , "Feb", "Mar", "Apr", "May", "June", "July", "August", "Sept", "Oct", "Nov", "Dec"]
let unitsSold = [24.0,43.0,56.0,23.0,56.0,68.0,48.0,120.0,41.0,34.0,55.9,12.0,34.0]
@IBOutlet weak var chartViewOutlet: LineChartView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
setChart(months, values: unitsSold)
}
func setChart(_ dataPoints: [String], values: [Double]) {
print(values)
print(dataPoints)
chartViewOutlet.noDataText = "No data available!"
for i in 0..<values.count {
print("chart point : \(values[i])")
let dataEntry = ChartDataEntry(x: Double(i), y: values[i])
dataEntries.append(dataEntry)
}
let line1 = LineChartDataSet(entries: dataEntries, label: "Units Consumed")
line1.colors = [NSUIColor.blue]
line1.mode = .cubicBezier
line1.cubicIntensity = 0.2
let gradient = getGradientFilling()
line1.fill = Fill.fillWithLinearGradient(gradient, angle: 90.0)
line1.drawFilledEnabled = true
let data = LineChartData()
data.addDataSet(line1)
chartViewOutlet.data = data
chartViewOutlet.setScaleEnabled(false)
chartViewOutlet.animate(xAxisDuration: 1.5)
chartViewOutlet.drawGridBackgroundEnabled = false
chartViewOutlet.xAxis.drawAxisLineEnabled = false
chartViewOutlet.xAxis.drawGridLinesEnabled = false
chartViewOutlet.leftAxis.drawAxisLineEnabled = false
chartViewOutlet.leftAxis.drawGridLinesEnabled = false
chartViewOutlet.rightAxis.drawAxisLineEnabled = false
chartViewOutlet.rightAxis.drawGridLinesEnabled = false
chartViewOutlet.legend.enabled = false
chartViewOutlet.xAxis.enabled = false
chartViewOutlet.leftAxis.enabled = false
chartViewOutlet.rightAxis.enabled = false
chartViewOutlet.xAxis.drawLabelsEnabled = false
}
/// Creating gradient for filling space under the line chart
private func getGradientFilling() -> CGGradient {
// Setting fill gradient color
let coloTop = UIColor(red: 141/255, green: 133/255, blue: 220/255, alpha: 1).cgColor
let colorBottom = UIColor(red: 230/255, green: 155/255, blue: 210/255, alpha: 1).cgColor
// Colors of the gradient
let gradientColors = [coloTop, colorBottom] as CFArray
// Positioning of the gradient
let colorLocations: [CGFloat] = [0.7, 0.0]
// Gradient Object
return CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: gradientColors, locations: colorLocations)!
}
}
编辑:添加@marc建议的以下代码后
chartViewOutlet.xAxis.enabled = true
chartViewOutlet.leftAxis.enabled = true
现在正在显示图表。
现在我想在底部(x轴)显示月份值...如何显示?
如果要检查源代码,可以在这里找到:https://drive.google.com/file/d/1vkPqktZ3mX3q9f75-bihVYeublwc2dXE/view?usp=sharing
答案 0 :(得分:2)
在您的项目中添加以下代码。
func setChart(dataPoints: [String], values: [Double]) {
for i in 0 ..< dataPoints.count {
dataEntries.append(ChartDataEntry(x: Double(i), y: values[i]))
}
let lineChartDataSet = LineChartDataSet(entries: dataEntries, label: "Units Consumed")
lineChartDataSet.axisDependency = .left
lineChartDataSet.setColor(UIColor.black)
lineChartDataSet.setCircleColor(UIColor.black) // our circle will be dark red
lineChartDataSet.lineWidth = 1.0
lineChartDataSet.circleRadius = 3.0 // the radius of the node circle
lineChartDataSet.fillAlpha = 1
lineChartDataSet.fillColor = UIColor.black
lineChartDataSet.highlightColor = UIColor.white
lineChartDataSet.drawCircleHoleEnabled = true
var dataSets = [LineChartDataSet]()
dataSets.append(lineChartDataSet)
let lineChartData = LineChartData(dataSets: dataSets)
chartViewOutlet.data = lineChartData
chartViewOutlet.rightAxis.enabled = false
chartViewOutlet.xAxis.drawGridLinesEnabled = false
chartViewOutlet.xAxis.labelPosition = .bottom
chartViewOutlet.xAxis.valueFormatter = IndexAxisValueFormatter(values: dataPoints)
chartViewOutlet.legend.enabled = true
}
输出:
这有效100%。试试吧。