Support double Y axes chart 支持双 Y轴图表📈 #759

AAChartModel · 2019-10-22T08:00:32Z

No description provided.

AAChartModel · 2019-10-22T08:01:27Z

Configure AAOptions instance object

- (AAOptions *)configureDoubleYAxisChartOptions {
    
    AATitle *aaTitle = AATitle.new
    .textSet(@"");
        
    AAXAxis *aaXAxis = AAXAxis.new
    .visibleSet(true)
    .minSet(@0)
    .categoriesSet(@[
    @"Java", @"Swift", @"Python", @"Ruby", @"PHP", @"Go",@"C",
    @"C#", @"C++", @"Perl", @"R", @"MATLAB", @"SQL"]);
    
    AAStyle *aaYAxisTitleStyle = AAStyle.new
      .colorSet(@"#1e90ff")//Title font color
      .fontSizeSet(@"14px")//Title font size
      .fontWeightSet(AAChartFontWeightTypeBold)//Title font weight
      .textOutlineSet(@"0px 0px contrast");
    
    AALabels *aaYAxisLabels = AALabels.new
       .enabledSet(true)//设置 y 轴是否显示数字
       .formatSet(@"{value:.,0f}mm")//让y轴的值完整显示 而不是100000显示为100k,同时单位后缀为°C
       .styleSet(AAStyle.new
                 .colorSet(@"#ff0000")//yAxis Label font color
                 .fontSizeSet(@"15px")//yAxis Label font size
                 .fontWeightSet(AAChartFontWeightTypeBold)//yAxis Label font weight
                 );
    
    AAYAxis *yAxisOne = AAYAxis.new
    .visibleSet(true)
    .labelsSet(aaYAxisLabels)
    .titleSet(AAAxisTitle.new
              .textSet(@"冬季降雨量")
              .styleSet(aaYAxisTitleStyle))
    .oppositeSet(true);
    

    AAYAxis *yAxisTwo = AAYAxis.new
    .visibleSet(true)
    .labelsSet(aaYAxisLabels)
    .titleSet(AAAxisTitle.new
              .textSet(@"夏季降雨量")
              .styleSet(aaYAxisTitleStyle));
    
    AATooltip *aaTooltip = AATooltip.new
    .enabledSet(true)
    .sharedSet(true);
    
    NSDictionary *gradientColorDic1 =
     [AAGradientColor gradientColorWithDirection:AALinearGradientDirectionToTop
                                startColorString:@"#f54ea2"//颜色字符串设置支持十六进制类型和 rgba 类型
                                  endColorString:@"#ff7676"];
    
    NSDictionary *gradientColorDic2 =
     [AAGradientColor gradientColorWithDirection:AALinearGradientDirectionToTop
                                startColorString:@"#17ead9"//颜色字符串设置支持十六进制类型和 rgba 类型
                                  endColorString:@"#6078ea"];
    
    AAMarker *aaMarker = AAMarker.new
    .radiusSet(@7)//曲线连接点半径，默认是4
    .symbolSet(AAChartSymbolTypeCircle)//曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
    .fillColorSet(@"#ffffff")//点的填充色(用来设置折线连接点的填充色)
    .lineWidthSet(@3)//外沿线的宽度(用来设置折线连接点的轮廓描边的宽度)
    .lineColorSet(@"");//外沿线的颜色(用来设置折线连接点的轮廓描边颜色，当值为空字符串时，默认取数据点或数据列的颜色)
    
    NSArray *aaSeries = @[
      AASeriesElement.new
      .nameSet(@"2017")
      .typeSet(AAChartTypeAreaspline)
      .borderRadiusSet(@4)
      .colorSet((id)gradientColorDic1)
      .markerSet(aaMarker)
      .yAxisSet(@1)
      .dataSet(@[@7.0, @6.9, @2.5, @14.5, @18.2, @21.5, @5.2, @26.5, @23.3, @45.3, @13.9, @9.6])
      ,
      AASeriesElement.new
      .nameSet(@"2018")
      .typeSet(AAChartTypeColumn)
      .colorSet((id)gradientColorDic2)
      .yAxisSet(@0)
      .dataSet(@[@7.0, @6.9, @2.5, @14.5, @18.2, @21.5, @5.2, @26.5, @23.3, @45.3, @13.9, @9.6])
      ];
    
    AAOptions *aaOptions = AAOptions.new
    .titleSet(aaTitle)
    .xAxisSet(aaXAxis)
    .yAxisSet((id)@[yAxisOne,yAxisTwo])
    .tooltipSet(aaTooltip)
    .seriesSet(aaSeries)
    ;
    return aaOptions;
}

