AAChartModel / AAChartKit-Swift

📈📊📱💻🖥️An elegant modern declarative data visualization chart framework for iOS, iPadOS and macOS. Extremely powerful, supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types. 极其精美而又强大的现代化声明式数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图等各种类型的多达几十种的信息图图表,完全满足工作所需.

Home Page:https://cocoapods.org/pods/AAInfographics

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

X轴留白问题

btxXiaoXiao opened this issue · comments

   aaOptions.xAxis.labels
    .formatterSet(@AAJSFunc((function () {
        return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][this.value];
    })));

我在项目中用了这个。结果十二个月只显示六个月的 这是为啥
1931690010387_ pic

commented

参考:

这个是因为 Highcharts 为避免 X 轴的文字互相遮盖或拥挤时, 自动设置的效果.

你试试设置 X 轴的 labelsallowOverlap 属性为 true 看看运行效果.

commented

参考相似问题:

- (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;
}

这是我的代码
1941690183802_ pic
。加了那个属性allowOverlap。还是 不行

参考:

这个是因为 Highcharts 为避免 X 轴的文字互相遮盖或拥挤时, 自动设置的效果.

你试试设置 X 轴的 labelsallowOverlap 属性为 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;
}

1941690183802_ pic

commented

你试试设置 X 轴的 labelsallowOverlap 属性为 true 看看运行效果.

📢注意我这里说的是 X 轴 的 labels 属性, 也就是说应该是为 AAXAxis 对象作相关设置.

你这里设置的是 AASeriesElementdataLabels, 你显然设置错了对象.

commented

AALabelsstep 属性说明:

//显示 n 的倍数标签,例如设置为 2 则表示标签间隔一个轴标签显示。
//默认情况下,为了避免轴标签被覆盖,该参数会根据情况自动计算。
//可以通过设置此参数为 1 来阻止自动计算。
AAPropStatementAndPropSetFuncStatement(strong, AALabels, NSNumber *, step)

在线 API 文档: