AAChartKit 饼图带指引线的标签显示不全(设置不同的数据源会有这个问题)

设置代码如下：

- (AAChartModel *)configurePieChart {
    AAChartModel *aaChartModel = AAChartModel.new
//        .marginSet(@[@5,@150,@5,@150])
        .chartTypeSet(AAChartTypePie)
        .tooltipEnabledSet(false)
        .colorsThemeSet(@[@"#0c9674",@"#7dffc0",@"#ff3333",@"#facd32",@"#0c9674",@"#EA007B",@"#EA007B",@"#EA007B"])
        .dataLabelsEnabledSet(true)//是否直接显示扇形图数据
        .legendEnabledSet(false)
        .seriesSet(@[
            AASeriesElement.new
            .enableMouseTrackingSet(@true)
            .sizeSet(@140)//尺寸大小
            .innerSizeSet(@"70%")
            .showInLegendSet(false)
            .allowPointSelectSet(false)//是否允许在点击数据点标记(扇形图点击选中的块发生位移)

            .statesSet(AAStates.new
                        .hoverSet(AAHover.new.brightnessSet(@0).haloSet(AAHalo.new.opacitySet(@1)))
                         .inactiveSet(AAInactive.new.opacitySet(@100))   )

            .dataSet(@[
                @[@"支付宝"  ,@67],
                    @[@"微信",@10],
                    @[@"银联",@999],
                    @[@"现金余额"    ,@10],
                    @[@"承兑余额"    ,@83],
                    @[@"壹钱包"    ,@5],
                    @[@"易付通"    ,@10],
                    @[@"积分抵用"    ,@30],
                ])]);


    return aaChartModel;
}

Jul 18 '23 02:07 homeYsy

9A031711AF80BD030F7C5016577ED95F

Jul 18 '23 02:07 homeYsy

怎么设置才能全部显示？

Jul 18 '23 02:07 homeYsy

参考相似问题:

https://github.com/AAChartModel/AAChartKit/issues/1446

Jul 18 '23 03:07 AAChartModel

参考相似问题：

饼图类型，当其数据源中的数据值大部分都为 0 悂时， dataLabels 显示不全 #1446

看了这个参考，调整了size，是可以显示全了，目前sizeSet设置了180，但是这样标签都超出屏幕之外了，这样怎么设置，是设置margin吗？设置了也没有用，我是在demo上修改的。 7BAD8F4D-996C-47A2-BC83-B0CBC2EE20FF

Jul 18 '23 05:07 homeYsy

目前sizeSet设置了180，但是这样标签都超出屏幕之外了，这样怎么设置，是设置margin吗？设置了也没有用，

估计是设置了 size 后, 设置 margin 无效(size 的优先级应该比 margin 高), 你可以不设置 size 只设置 margin 试试, 这样 Highcharts 应该会自动调整饼图的 size 以适应屏幕大小.

Jul 18 '23 06:07 AAChartModel

目前sizeSet设置了180，但是这样标签都超出屏幕之外了，这样怎么设置，是设置margin吗？设置了也没有用，

估计是设置了 size 后, 设置 margin 无效(size 的优先级应该比 margin 高), 你可以不设置 size 只设置 margin 试试, 这样 Highcharts 应该会自动调整饼图的 size 以适应屏幕大小.

我设置了margin，margin设置不同的值和上面我发的效果是一样的，不知道Highcharts官方上有没有这个问题，因为这个我的需求是这个饼图放到 cell上展示，margin里面的值设置有标准么？是否和Highcharts版本有关系？

还有作者有Q群之类的么？我看了之前提交的issu和已关闭里面的，发现没有很好的解决方案，想问下别人是怎么解决的。

Jul 18 '23 06:07 homeYsy

我设置了margin，margin设置不同的值和上面我发的效果是一样的，

所以我这里说的是不设置 size 只设置 margin 试试(将设置 size 的那部分代码去掉).

Jul 18 '23 06:07 AAChartModel

还有作者有Q群之类的么？我看了之前提交的issu和已关闭里面的，发现没有很好的解决方案，想问下别人是怎么解决的。

参考:

https://github.com/AAChartModel/AAChartCore-Kotlin/issues/120

Jul 18 '23 06:07 AAChartModel

我设置了margin，margin设置不同的值和上面我发的效果是一样的，

所以我这里说的是不设置 size 只设置 margin 试试(将设置 size 的那部分代码去掉).

设置 margin，删除了 size

代码如下:

- (AAChartModel *)configurePieChart {
    AAChartModel *aaChartModel = AAChartModel.new
        .marginSet(@[@0,@120,@0,@120])
        .chartTypeSet(AAChartTypePie)
        .tooltipEnabledSet(false)        .colorsThemeSet(@[@"#0c9674",@"#7dffc0",@"#ff3333",@"#facd32",@"#0c9674",@"#EA007B",@"#EA007B",@"#EA007B"])
        .dataLabelsEnabledSet(true)//是否直接显示扇形图数据
        .legendEnabledSet(false)
        .seriesSet(@[
            AASeriesElement.new
            .enableMouseTrackingSet(@true)
            .innerSizeSet(@"70%")
            .dataLabelsSet(AADataLabels.new.overflowSet(@"justify"))
            .showInLegendSet(false)
            .allowPointSelectSet(false)//是否允许在点击数据点标记(扇形图点击选中的块发生位移)
            .statesSet(AAStates.new
                        .hoverSet(AAHover.new.brightnessSet(@0).haloSet(AAHalo.new.opacitySet(@1)))
                         .inactiveSet(AAInactive.new.opacitySet(@100))   )
            .dataSet(@[
                @[@"支付宝"  ,@67],
                    @[@"微信",@10],
                    @[@"银联",@999],
                    @[@"现金余额"    ,@10],
                    @[@"承兑余额"    ,@83],
                    @[@"壹钱包"    ,@5],
                    @[@"易付通"    ,@10],
                    @[@"积分抵用"    ,@30],
                ])]);
    return aaChartModel;
}

效果图如下(显示还是缺失)： CDD08D9A-4D6C-4812-B82C-4BFBD92157B8

Jul 18 '23 06:07 homeYsy

不知道你是怎么设置的, 我如下设置 margin, 是能够起到调整左边距的作用的

    AAChartModel *aaChartModel = AAChartModel.new
        .marginSet(@[@5,@5,@5,@150])
        .chartTypeSet(AAChartTypePie)
        .tooltipEnabledSet(false)
        .colorsThemeSet(@[@"#0c9674",@"#7dffc0",@"#ff3333",@"#facd32",@"#0c9674",@"#EA007B",@"#EA007B",@"#EA007B"])
        .dataLabelsEnabledSet(true)//是否直接显示扇形图数据
        .legendEnabledSet(false)
        .seriesSet(@[
            AASeriesElement.new
            .enableMouseTrackingSet(@true)
            .sizeSet(@180)//尺寸大小
            .innerSizeSet(@"70%")
            .showInLegendSet(false)
            .allowPointSelectSet(false)//是否允许在点击数据点标记(扇形图点击选中的块发生位移)
            .statesSet(AAStates.new
                .hoverSet(AAHover.new
                          .brightnessSet(@0)
                          .haloSet(AAHalo.new
                                   .opacitySet(@1)))
                .inactiveSet(AAInactive
                             .new.opacitySet(@100)))

            .dataSet(@[
                @[@"支付宝"  ,@67],
                    @[@"微信",@10],
                    @[@"银联",@999],
                    @[@"现金余额"    ,@10],
                    @[@"承兑余额"    ,@83],
                    @[@"壹钱包"    ,@5],
                    @[@"易付通"    ,@10],
                    @[@"积分抵用"    ,@30],
                ])]);

IMG_E7AEADB368C7-1

如图, 可以看到我的饼图已经明显偏向右边了(调整了左边距为 150)

Jul 18 '23 08:07 AAChartModel

注意 margin 数组属性的含义:

//图表外边缘和绘图区域之间的边距。 
//数组中的数字分别表示顶部，右侧，底部和左侧 ([👆,👉,👇,👈])。 
//也可以使用 AAChart 对象的 marginTop，marginRight，marginBottom 和 marginLeft 来设置某一个方向的边距。
//默认值为[null]
AAPropSetFuncImplementation(AAChartModel, NSArray  *, margin)

Jul 18 '23 08:07 AAChartModel

所以, 如注释中所说, 像这样配置图表的上下左右边距也是一样的:

