数据少的时候怎么让折线图从X轴的最左侧开始显示 #937

Activity

1. AAChartModel commented on Jul 15, 2020

   

   AAChartModel

   on Jul 15, 2020

   Owner

   More actions

   普通配置AAOptions

     AAChartModel *aaChartModel = AAChartModel.new
       .chartTypeSet(AAChartTypeLine)//图表类型
       .titleSet((@"Custom Line Chart Original Point Position"))//图表主标题
       .colorsThemeSet(@[@"#fe117c",@"#ffc069",@"#06caf4",@"#7dffc0"])//设置主题颜色数组
       .tooltipValueSuffixSet(@"℃")//设置浮动提示框单位后缀
       .yAxisTitleSet(@"℃")//设置 Y 轴标题
       .yAxisLineWidthSet(@1)//Y轴轴线线宽为0即是隐藏Y轴轴线
       .yAxisGridLineWidthSet(@0)//y轴横向分割线宽度为0(即是隐藏分割线)
       .markerSymbolStyleSet(AAChartSymbolStyleTypeBorderBlank)
       .categoriesSet(@[
           @"Jan", @"Feb", @"Mar", @"Apr", @"May", @"Jun",
           @"July", @"Aug", @"Spe", @"Oct", @"Nov", @"Dec"
       ])
       .seriesSet(@[
           AASeriesElement.new
           .nameSet(@"2017")
           .dataSet(@[@7.0, @6.9, @9.5, @14.5, @18.2, @21.5,]),
           AASeriesElement.new
           .nameSet(@"2018")
           .dataSet(@[@0.2, @0.8, @5.7, @11.3, @17.0, @22.0, ]),
           AASeriesElement.new
           .nameSet(@"2019")
           .dataSet(@[@0.9, @0.6, @3.5, @8.4, @13.5, @17.0, ]),
           AASeriesElement.new
           .nameSet(@"2020")
           .dataSet(@[@3.9, @4.2, @5.7, @8.5, @11.9, @15.2, ]),
       ]);
       
       AAOptions *aaOptions = [AAOptionsConstructor configureChartOptionsWithAAChartModel:aaChartModel];
       
       return aaOptions;

   图表示例

   

   由图可知, 左右两边间距很大
2. AAChartModel commented on Jul 15, 2020

   

   AAChartModel

   on Jul 15, 2020

   Last edited by AAChartModel

   Owner

   More actions

   通过自定义 X 轴和 tooltip 的 formatter 来配置 AAOptions

   - (AAOptions *)customLineChartOriginalPointPositionByConfiguringXAxisFormatterAndTooltipFormatter {
       AAChartModel *aaChartModel = AAChartModel.new
       .chartTypeSet(AAChartTypeLine)//图表类型
       .titleSet((@"Custom Line Chart Original Point Position"))//图表主标题
       .colorsThemeSet(@[@"#fe117c",@"#ffc069",@"#06caf4",@"#7dffc0"])//设置主题颜色数组
       .tooltipValueSuffixSet(@"℃")//设置浮动提示框单位后缀
       .yAxisTitleSet(@"℃")//设置 Y 轴标题
       .yAxisLineWidthSet(@1)//Y轴轴线线宽为0即是隐藏Y轴轴线
       .yAxisGridLineWidthSet(@0)//y轴横向分割线宽度为0(即是隐藏分割线)
       .markerSymbolStyleSet(AAChartSymbolStyleTypeBorderBlank)
       .seriesSet(@[
           AASeriesElement.new
           .nameSet(@"2017")
           .dataSet(@[@7.0, @6.9, @9.5, @14.5, @18.2, @21.5,]),
           AASeriesElement.new
           .nameSet(@"2018")
           .dataSet(@[@0.2, @0.8, @5.7, @11.3, @17.0, @22.0, ]),
           AASeriesElement.new
           .nameSet(@"2019")
           .dataSet(@[@0.9, @0.6, @3.5, @8.4, @13.5, @17.0, ]),
           AASeriesElement.new
           .nameSet(@"2020")
           .dataSet(@[@3.9, @4.2, @5.7, @8.5, @11.9, @15.2, ]),
       ]);
       
       AAOptions *aaOptions = [AAOptionsConstructor configureChartOptionsWithAAChartModel:aaChartModel];
   
       NSArray *categoryArr = @[
           @"Jan", @"Feb", @"Mar", @"Apr", @"May", @"Jun",
           @"July", @"Aug", @"Spe", @"Oct", @"Nov", @"Dec"
       ];
       
       NSString *categoryJSArrStr = [categoryArr aa_toJSArray];
       
       NSString *tooltipFormatter = [NSString stringWithFormat:(@AAJSFunc(function () {
           return  'The value for <b>' + %@[this.x] +
           '</b> is <b>' + this.y + '</b> ' + "℃";
       })),categoryJSArrStr];
       
       NSString *xAxisLabelsFormatter = [NSString stringWithFormat:(@AAJSFunc(function () {
           return %@[this.value];
       })),categoryJSArrStr];
       
       //tooltip 的共享(.sharedSet(true))与非共享(.sharedSet(false))时,部分值的取值方式不同,
       //参见https://github.com/AAChartModel/AAChartKit/issues/781#issuecomment-555852813
       aaOptions.tooltip
       .useHTMLSet(true)
       .formatterSet(tooltipFormatter);
       
       aaOptions.xAxis.labels
       .formatterSet(xAxisLabelsFormatter);
       
       return aaOptions;
   }

   图表结果

   
