箱式的UI可以修改吗？

[LiSaimen]

箱式布局上下有个横线可以去除吗

[AAChartModel]

你指的是箱线图(盒须图)? 你有设计稿效果图吗?

[AAChartModel]

配置 AAOptions

    private func configureBoxplotChartWithSpecialStyle() -> AAOptions {
        let aaChartModel = AAChartModel()
            .chartType(.boxplot)
            .title("BOXPLOT CHART")
            .subtitle("virtual data")
            .yAxisTitle("℃")
            .yAxisVisible(true)
            .series([
                AASeriesElement()
                    .name("Observed Data")
                    .color("#ef476f")
                    .fillColor("#04d69f")
                    .data([
                        [760, 801, 848, 895, 965],
                        [733, 853, 939, 980, 1080],
                        [714, 762, 817, 870, 918],
                        [724, 802, 806, 871, 950],
                        [834, 836, 864, 882, 910]
                    ])
            ])
        
        let aaOptions = aaChartModel.aa_toAAOptions()
    
        aaOptions.plotOptions?
            .boxplot(AABoxplot()
                .boxDashStyle(.dash)
                .fillColor("#F0F0E0")
                .lineWidth(2)
                .medianColor("#0C5DA5")
                .medianDashStyle(.shortDot)
                .medianWidth(3)
                .stemColor("#A63400")
                .stemDashStyle(.dot)
                .stemWidth(1)
                .whiskerColor("#3D9200")
                .whiskerDashStyle(.longDashDotDot)
                .whiskerLength("30%")
                .whiskerWidth(3)
            )
        
        return aaOptions
    }

最终图表

[AAChartModel]

箱式布局上下有个横线可以去除吗

修改

aaOptions.plotOptions?
            .boxplot(AABoxplot()
                .boxDashStyle(.dash)
                .fillColor("#F0F0E0")
                .lineWidth(2)
                .medianColor("#0C5DA5")
                .medianDashStyle(.shortDot)
                .medianWidth(3)
                .stemColor("#A63400")
                .stemDashStyle(.dot)
                .stemWidth(1)
                .whiskerColor("#3D9200")
                .whiskerDashStyle(.longDashDotDot)
                .whiskerLength("30%")
                .whiskerWidth(3)
            )

为

aaOptions.plotOptions?
            .boxplot(AABoxplot()
                .whiskerWidth(0)
            )

即可隐藏箱线图上下的横线

[AAChartModel]

参考在线文档:

• https://api.highcharts.com/highcharts/series.boxplot.whiskerWidth

[LiSaimen]

大神您好，我看了下，这个类在swift库里面有，OC的里面没有，麻烦再问下，如果用箱线图，横坐标可以用时间轴嘛？

[AAChartModel]

已在此次提交中添加

• 5b1fc2d

更新 AAChartKit 至最新内容即可使用.

[AAChartModel]

Objective-C 版本示例代码:

- (AAOptions *)configureBoxplotChartWithSpecialStyle {
    AAChartModel *aaChartModel = AAChartModel.new
    .chartTypeSet(AAChartTypeBoxplot)//图表类型
    .titleSet(@"BOXPLOT CHART")//图表主标题
    .subtitleSet(@"virtual data")//图表副标题
    .yAxisTitleSet(@"℃")//设置 Y 轴标题
    .yAxisVisibleSet(true)//设置 Y 轴是否可见
    .seriesSet(@[
        AASeriesElement.new
        .nameSet(@"Observed Data")
        .colorSet(@"#ef476f")
        .fillColorSet(@"#04d69f")
        .dataSet(@[
            @[@760, @801, @848, @895, @965],
            @[@733, @853, @939, @980, @1080],
            @[@714, @762, @817, @870, @918],
            @[@724, @802, @806, @871, @950],
            @[@834, @836, @864, @882, @910]
        ]),
    ]);

    AAOptions *aaOptions = aaChartModel.aa_toAAOptions;

    aaOptions.plotOptions
    .boxplotSet(AABoxplot.new
                .boxDashStyleSet(AAChartLineDashStyleTypeDash)
                .fillColorSet(@"#F0F0E0")
                .lineWidthSet(@2)
                .medianColorSet(@"#0C5DA5")
                .medianDashStyleSet(AAChartLineDashStyleTypeShortDot)
                .medianWidthSet(@3)
                .stemColorSet(@"#A63400")
                .stemDashStyleSet(AAChartLineDashStyleTypeDot)
                .stemWidthSet(@1)
                .whiskerColorSet(@"#3D9200")
                .whiskerDashStyleSet(AAChartLineDashStyleTypeLongDashDotDot)
                .whiskerLengthSet(@"30%")
                .whiskerWidthSet(@3)
                );
    return aaOptions;
}

