使用 HTML 在自定义的浮动提示框 tooltip 中插入图片

[AAChartModel]

No description provided.

[AAChartModel]

配置AAOptions

- (AAOptions *)customXAxisLabelsBeImages {
    NSArray *nameArr = @[
        @"South Korea",
        @"Japan",
        @"Australia",
        @"Germany",
        @"Russia",
        @"China",
        @"Great Britain",
        @"United States"
    ];
    
    NSArray *colorArr = @[
        @"rgb(201, 36, 39)",
        @"rgb(201, 36, 39)",
        @"rgb(0, 82, 180)",
        @"rgb(0, 0, 0)",
        @"rgb(240, 240, 240)",
        @"rgb(255, 217, 68)",
        @"rgb(0, 82, 180)",
        @"rgb(215, 0, 38)"
    ];
    
    
    NSArray *imageLinkFlagArr = @[
        @"197582",
        @"197604",
        @"197507",
        @"197571",
        @"197408",
        @"197375",
        @"197374",
        @"197484"
    ];
    
    AAChartModel *aaChartModel = AAChartModel.new
    .chartTypeSet(AAChartTypeColumn)
    .titleSet(@"Custom X Axis Labels Be Images")
    .subtitleSet(@"use HTML")
    .categoriesSet(nameArr)
    .colorsThemeSet(colorArr)
    .borderRadiusSet(@5)
    .seriesSet(@[
        AASeriesElement.new
        .nameSet(@"AD 2020")
        .dataSet(@[@7.0, @6.9, @9.5, @14.5, @18.2, @21.5, @25.2, @26.5])
        .colorByPointSet(@true)
               ]);
    
    NSString *imageLinkFlagJSArrStr = [self javaScriptArrayStringWithObjcArray:imageLinkFlagArr];
    NSString *xLabelsFormatter = [NSString stringWithFormat:(@AAJSFunc(function () {
        let imageFlag = %@[this.pos];
        let imageLink = "<span><img src=\"https://image.flaticon.com/icons/svg/197/" + imageFlag + ".svg\" style=\"width: 30px; height: 30px;\"/><br></span>";
        return imageLink;
    })),imageLinkFlagJSArrStr];
    
    //    https://api.highcharts.com.cn/highcharts#xAxis.labels.formatter
    AAOptions *aaOptions = [AAOptionsConstructor configureChartOptionsWithAAChartModel:aaChartModel];
    aaOptions.xAxis.labels
    .useHTMLSet(true)
    .formatterSet(xLabelsFormatter)
    ;
    
    aaOptions.plotOptions.column.groupPaddingSet(@0.005);

    /*Custom tooltip style*/
    NSString *tooltipFormatter = [NSString stringWithFormat:(@AAJSFunc(function () {
        let imageFlag = %@[this.point.index];
        let imageLink = "<span><img src=\"https://image.flaticon.com/icons/svg/197/" + imageFlag + ".svg\" style=\"width: 30px; height: 30px;\"/><br></span>";
        return imageLink
        + " 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 <br/> "
        + " Support JavaScript Function Just Right Now !!! <br/> "
        + " The Gold Price For <b>2020 "
        +  this.x
        + " </b> Is <b> "
        +  this.y
        + " </b> Dollars ";
    })),imageLinkFlagJSArrStr];
    
    aaOptions.tooltip
    .sharedSet(false)
    .useHTMLSet(true)
    .formatterSet(tooltipFormatter)
    ;
    
    return aaOptions;
}

[silendir]

javaScriptArrayStringWithObjcArray: 是什么方法?

[AAChartModel]

    NSString *imageLinkFlagJSArrStr = [self javaScriptArrayStringWithObjcArray:imageLinkFlagArr];

这一段代码过时了,应该改为

    NSString *imageLinkFlagJSArrStr = [imageLinkFlagArr aa_toJSArray];

内部实现是

//将原生 Objctive-C 数组转换为 JavaScript 数组
- (NSString *)aa_toJSArray {
    NSString *originalJsArrStr = @"";
    for (NSString *obj in self) {
        originalJsArrStr = [originalJsArrStr stringByAppendingFormat:@"'%@',",obj];
    }
    
    NSString *finalJSArrStr = [NSString stringWithFormat:@"[%@]",originalJsArrStr];
    return finalJSArrStr;
}

[AAChartModel]

AAChartKit 的 demo 中有此示例的最新代码,下载查看即可