AAChartModel / AAChartKit

📈📊🚀🚀🚀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/AAChartKit

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to change range on Y axis

mladjan opened this issue · comments

CleanShot 2024-01-27 at 21 23 19@2x

I have 2 kind of data. Value2 goes from 0 to 220, so range on X axis is fine.
But on Y axis, it's from 107 to 105, so really small changes.

How to make Y axis more detailed, so changes are more visible?

This is the current code:

AAChartModel *aaChartModel= AAObject(AAChartModel)
    .chartTypeSet(AAChartTypeLine)
    .titleSet(@"")
    .categoriesSet(speedIntArray)
    .yAxisTitleSet(@"")
    .colorsThemeSet(@[@"#15A3FE",@"#FE7620"])
    .seriesSet(@[
            AAObject(AASeriesElement)
            .nameSet(@"Value 1")
            .dataSet(heightArray)
            ,
            AAObject(AASeriesElement)
            .nameSet(@"Value 2")
            .dataSet(speedIntArray)])
    .markerRadiusSet(@1);
    AAItemStyle *aaItemStyle = AAObject(AAItemStyle)
    .colorSet(@"#ffffff")
    .cursorSet(@"pointer")
    .fontSizeSet(@"12px")
    .fontWeightSet(AAChartFontWeightTypeThin);
    AAOptions *aaOptions = [AAOptionsConstructor configureChartOptionsWithAAChartModel:aaChartModel];
    aaOptions.legend.itemStyle = aaItemStyle;
    [_aaChartView aa_drawChartWithOptions:aaOptions];

Maybe you need to change the chart to a dual Y-axis chart.

@AAChartModel how? I don't see any AAChartType like this.
Can you help me with some code snippet?

I managed to make double `y axis chart, but there is no way to change the background color from White to something else.

Setting background doesn't work on this type of chart.
I tried with:

_aaChartView.isClearBackgroundColor = YES;

Is there any other way to make it another color than white?

What effect are you looking for? Can you provide a screenshot of the design draft?

CleanShot 2024-02-05 at 09 19 10@2x
This is how it looks now, I just need the background to be another color :)

The code of AAChartView.m file

- (void)configureTheOptionsJsonStringWithAAOptions:(AAOptions *)aaOptions {
    if (_isClearBackgroundColor) {
        aaOptions.chart.backgroundColor = @"rgba(0,0,0,0)";
    }
    
    if (_clickEventEnabled == true) {
        aaOptions.clickEventEnabled = true;
        [self configurePlotOptionsSeriesPointEventsWithAAOptions:aaOptions];
    }
    if (_mouseOverEventEnabled == true) {
        aaOptions.touchEventEnabled = true;
        if (_clickEventEnabled == false) {//避免重复调用配置方法
            [self configurePlotOptionsSeriesPointEventsWithAAOptions:aaOptions];
        }
    }
    
    _optionJson = [AAJsonConverter pureOptionsJsonStringWithOptionsInstance:aaOptions];
}

The key content

   if (_isClearBackgroundColor) {
        aaOptions.chart.backgroundColor = @"rgba(0,0,0,0)"; // set the chart be clear color
    }

So, If you just want to change the chart bacckgroundColor, do not use

_aaChartView.isClearBackgroundColor = YES;

I have removed "isClearBackground" property, and manually set:

aaaOptions.chart.backgroundColor = @"rgba(25,25,35,1)";

But it's still white

You can also see the sample in the demo

In this example, the background color is set to @"#191E40".

    AAChart *aaChart = AAChart.new
    .backgroundColorSet(@"#191E40");

It works with this code sample:

 AAChart *aaChart = AAChart.new
    .backgroundColorSet(@"#191923");

    AAOptions *aaaOptions = AAOptions.new
    .chartSet(aaChart)
    .titleSet(aaTitle)
    .xAxisSet(aaXAxis)
    .yAxisSet((id)@[yAxisOne,yAxisTwo])
    .tooltipSet(aaTooltip)
    .seriesSet(aaSeries)
    ;

    
    [_aaChartView aa_drawChartWithOptions:aaaOptions];

You can also see the sample in the demo

In this example, the background color is set to @"#191E40".

    AAChart *aaChart = AAChart.new
    .backgroundColorSet(@"#191E40");

Is there a possibility to add 3rd Y axis and to set proper scaling on that?
When I added 3rd Y axis parameter, it uses scaling from second Y axis and because of that, resolution is small.