Landscape

Portrait

AAChartModel · 2019-10-22T08:02:13Z

Configure AAOptions instance object

- (AAOptions *)configureTheMirrorColumnChart {
    NSDictionary *gradientColorDic1 =
    [AAGradientColor gradientColorWithDirection:AALinearGradientDirectionToTop
                               startColorString:@"#7052f4"//颜色字符串设置支持十六进制类型和 rgba 类型
                                 endColorString:@"#00b0ff"];
    
    NSDictionary *gradientColorDic2 =
    [AAGradientColor gradientColorWithDirection:AALinearGradientDirectionToTop
                               startColorString:@"#EF71FF"//颜色字符串设置支持十六进制类型和 rgba 类型
                                 endColorString:@"#4740C8"];
    AAOptions *aaOptions = AAOptions.new
    .chartSet(AAChart.new
              .typeSet(AAChartTypeColumn)
//              .backgroundColorSet(@"#161139")
              )
    .titleSet(AATitle.new.textSet(@""))
    .xAxisSet(AAXAxis.new
              .visibleSet(true)
              .categoriesSet(@[@"一月", @"二月", @"三月", @"四月", @"五月", @"六月", @"七月", @"八月", @"九月", @"十月", @"十一月", @"十二月"]))
    .yAxisSet((id)@[AAYAxis.new
                    .visibleSet(true)
                    .gridLineWidthSet(@0)
                    .titleSet(AAAxisTitle.new.textSet(@"收入")),
                    AAYAxis.new
                    .visibleSet(true)
                    .titleSet(AAAxisTitle.new.textSet(@"支出"))
                    .lineWidthSet(@1)
                    .oppositeSet(true)
                    ])
    .tooltipSet(AATooltip.new
                .enabledSet(true)
                .sharedSet(true))
    .plotOptionsSet(AAPlotOptions.new
                    .seriesSet(AASeries.new
                               .animationSet(AAAnimation.new
                                             .easingSet(AAChartAnimationBounce)
                                             .durationSet(@1000)
                                             )
                               )
                    .columnSet(AAColumn.new
                               .groupingSet(false)
                               .borderWidthSet(@0)
                               .borderRadiusSet(@5)
                               )
                    )
    .seriesSet(@[
                 AASeriesElement.new
                 .nameSet(@"收入")
                 .dataSet(@[@7.0, @6.9, @9.5, @14.5, @18.2, @21.5, @25.2, @26.5, @23.3, @18.3, @13.9,@7.0, @6.9, @9.5, @14.5,])
                 .colorSet((id)gradientColorDic1),
                 AASeriesElement.new
                 .nameSet(@"支出")
                 .dataSet(@[@-20.1, @-14.1, @-8.6, @-2.5, @-0.8, @-5.7, @-11.3, @-17.0, @-22.0, @-24.8, @-24.1, @-20.1, @-14.1, @-8.6, @-2.5])
                 .colorSet((id)gradientColorDic2),
]);
    return aaOptions;
}

Landscape

Protrait

iamlay · 2020-04-17T03:14:19Z

双Y轴的时候，Y轴的文字可以自定义吗

YQcharlse · 2022-12-10T06:58:07Z

大佬！
1.Landscapeg和Protrait @有一个Y轴数据过大，导致0不在中间了怎么处理呢？
2.两边数据不一样 AATooltip 怎么判断显示的是那一边的数据呢？有劳大哥看看 @AAChartModel

AAChartModel · 2022-12-10T12:26:25Z

