ios - 如何将 iOS 图表中的突出显示仅剪切到数据点？

Question

如何自定义折线图中的荧光笔？我想将要绘制的高光剪切到数据点。我还想自定义突出显示的 x 轴上的标签。下面是我想要实现的目标的引用图片。

这是我到目前为止所做的。 What I've achieved so far

下面是我的折线图 View 设置的代码

let lineChartView: LineChartView = {
    let chart = LineChartView(frame: .zero)
    chart.chartDescription = nil
    chart.dragEnabled = true
    chart.scaleYEnabled = false
    chart.scaleXEnabled = true
    chart.pinchZoomEnabled = false
    chart.drawGridBackgroundEnabled = true
    chart.gridBackgroundColor = .clear
    chart.legend.enabled = false
    chart.zoom(scaleX: 2, scaleY: 1, x: 0, y: 0)
    chart.setViewPortOffsets(left: 30, top: 30, right: 30, bottom: 30)

    chart.rightAxis.enabled = false

    let yAxis = chart.leftAxis
    yAxis.enabled = true
    yAxis.drawAxisLineEnabled = false
    yAxis.drawLabelsEnabled = false
    yAxis.gridColor = UIColor(rgba: "#414042")
    yAxis.gridLineWidth = 1
    yAxis.axisMaximum = 6000

    chart.xAxis.enabled = true
    chart.xAxis.drawGridLinesEnabled = false
    chart.xAxis.drawLabelsEnabled = true
    chart.xAxis.drawAxisLineEnabled = true
    chart.xAxis.axisLineColor = .darkGray
    chart.xAxis.axisLineWidth = 1
    chart.xAxis.valueFormatter = IndexAxisValueFormatter(values: ["Jan", "Feb", "Mar", "April", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"])
    chart.xAxis.labelPosition = .bottom
    chart.xAxis.labelTextColor = .darkGray
    chart.xAxis.labelFont = UIFont.sourceSansProLight(withSize: 15.5)
    chart.xAxis.granularityEnabled = true
    chart.xAxis.granularity = 1

    chart.highlightPerTapEnabled = false

    chart.backgroundColor = .clear

    return chart
}()

这是在图表和突出显示中添加随机数据点的代码。

var values: [ChartDataEntry] = []
var highlight: Highlight? = nil

for index in 0..<12 {
    let randomValue = Double(arc4random_uniform(5000))
    values.append(ChartDataEntry(x: Double(index), y: randomValue))

    if index == 4 {
        highlight = Highlight(x: Double(index), y: randomValue, dataSetIndex: 0)
    }
}

let dataSet = LineChartDataSet(values: values, label: "")
dataSet.highlightEnabled = true
dataSet.drawHorizontalHighlightIndicatorEnabled = false
dataSet.highlightColor = UIColor(rgba: "#1899FF")
dataSet.highlightLineWidth = 1
dataSet.mode = .horizontalBezier
dataSet.circleColors = Array(repeating: UIColor(rgba: "#1899FF"), count: 12)
dataSet.fillColor = UIColor(rgba: "#1899FF")
dataSet.drawCircleHoleEnabled = false
dataSet.drawFilledEnabled = true
dataSet.lineWidth = 0.0
dataSet.drawValuesEnabled = true
dataSet.axisDependency = .left
dataSet.valueFormatter = self

let data = LineChartData(dataSet: dataSet)
data.setDrawValues(true)
data.setValueFont(UIFont.sourceSansProLight(withSize: 15.5))
data.setValueTextColor(UIColor(rgba: "#1899FF"))

lineChartView.data = data
lineChartView.highlightValue(highlight)

Answer 1

对于数据点的突出显示区域，您可以使用以下属性并实现此目的

所有属性都可以通过数据集使用，因此您可以像下面这样创建 LineChartDataSet 并根据您的要求使用不同的属性。

//DataSet
LineChartDataSet *set = [[LineChartDataSet alloc] initWithValues:values label:@"closed"];
set.lineWidth = 2;

使用您的填充颜色设置 ChartFill 属性:

 set.fill = [ChartFill fillWithColor:<Your Legend Color>];
 [set setColor:<Your Legend Color>];
 [set setCircleColor:<Your Legend Color>];
 [set setCircleHoleColor:<Your Legend Color>];

您需要启用 drawfill :

set.drawFilledEnabled = YES;

您可以使用此属性启用圈子:

[set setDrawCirclesEnabled:YES];

您可以启用突出显示指示器，选择的数据点将使用垂直线突出显示:

[set setDrawHighlightIndicators:YES];

您可以根据需要设置圆半径:

[set setCircleRadius:5.0f];
[set setCircleHoleRadius:4.0f];

您还可以指定高亮数据点的线:

[set setHighlightLineWidth:1.0];
[set setHighlightColor:kAppLegend3GraphColorForCAP];

编辑:

要更改字体颜色和类型，您需要如下所述更改 xAxis 颜色和字体

lineChartView.xAxis.labelFont = UIFont.systemFont(ofSize: 20.0, weight: UIFontWeightRegular)
lineChartView.xAxis.labelTextColor = .orange

对于Line limit to data point value我认为我们不能在当前版本中限制它。

希望这能帮助您实现您的要求。