[AAChartModel]

参考:

• 如何更新 AAChartKit 至最新内容? #1337

[LiSaimen]

谢谢大神,代码可用，这个箱线的x轴可以用时间轴嘛？

[LiSaimen]

并且这个箱线的宽度好像也是自适应的，没看到哪里修改。。。

[AAChartModel]

谢谢大神,代码可用，这个箱线的x轴可以用时间轴嘛？

理论上, 时间轴类型应该对所有类型图表都有效, 不限制图表类型.

[LiSaimen]

好的，我研究一波儿，谢谢大神的回复与更新

[AAChartModel]

并且这个箱线的宽度好像也是自适应的，没看到哪里修改。。。

参考此次提交

• 3ee64d3

参考文档

• https://api.highcharts.com/highcharts/plotOptions.boxplot.pointWidth
• https://api.highcharts.com/highcharts/plotOptions.boxplot.maxPointWidth
• https://api.highcharts.com/highcharts/plotOptions.boxplot.minPointLength

[LiSaimen]

收到大神

[LiSaimen]

新加的maxPointWidth以及PointWidth，在箱线图里面会崩溃

[AAChartModel]

配置 AAOptions

//https://github.com/AAChartModel/AAChartKit/issues/1381
- (AAOptions *)configureBoxplotChartWithSpecialStyle {
    AAChartModel *aaChartModel = AAChartModel.new
    .chartTypeSet(AAChartTypeBoxplot)//图表类型
    .titleSet(@"BOXPLOT CHART")//图表主标题
    .subtitleSet(@"virtual data")//图表副标题
    .yAxisTitleSet(@"℃")//设置 Y 轴标题
    .yAxisVisibleSet(true)//设置 Y 轴是否可见
    .seriesSet(@[
        AASeriesElement.new
        .nameSet(@"Observed Data")
        .colorSet(@"#ef476f")
        .fillColorSet(@"#04d69f")
        .dataSet(@[
            @[@760, @801, @848, @895, @965],
            @[@733, @853, @939, @980, @1080],
            @[@714, @762, @817, @870, @918],
            @[@724, @802, @806, @871, @950],
            @[@834, @836, @864, @882, @910]
        ]),
    ]);

    AAOptions *aaOptions = aaChartModel.aa_toAAOptions;

    aaOptions.plotOptions
    .boxplotSet(AABoxplot.new
                .boxDashStyleSet(AAChartLineDashStyleTypeDash)
                .fillColorSet(@"#F0F0E0")
                .lineWidthSet(@2)
                .medianColorSet(@"#0C5DA5")
                .medianDashStyleSet(AAChartLineDashStyleTypeShortDot)
                .medianWidthSet(@3)
                .stemColorSet(@"#A63400")
                .stemDashStyleSet(AAChartLineDashStyleTypeDot)
                .stemWidthSet(@1)
                .whiskerColorSet(@"#3D9200")
                .whiskerDashStyleSet(AAChartLineDashStyleTypeSolid)
                .whiskerLengthSet(@"60%")
                .whiskerWidthSet(@6)
                );
    
    aaOptions.plotOptions.series
//        .maxPointWidthSet(@120)
        .pointWidthSet(@100);
    
    return aaOptions;
}

图表效果如下

[AAChartModel]

新加的maxPointWidth以及PointWidth，在箱线图里面会崩溃

配置示例

    aaOptions.plotOptions.series
//        .maxPointWidthSet(@120)
        .pointWidthSet(@100);
    

不太清楚你所说的崩溃指的是什么.

[LiSaimen]

可以大神，可能我第一次pod的时候只拉下来AAColumn里面的属性，AASeries里面没更新的原因，再次pod就OK了

[LiSaimen]

大神箱线图每个箱的颜色可以单独设置吗？类似股票那种一个红色的一个绿色的