1.Landscapeg和Protrait @有一个Y轴数据过大，导致0不在中间了怎么处理呢？

将两个 Y轴的最大值设置为同样的试试.

AAChartModel · 2022-12-10T12:28:41Z

2.两边数据不一样 AATooltip 怎么判断显示的是那一边的数据呢？有劳大哥看看

如果你是想要通过 formatter 来自定义 tooltip 内容, 参考:

https://api.highcharts.com.cn/legacy#tooltip.formatter

YQcharlse · 2022-12-12T00:59:48Z

2.两边数据不一样 AATooltip 怎么判断显示的是那一边的数据呢？有劳大哥看看

如果你是想要通过 formatter 来自定义 tooltip 内容, 参考:

https://api.highcharts.com.cn/legacy#tooltip.formatter

大佬，这个网页 500 Internal Server Error 大不开了

YQcharlse · 2022-12-12T01:12:25Z

1.Landscapeg和Protrait @有一个Y轴数据过大，导致0不在中间了怎么处理呢？

将两个 Y轴的最大值设置为同样的试试.

大佬，设置同样的最大值也不行呢

AAChartModel · 2022-12-12T01:38:10Z

2.两边数据不一样 AATooltip 怎么判断显示的是那一边的数据呢？有劳大哥看看

如果你是想要通过 formatter 来自定义 tooltip 内容, 参考:

https://api.highcharts.com.cn/legacy#tooltip.formatter

大佬，这个网页 500 Internal Server Error 大不开了

这个链接怎么刚好今天抽风了, 我刚复制粘贴的时候还是好的, 以下是 Highcharts 官网的英文原链接:

https://api.highcharts.com/highcharts/tooltip.formatter

AAChartModel · 2022-12-12T01:48:27Z

1.Landscapeg和Protrait @有一个Y轴数据过大，导致0不在中间了怎么处理呢？

你是双 X轴还是双 Y轴, 双 Y轴的话怎么会有 0 在中间的情况?

YQcharlse · 2022-12-12T01:53:09Z

1.Landscapeg和Protrait @有一个Y轴数据过大，导致0不在中间了怎么处理呢？

你是双 X轴还是双 Y轴, 双 Y轴的话怎么会有 0 在中间的情况?

Protrait Landscapeg 就类似这俩个的双Y轴正负数据

AAChartModel · 2022-12-12T02:03:20Z

如下所示:

    AAYAxis *yAxisOne = AAYAxis.new
    .visibleSet(true)
    .maxSet(@1200.0) //最大值为 1200.0
    .minSet(@-1200.0)//最小值为 -1200.0
    .labelsSet(aaYAxisLabels)
    .titleSet(AAAxisTitle.new
              .textSet(@"冬季降雨量")
              .styleSet(aaYAxisTitleStyle))
    .oppositeSet(true);
    
    
    AAYAxis *yAxisTwo = AAYAxis.new
    .visibleSet(true)
    .maxSet(@1200.0) //最大值为 1200.0
    .minSet(@-1200.0)//最小值为 -1200.0
    .labelsSet(aaYAxisLabels)
    .titleSet(AAAxisTitle.new
              .textSet(@"夏季降雨量")
              .styleSet(aaYAxisTitleStyle));

你试试将两个 AAYAxis 的最大值和最小值的绝对值设置成一样的, 再看看效果.

YQcharlse · 2022-12-12T02:13:38Z

如下所示:

    AAYAxis *yAxisOne = AAYAxis.new
    .visibleSet(true)
    .maxSet(@1200.0) //最大值为 1200.0
    .minSet(@-1200.0)//最小值为 -1200.0
    .labelsSet(aaYAxisLabels)
    .titleSet(AAAxisTitle.new
              .textSet(@"冬季降雨量")
              .styleSet(aaYAxisTitleStyle))
    .oppositeSet(true);
    
    
    AAYAxis *yAxisTwo = AAYAxis.new
    .visibleSet(true)
    .maxSet(@1200.0) //最大值为 1200.0
    .minSet(@-1200.0)//最小值为 -1200.0
    .labelsSet(aaYAxisLabels)
    .titleSet(AAAxisTitle.new
              .textSet(@"夏季降雨量")
              .styleSet(aaYAxisTitleStyle));

