如何让最后一个数据的tooltip在图表渲染时就直接显示出来

[kenneyLee]

我们用的折线图，想默认打开页面看到图表时，就能直接看到最后一个数据的tooltip

[AAChartModel]

参考:

• https://github.com/AAChartModel/AAChartKit-Swift/issues/345

OC 版本的 demo 中也有此示例, 下载运行查看即可.

[kenneyLee]

请教下大佬，默认的 tooltip 显示出来了，但是位置不对，一直在最左边，请问如何调整它的位置。

注：

• 图 1 是图表默认的 tooltip 位置
• 图 2 是点击后 tooltip 位置

想让默认时的位置跟点击时的一样，都在点击的点的上方。

代码如下：

- (AAOptions *)configureDashStyleTypeMixedChart {
    NSArray *linesColors;

    linesColors = @[@"#05C2CB",@"#ACABAE",@"#ACABAE",@"#ACABAE",@"#ACABAE",@"#ACABAE",@"#05C2CB"];

    NSString* subTitle = @"";
    NSString* tailString = @"";

    subTitle = @"千克(kg)";
    tailString = @"kg";

    __weak typeof(self) weakSelf = self;
    self.aaChartModel = AAChartModel.new
    .chartTypeSet(AAChartTypeLine)//图表类型
    .colorsThemeSet(linesColors)//设置主题颜色数组
    .backgroundColorSet(@"#FFFFFF")
    .tooltipValueSuffixSet(tailString)//设置浮动提示框单位后缀
    .yAxisLineWidthSet(@0)//Y轴轴线线宽为0即是隐藏Y轴轴线
    .markerRadiusSet(@1)

    .yAxisGridLineStyleSet([AALineStyle styleWithColor:@"#ACABAE" dashStyle:AAChartLineDashStyleTypeSolid width:@0.5])//y轴
    .xAxisGridLineStyleSet([AALineStyle styleWithColor:@"#ACABAE" dashStyle:AAChartLineDashStyleTypeSolid width:@0.5])
    .legendEnabledSet(false)
    .subtitleSet(subTitle)
    .subtitleStyleSet(AAStyleColorSizeWeight(@"#13ADB4", 12, AAChartFontWeightTypeThin))
    .subtitleAlignSet(@"left")
    .connectNullsSet(true)
    .categoriesSet(self.seriesXArray)
    .xAxisLabelsStyleSet(AAStyleColorSizeWeight(@"#00000044", 10, @"500"))
    .yAxisLabelsStyleSet(AAStyleColorSizeWeight(@"#00000044", 10, @"500"))
    .zoomTypeSet(AAChartZoomTypeX)  //重要属性,需要支持 X 轴横向滚动
    ;

        if (self.dataType == 1) {
            self.aaChartModel.yAxisTickPositionsSet(@[@2,@4,@6,@8,@10,@12,@14]);
            self.aaChartModel.yAxisMinSet(@(2));
        }
        else
        {
            self.aaChartModel.yAxisMaxSet(@(5));
            self.aaChartModel.yAxisMinSet(@(0));
        }

    AAOptions *aaOptions = self.aaChartModel.aa_toAAOptions;

    NSString *tooltipFormatter = [NSString stringWithFormat:(@AAJSFunc(function () {
        return '<div style=\"' + 'color:white; padding-left: 10px; padding-right: 10px; border-radius:11px; font-family:SourceHanSansCN-Medium; font-weight: 500; line-height: 18px; box-shadow: 0px 3px 5px 0px rgba(19,173,180,0.4);  font-size:12px\"' + '>'  + this.y.toFixed(1) + '%@'  + '</div>';
    })),tailString];

    aaOptions.tooltipSet(AATooltip.new
    .useHTMLSet(true)
    .sharedSet(false)
    .borderRadiusSet(@30)
    .followTouchMoveSet(false)
    .paddingSet(@2)  //外面宽度
    .formatterSet(tooltipFormatter)
    .backgroundColorSet(@"#13ADB4")
    .borderWidthSet(@0)

    .shadowSet(false)
    .valueDecimalsSet(@(1))//设置取值精确到小数点后几位
    );
    aaOptions.xAxis
    .tickmarkPlacementSet(@"on")
    ;
    aaOptions.plotOptions
    .splineSet(AASpline.new
               .statesSet(AAStates.new
                          .hoverSet(AAHover.new
                                    .lineWidthPlusSet(@2))));
    aaOptions.plotOptions.series.animation = (id)@(false);
    aaOptions.chart.resetZoomButtonSet(
                                       AAResetZoomButton.new
                                       .positionSet(AAPosition.new
                                                    .ySet(@900))
                                       );

    NSInteger defaultSelectedIndex = self.lineDatas.count - 1;
    NSString *javascriptCode = [NSString stringWithFormat:@"function() {\
        var points = [],\
            chart = this,\
            series = chart.series,\
            length = series.length;\
        \
        var pointElement = series[length - 1].data[%ld];\
        points.push(pointElement);\
        chart.tooltip.refresh(points);\
    }", (long)defaultSelectedIndex];

    AAChartEvents *chartEvents = [AAChartEvents new];
    chartEvents.loadSet(javascriptCode);

    aaOptions.chart.eventsSet(chartEvents);
    return aaOptions;
}

[AAChartModel]

试试配置一下 AATooltip 的 positioner 属性看看效果, 参考:

• https://github.com/AAChartModel/AAChartKit/issues/966