AAChartKit icon indicating copy to clipboard operation
AAChartKit copied to clipboard

折线图的十字线带个柱状的背景

Open zhoupIT opened this issue 2 years ago • 3 comments

UI 这是设计师设计的效果,他的十字线后面个有个背景 这个背景,我一直没明白怎么搞

zhoupIT avatar Jul 20 '21 05:07 zhoupIT

me 这是我做的效果 代码如下

- (AAOptions *)customizeOptions {
    AAChartModel *aaChartModel = AAChartModel.new
    .chartTypeSet(AAChartTypeAreaspline)//图表类型
    .yAxisLineWidthSet(@0) // Y轴轴线线宽为0即是隐藏Y轴轴线
    .yAxisLabelsEnabledSet(false)
    .yAxisGridLineStyleSet([AALineStyle styleWithWidth:@0])//y轴横向分割线宽度为0(即是隐藏分割线)
    .yAxisPlotLinesSet(@[AAPlotLinesElement.new
                            .colorSet(@"#ECECEC")//颜色值(16进制)
                            .dashStyleSet(@"Solid")//样式:Dash,Dot,Solid等,默认Solid
                            .widthSet(@(0.5)) //标示线粗细
                            .valueSet(@(10000)) //所在位置
                            .zIndexSet(@(1)) //层叠,标示线在图表中显示的层叠级别,值越大,显示越向前
                            .labelSet(AALabel.new
                                      .textSet(@"10000")
                                      .styleSet(AAStyleColor(@"#C1C7D0")))])
    .dataLabelsEnabledSet(false)
    .tooltipEnabledSet(true)
    .markerRadiusSet(@0)
    .xAxisCrosshairSet([AACrosshair crosshairWithColor:@"#47D187"// 准星线
                                              dashStyle:AAChartLineDashStyleTypeDot
                                                  width:@1])
    .legendEnabledSet(false)
    .categoriesSet(@[@"Mon",@"TUE",@"WED",@"THU",@"FRI",@"SAT",@"SUN",])
    .seriesSet(@[
        AASeriesElement.new
        .lineWidthSet(@2)
        .colorSet(@"#47D187")
        .fillOpacitySet(@0)
        .dataSet(@[@13289, @6421, @9483, @4321, @3753, @2321, @8968])
        .statesSet(AAStates.new
                   .hoverSet(AAHover.new
                             .haloSet(AAHalo.new
                                      .sizeSet(@5)
                                      .opacitySet(@1)
                                      .attributesSet(@{
                                          @"stroke-width": @3,
                                          @"fill": @"#ffffff",
                                          @"stroke": @"#ffffff"
                                                     }))))
        .markerSet(AAMarker.new
                   .statesSet(AAMarkerStates.new
                              .hoverSet(AAMarkerHover.new
                                        .fillColorSet(@"#47D187")
                                        .radiusSet(@2.5)
                                        .lineWidthSet(@0))))
    ]);
    
    AAOptions *aaOptions = aaChartModel.aa_toAAOptions;
    AATooltip *tooltip = aaOptions.tooltip;
    tooltip
    .animationSet(false)
    .useHTMLSet(true)
    .formatterSet(@AAJSFunc(function () {
        return this.y;
    }))
    .paddingSet(@2)
    .backgroundColorSet(@"#47D187")
    .borderRadiusSet(@3)
    .shadowSet(false)
    .styleSet(AAStyleColorSize(@"#FFFFFF", 16));
    return aaOptions;
}

zhoupIT avatar Jul 20 '21 05:07 zhoupIT

不支持此设计.

Highchart 只能有准星线, 或者是将准星线的宽度加宽, 改成这种柱状背景效果. 但是不支持既有准星线又有柱状背景.

AAChartModel avatar Jul 20 '21 05:07 AAChartModel

不支持此设计.

Highchart 只能有准星线, 或者是将准星线的宽度加宽, 改成这种柱状背景效果. 但是不支持既有准星线又有柱状背景.

明白了,我去试试。多谢大佬!大佬再想问一下,多条折线的情况下,选中会默认选择所有的线。我需要隐藏掉tooltip,通过.tooltipEnabledSet(false)现在变成就只能选择一条线了,那我该怎么隐藏呢 WX20210720-175022@2x

zhoupIT avatar Jul 20 '21 09:07 zhoupIT