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

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.71k stars 751 forks source link

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

Closed homeYsy closed 1 month ago

homeYsy commented 1 year ago

设置代码如下：

- (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;
}

homeYsy commented 1 year ago

9A031711AF80BD030F7C5016577ED95F

homeYsy commented 1 year ago

怎么设置才能全部显示？

AAChartModel commented 1 year ago

参考相似问题:

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

homeYsy commented 1 year ago

参考相似问题：

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

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

AAChartModel commented 1 year ago

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

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

homeYsy commented 1 year ago

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

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

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

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

AAChartModel commented 1 year ago

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

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

AAChartModel commented 1 year ago

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

参考:

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

homeYsy commented 1 year ago

我设置了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

AAChartModel commented 1 year ago

不知道你是怎么设置的, 我如下设置 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)

AAChartModel commented 1 year ago

注意 margin 数组属性的含义:

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

AAChartModel commented 1 year ago

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

- (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;
}

homeYsy commented 1 year ago

不知道你是怎么设置的, 我如下设置 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

AAChartModel commented 1 year ago

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

AAChartModel commented 1 year ago

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

homeYsy commented 1 year ago

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

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