- (AAOptions *)configurePieChart {
    AAChartModel *aaChartModel = AAChartModel.new
//        .marginSet(@[@5,@5,@5,@150])
        .chartTypeSet(AAChartTypePie)
        .tooltipEnabledSet(false)
        .colorsThemeSet(@[@"#0c9674",@"#7dffc0",@"#ff3333",@"#facd32",@"#0c9674",@"#EA007B",@"#EA007B",@"#EA007B"])
        .dataLabelsEnabledSet(true)//是否直接显示扇形图数据
        .legendEnabledSet(false)
        .seriesSet(@[
            AASeriesElement.new
            .enableMouseTrackingSet(@true)
            .sizeSet(@180)//尺寸大小
            .innerSizeSet(@"70%")
            .showInLegendSet(false)
            .allowPointSelectSet(false)//是否允许在点击数据点标记(扇形图点击选中的块发生位移)
            .statesSet(AAStates.new
                .hoverSet(AAHover.new
                          .brightnessSet(@0)
                          .haloSet(AAHalo.new
                                   .opacitySet(@1)))
                .inactiveSet(AAInactive
                             .new.opacitySet(@100)))

            .dataSet(@[
                @[@"支付宝"  ,@67],
                    @[@"微信",@10],
                    @[@"银联",@999],
                    @[@"现金余额"    ,@10],
                    @[@"承兑余额"    ,@83],
                    @[@"壹钱包"    ,@5],
                    @[@"易付通"    ,@10],
                    @[@"积分抵用"    ,@30],
                ])]);
    
    AAOptions *aaOptions = aaChartModel.aa_toAAOptions;

   aaOptions.chart
        .marginLeftSet(@180)//图表左边距👈🏻
        .marginRightSet(@5)//图表右边距👉🏻
        .marginTopSet(@5)//图表上边距👆🏻
        .marginBottomSet(@5)//图表下边距👇🏻
    ;

    return aaOptions;
}

Jul 18 '23 08:07 AAChartModel

不知道你是怎么设置的, 我如下设置 margin, 是能够起到调整左边距的作用的

    AAChartModel *aaChartModel = AAChartModel.new
        .marginSet(@[@5,@5,@5,@150])
        .chartTypeSet(AAChartTypePie)
        .tooltipEnabledSet(false)
        .colorsThemeSet(@[@"#0c9674",@"#7dffc0",@"#ff3333",@"#facd32",@"#0c9674",@"#EA007B",@"#EA007B",@"#EA007B"])
        .dataLabelsEnabledSet(true)//是否直接显示扇形图数据
        .legendEnabledSet(false)
        .seriesSet(@[
            AASeriesElement.new
            .enableMouseTrackingSet(@true)
            .sizeSet(@180)//尺寸大小
            .innerSizeSet(@"70%")
            .showInLegendSet(false)
            .allowPointSelectSet(false)//是否允许在点击数据点标记(扇形图点击选中的块发生位移)
            .statesSet(AAStates.new
                .hoverSet(AAHover.new
                          .brightnessSet(@0)
                          .haloSet(AAHalo.new
                                   .opacitySet(@1)))
                .inactiveSet(AAInactive
                             .new.opacitySet(@100)))

            .dataSet(@[
                @[@"支付宝"  ,@67],
                    @[@"微信",@10],
                    @[@"银联",@999],
                    @[@"现金余额"    ,@10],
                    @[@"承兑余额"    ,@83],
                    @[@"壹钱包"    ,@5],
                    @[@"易付通"    ,@10],
                    @[@"积分抵用"    ,@30],
                ])]);

IMG_E7AEADB368C7-1

如图, 可以看到我的饼图已经明显偏向右边了(调整了左边距为 150)

我这边按照你的代码，直接复制到SpecialChartVC的configurePieChart方法里，一模一样的代码，我用模拟器运行出来的效果怎么和你的不一样呢？哎，难受。

118E7558-5C6A-449E-ACF4-079AA8613D55

Jul 18 '23 09:07 homeYsy

我是真机 14 pro max, 所以可能又会有点差别. 但是你这个再调整一下左右边距的值, 应该就差不多了吧

Jul 18 '23 09:07 AAChartModel

不过我觉得 Highcharts 的饼图的 labels 布局算法还是有点玄学, 图表的 data 数组的值变了的话, 不知道又会不会有什么问题出现.

Jul 18 '23 09:07 AAChartModel

我是真机 14 pro max, 所以可能又会有点差别. 但是你这个再调整一下左右边距的值, 应该就差不多了吧

现在我是只能一点一点调整，尽量满足我们的UI显示。后面如果解决此问题的，我后面会关注下。

Jul 20 '23 03:07 homeYsy

AAChartKit AAChartKit copied to clipboard

饼图带指引线的标签显示不全(设置不同的数据源会有这个问题)

AAChartKit
AAChartKit copied to clipboard