你试试将两个 AAYAxis 的最大值和最小值的绝对值设置成一样的, 再看看效果.

可以了大佬，刚没有设置最小值！

mladjan · 2024-02-02T13:53:47Z

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

_aaChartView.isClearBackgroundColor = YES;

Is there any other way to make it other color then white?

AAChartModel changed the title ~~Support double Y axes chart~~ Support double Y axes chart 支持双 Y轴图表📈 Oct 22, 2019

AAChartModel added the helpful label Oct 22, 2019

AAChartModel closed this as completed Oct 22, 2019

This was referenced Oct 24, 2019

Support triple Y axes chart (支持三重 Y 轴图表📈📊) #763

Closed

一个柱子以某个值为界限，分为两种不同颜色 #395

Closed

AAChartModel mentioned this issue Dec 20, 2019

能不能完善一下双Y轴的呢？ #381

Closed

AAChartModel mentioned this issue Jun 9, 2020

两个y轴一正一副，可以共用一个0点么 #899

Closed

AAChartModel mentioned this issue Aug 26, 2020

双Y轴两边单位不一致怎么设置 #497

Closed

AAChartModel mentioned this issue Jan 15, 2021

折线图是否能增加多一个Y轴？ #1122

Closed

AAChartModel mentioned this issue Jan 25, 2021

Whether to support dual Y axis AAChartModel/AAChartCore-Kotlin#51

Closed

AAChartModel mentioned this issue Feb 18, 2021

一个x轴可以对应两个y轴吗，像下面的图片那样，就一根折线，有两个Y轴 #1134

Closed

AAChartModel mentioned this issue Mar 4, 2021

怎么实现双Y轴？X轴数据如何加后缀？有劳大佬！ AAChartModel/AAChartCore#84

Closed

AAChartModel added a commit that referenced this issue Dec 30, 2022

Fix #759 => 0 value labels always centered for Double Y-axis chart

764e741

AAChartModel mentioned this issue Jan 30, 2024

How to change range on Y axis #1533

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support double Y axes chart 支持双 Y轴图表📈 #759

Support double Y axes chart 支持双 Y轴图表📈 #759

AAChartModel commented Oct 22, 2019

AAChartModel commented Oct 22, 2019

AAChartModel commented Oct 22, 2019

iamlay commented Apr 17, 2020

YQcharlse commented Dec 10, 2022

AAChartModel commented Dec 10, 2022 •

edited

Loading

AAChartModel commented Dec 10, 2022

YQcharlse commented Dec 12, 2022

YQcharlse commented Dec 12, 2022

AAChartModel commented Dec 12, 2022 •

edited

Loading

AAChartModel commented Dec 12, 2022

YQcharlse commented Dec 12, 2022

AAChartModel commented Dec 12, 2022

YQcharlse commented Dec 12, 2022

mladjan commented Feb 2, 2024

Support double Y axes chart 支持双 Y轴图表📈 #759

Support double Y axes chart 支持双 Y轴图表📈 #759

Comments

AAChartModel commented Oct 22, 2019

AAChartModel commented Oct 22, 2019

Configure AAOptions instance object

Landscape

Portrait

AAChartModel commented Oct 22, 2019

Configure AAOptions instance object

Landscape

Protrait

iamlay commented Apr 17, 2020

YQcharlse commented Dec 10, 2022

AAChartModel commented Dec 10, 2022 • edited Loading

AAChartModel commented Dec 10, 2022

YQcharlse commented Dec 12, 2022

YQcharlse commented Dec 12, 2022

AAChartModel commented Dec 12, 2022 • edited Loading

AAChartModel commented Dec 12, 2022

YQcharlse commented Dec 12, 2022

AAChartModel commented Dec 12, 2022

YQcharlse commented Dec 12, 2022

mladjan commented Feb 2, 2024

AAChartModel commented Dec 10, 2022 •

edited

Loading

AAChartModel commented Dec 12, 2022 •

edited

Loading