3. AAChartModel

   closed this as completedin 7934c21on Jul 15, 2020
4. AAChartModel commented on Jul 15, 2020

   

   AAChartModel

   on Jul 15, 2020

   Owner

   More actions

   参考相似问题 #577
5. AAChartModel

   added

   duplicate

   on Jul 15, 2020
6. BestSun3 commented on Jul 21, 2020

   

   BestSun3

   on Jul 21, 2020

   Author

   More actions

   非常感谢！
7. AAChartModel

   added

   helpful

   on Oct 9, 2020
8. NashAnd commented on Oct 9, 2020

   

   NashAnd

   on Oct 9, 2020

   More actions

   您好，刚用这个方法试了下，发现 -(void)chartViewMoveOverEventWithMessage:(AAMoveOverEventMessageModel *)message 方法里面的 message.category 值 返回了 NSNumber类型回来了，拿不到x轴的值
9. AAChartModel commented on Oct 9, 2020

   

   AAChartModel

   on Oct 9, 2020

   Owner

   More actions

   @NashAnd 你把你获得的 NSNumber 类型值当做 index, 从

    NSArray *categoryArr = @[
           @"Jan", @"Feb", @"Mar", @"Apr", @"May", @"Jun",
           @"July", @"Aug", @"Spe", @"Oct", @"Nov", @"Dec"
       ];

   这个数组里取你想要的文字内容即可.

   就像这样

   NSInteger index = [message.category interValue];
   NSString *categoryStr = categoryArr[index];

   👍React with 👍1Reacted by NashAnd
10. xiaoyao20084321 commented on Jul 7, 2022

    

    xiaoyao20084321

    on Jul 7, 2022

    More actions

    感觉设置了后，还是没顶到头，还是有一点间隙
11. jiangyanshuang commented on Aug 31, 2022

    

    jiangyanshuang

    on Aug 31, 2022

    More actions

    还是有点间隙
12. xiaodsss

    added a commit that references this issue on Aug 30, 2024

    Fix AAChartModel#937 => Optimize customLineChartOriginalPointPosition…

    ...

    This issue will close once commit 7934c21 is merged into the 'master' branch.

    7934c21
13. q858333 commented on Dec 11, 2024

    

    q858333

    on Dec 11, 2024

    Last edited by q858333

    More actions

    加上aaOptions.xAxis.minPaddingSet(@0)后 最后剩的一点间隙也没有了

    ❤️React with ❤️1Reacted by An An
14. ghjjane commented on Oct 10, 2025

    

    ghjjane

    on Oct 10, 2025

    More actions

    在type是柱状图columnrange的时候，上面的方法不生效