X轴留白问题
btxXiaoXiao opened this issue · comments
参考:
这个是因为 Highcharts 为避免 X
轴的文字互相遮盖或拥挤时, 自动设置的效果.
你试试设置 X
轴的 labels
的 allowOverlap
属性为 true
看看运行效果.
参考相似问题:
- (AAOptions *)configureComplicatedCustomAreasplineChart {
AAChart *aaChart = AAChart.new
.typeSet(AAChartTypeAreaspline)
.backgroundColorSet(AAColor.whiteColor);
AATitle *aaTitle = AATitle.new
.textSet((id)NSNull.null);
AAXAxis *aaXAxis = AAXAxis.new
.tickWidthSet(@0)//X轴刻度线宽度
.lineWidthSet(@1)//X轴轴线宽度
.lineColorSet([AAColor colorWithRed:203 green:203 blue:203 alpha:1])//X轴轴线颜色
.gridLineColorSet(AAColor.whiteColor)
.gridLineWidthSet(@0)//X轴网格线宽度
.gridLineDashStyleSet(AAChartLineDashStyleTypeDash)
.labelsSet(AALabels.new
.styleSet(AAStyle.new
.colorSet([AAColor colorWithRed:203 green:203 blue:203 alpha:1]))//X轴文字颜色
);
AAYAxis *aaYAXis = AAYAxis.new
.titleSet(AAAxisTitle.new
.textSet((id)NSNull.null))
.tickPositionsSet(@[@0, @20, @40, @60, @80, @100])
.lineWidthSet(@1)//Y轴轴线颜色
.lineColorSet([AAColor colorWithRed:203 green:203 blue:203 alpha:1])//Y轴轴线颜色
.gridLineWidthSet(@1)//Y轴网格线宽度
.gridLineDashStyleSet(AAChartLineDashStyleTypeSolid)
.labelsSet(AALabels.new
.formatSet(@"{value}")//给y轴添加单位
.styleSet(AAStyle.new
.colorSet([AAColor colorWithRed:203 green:203 blue:203 alpha:1]))//Y轴文字颜色
);
AALegend *aaLegend = AALegend.new
.enabledSet(true)
.itemStyleSet(AAItemStyle.new
.colorSet(AAColor.whiteColor))
.alignSet(AAChartAlignTypeLeft)//设置图例位于水平方向上的右侧
.layoutSet(AAChartLayoutTypeHorizontal)//设置图例排列方式为垂直排布
.verticalAlignSet(AAChartVerticalAlignTypeTop)//设置图例位于竖直方向上的顶部
;
NSArray *blueStopsArr = @[
@[@0.0, AARgbaColor(253, 182, 33, 1.0)],//颜色字符串设置支持十六进制类型和 rgba 类型
@[@0.6, AARgbaColor(253, 182, 33, 0.2)],
@[@1.0, AARgbaColor(253, 182, 33, 0.0)]
];
NSDictionary *gradientBlueColorDic =
[AAGradientColor gradientColorWithDirection:AALinearGradientDirectionToBottom
stopsArray:blueStopsArr];
NSArray *redStopsArr = @[
@[@0.0, AARgbaColor(204, 216, 170, 1.0)],//颜色字符串设置支持十六进制类型和 rgba 类型
@[@0.6, AARgbaColor(204, 216, 170, 0.2)],
@[@1.0, AARgbaColor(204, 216, 170, 0.0)]
];
NSDictionary *gradientRedColorDic =
[AAGradientColor gradientColorWithDirection:AALinearGradientDirectionToBottom
stopsArray:redStopsArr];
AADataElement *singleSpecialData1 = AADataElement.new
.markerSet(AAMarker.new
.radiusSet(@0)//曲线连接点半径
.symbolSet(AAChartSymbolTypeCircle)//曲线点类型:"circle", "square", "diamond", "triangle","triangle-down",默认是"circle"
.fillColorSet(AAColor.whiteColor)//点的填充色(用来设置折线连接点的填充色)
.lineWidthSet(@0)//外沿线的宽度(用来设置折线连接点的轮廓描边的宽度)
//外沿线的颜色(用来设置折线连接点的轮廓描边颜色,当值为空字符串时,默认取数据点或数据列的颜色)
.lineColorSet(@"#FDB621")
)
.ySet(@51.5);
AADataElement *singleSpecialData2 = AADataElement.new
.markerSet(AAMarker.new
.radiusSet(@0)//曲线连接点半径
.symbolSet(AAChartSymbolTypeCircle)//曲线点类型:"circle", "square", "diamond", "triangle","triangle-down",默认是"circle"
.fillColorSet(AAColor.whiteColor)//点的填充色(用来设置折线连接点的填充色)
.lineWidthSet(@0)//外沿线的宽度(用来设置折线连接点的轮廓描边的宽度)
//外沿线的颜色(用来设置折线连接点的轮廓描边颜色,当值为空字符串时,默认取数据点或数据列的颜色)
.lineColorSet(@"#68D8AA")
)
.ySet(@26.5);
NSArray *aaSeriesArr = @[
AASeriesElement.new
.nameSet(@"总费用(元)")
.dataLabelsSet(AADataLabels.new
.allowOverlapSet(YES))
.showInLegendSet(NO)
.fillColorSet((id)gradientBlueColorDic)
.lineWidthSet(@2)
.dataSet(@[@17.0, @16.9, @8.5, @34.5, @28.2, singleSpecialData1, @15.2, @56.5, @15.2, @56.5, @15.2, @56.5]),
AASeriesElement.new
.nameSet(@"总电量(kWh)")
.dataLabelsSet(AADataLabels.new
.allowOverlapSet(YES))
.fillColorSet((id)gradientRedColorDic)
.lineWidthSet(@2)
.showInLegendSet(NO)
.dataSet(@[@7.0, @6.9, @2.5, @14.5, @18.2, singleSpecialData2, @5.2, @100, @5.2, @100, @5.2, @100]),
];
AAPlotOptions *aaPlotOptions = AAPlotOptions.new
.seriesSet(AASeries.new
.markerSet(AAMarker.new
.symbolSet(AAChartSymbolTypeCircle)
.radiusSet(@0)));
AAOptions *aaOptions = AAOptions.new
.chartSet(aaChart)
.titleSet(aaTitle)
.colorsSet(@[@"#FDB621",@"#68D8AA",])
.xAxisSet(aaXAxis)
.yAxisSet(aaYAXis)
.plotOptionsSet(aaPlotOptions)
.legendSet(aaLegend)
.seriesSet(aaSeriesArr)
;
aaOptions.xAxis.labels
.formatterSet(@AAJSFunc((function () {
return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][this.value];
})));
return aaOptions;
}
参考:
这个是因为 Highcharts 为避免
X
轴的文字互相遮盖或拥挤时, 自动设置的效果.你试试设置
X
轴的labels
的allowOverlap
属性为true
看看运行效果.
您看一下 这是我的代码 加了这个属性还是不行
- (AAOptions *)configureComplicatedCustomAreasplineChart {
AAChart *aaChart = AAChart.new
.typeSet(AAChartTypeAreaspline)
.backgroundColorSet(AAColor.whiteColor);
AATitle *aaTitle = AATitle.new
.textSet((id)NSNull.null);
AAXAxis *aaXAxis = AAXAxis.new
.tickWidthSet(@0)//X轴刻度线宽度
.lineWidthSet(@1)//X轴轴线宽度
.lineColorSet([AAColor colorWithRed:203 green:203 blue:203 alpha:1])//X轴轴线颜色
.gridLineColorSet(AAColor.whiteColor)
.gridLineWidthSet(@0)//X轴网格线宽度
.gridLineDashStyleSet(AAChartLineDashStyleTypeDash)
.labelsSet(AALabels.new
.styleSet(AAStyle.new
.colorSet([AAColor colorWithRed:203 green:203 blue:203 alpha:1]))//X轴文字颜色
);
AAYAxis *aaYAXis = AAYAxis.new
.titleSet(AAAxisTitle.new
.textSet((id)NSNull.null))
.tickPositionsSet(@[@0, @20, @40, @60, @80, @100])
.lineWidthSet(@1)//Y轴轴线颜色
.lineColorSet([AAColor colorWithRed:203 green:203 blue:203 alpha:1])//Y轴轴线颜色
.gridLineWidthSet(@1)//Y轴网格线宽度
.gridLineDashStyleSet(AAChartLineDashStyleTypeSolid)
.labelsSet(AALabels.new
.formatSet(@"{value}")//给y轴添加单位
.styleSet(AAStyle.new
.colorSet([AAColor colorWithRed:203 green:203 blue:203 alpha:1]))//Y轴文字颜色
);
AALegend *aaLegend = AALegend.new
.enabledSet(true)
.itemStyleSet(AAItemStyle.new
.colorSet(AAColor.whiteColor))
.alignSet(AAChartAlignTypeLeft)//设置图例位于水平方向上的右侧
.layoutSet(AAChartLayoutTypeHorizontal)//设置图例排列方式为垂直排布
.verticalAlignSet(AAChartVerticalAlignTypeTop)//设置图例位于竖直方向上的顶部
;
NSArray *blueStopsArr = @[
@[@0.0, AARgbaColor(253, 182, 33, 1.0)],//颜色字符串设置支持十六进制类型和 rgba 类型
@[@0.6, AARgbaColor(253, 182, 33, 0.2)],
@[@1.0, AARgbaColor(253, 182, 33, 0.0)]
];
NSDictionary *gradientBlueColorDic =
[AAGradientColor gradientColorWithDirection:AALinearGradientDirectionToBottom
stopsArray:blueStopsArr];
NSArray *redStopsArr = @[
@[@0.0, AARgbaColor(204, 216, 170, 1.0)],//颜色字符串设置支持十六进制类型和 rgba 类型
@[@0.6, AARgbaColor(204, 216, 170, 0.2)],
@[@1.0, AARgbaColor(204, 216, 170, 0.0)]
];
NSDictionary *gradientRedColorDic =
[AAGradientColor gradientColorWithDirection:AALinearGradientDirectionToBottom
stopsArray:redStopsArr];
AADataElement *singleSpecialData1 = AADataElement.new
.markerSet(AAMarker.new
.radiusSet(@0)//曲线连接点半径
.symbolSet(AAChartSymbolTypeCircle)//曲线点类型:"circle", "square", "diamond", "triangle","triangle-down",默认是"circle"
.fillColorSet(AAColor.whiteColor)//点的填充色(用来设置折线连接点的填充色)
.lineWidthSet(@0)//外沿线的宽度(用来设置折线连接点的轮廓描边的宽度)
//外沿线的颜色(用来设置折线连接点的轮廓描边颜色,当值为空字符串时,默认取数据点或数据列的颜色)
.lineColorSet(@"#FDB621")
)
.ySet(@51.5);
AADataElement *singleSpecialData2 = AADataElement.new
.markerSet(AAMarker.new
.radiusSet(@0)//曲线连接点半径
.symbolSet(AAChartSymbolTypeCircle)//曲线点类型:"circle", "square", "diamond", "triangle","triangle-down",默认是"circle"
.fillColorSet(AAColor.whiteColor)//点的填充色(用来设置折线连接点的填充色)
.lineWidthSet(@0)//外沿线的宽度(用来设置折线连接点的轮廓描边的宽度)
//外沿线的颜色(用来设置折线连接点的轮廓描边颜色,当值为空字符串时,默认取数据点或数据列的颜色)
.lineColorSet(@"#68D8AA")
)
.ySet(@26.5);
NSArray *aaSeriesArr = @[
AASeriesElement.new
.nameSet(@"总费用(元)")
.dataLabelsSet(AADataLabels.new
.allowOverlapSet(YES))
.showInLegendSet(NO)
.fillColorSet((id)gradientBlueColorDic)
.lineWidthSet(@2)
.dataSet(@[@17.0, @16.9, @8.5, @34.5, @28.2, singleSpecialData1, @15.2, @56.5, @15.2, @56.5, @15.2, @56.5]),
AASeriesElement.new
.nameSet(@"总电量(kWh)")
.dataLabelsSet(AADataLabels.new
.allowOverlapSet(YES))
.fillColorSet((id)gradientRedColorDic)
.lineWidthSet(@2)
.showInLegendSet(NO)
.dataSet(@[@7.0, @6.9, @2.5, @14.5, @18.2, singleSpecialData2, @5.2, @100, @5.2, @100, @5.2, @100]),
];
AAPlotOptions *aaPlotOptions = AAPlotOptions.new
.seriesSet(AASeries.new
.markerSet(AAMarker.new
.symbolSet(AAChartSymbolTypeCircle)
.radiusSet(@0)));
AAOptions *aaOptions = AAOptions.new
.chartSet(aaChart)
.titleSet(aaTitle)
.colorsSet(@[@"#FDB621",@"#68D8AA",])
.xAxisSet(aaXAxis)
.yAxisSet(aaYAXis)
.plotOptionsSet(aaPlotOptions)
.legendSet(aaLegend)
.seriesSet(aaSeriesArr)
;
aaOptions.xAxis.labels
.formatterSet(@AAJSFunc((function () {
return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][this.value];
})));
return aaOptions;
}
你试试设置
X
轴的labels
的allowOverlap
属性为true
看看运行效果.
📢注意我这里说的是 X
轴 的 labels
属性, 也就是说应该是为 AAXAxis
对象作相关设置.
你这里设置的是 AASeriesElement
的 dataLabels
, 你显然设置错了对象.
或者再试试设置 X
轴的 labels
的属性 step
为 @1
.
参考:
AALabels
的 step
属性说明:
//显示 n 的倍数标签,例如设置为 2 则表示标签间隔一个轴标签显示。
//默认情况下,为了避免轴标签被覆盖,该参数会根据情况自动计算。
//可以通过设置此参数为 1 来阻止自动计算。
AAPropStatementAndPropSetFuncStatement(strong, AALabels, NSNumber *, step)
在线 API 文档: