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. 极其精美而又强大的现代化声明式数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图等各种类型的多达几十种的信息图图表,完全满足工作所需.
https://cocoapods.org/pods/AAChartKit
MIT License
4.72k stars 751 forks source link

How to change range on Y axis #1533

Open mladjan opened 8 months ago

mladjan commented 8 months ago

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];
AAChartModel commented 8 months ago

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

mladjan commented 8 months ago

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

AAChartModel commented 8 months ago
mladjan commented 8 months ago

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?

AAChartModel commented 8 months ago

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

mladjan commented 8 months ago

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

AAChartModel commented 8 months ago

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;
mladjan commented 8 months ago

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

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

But it's still white

AAChartModel commented 8 months ago

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");
mladjan commented 8 months ago

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];
mladjan commented 6 months ago

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.