求助作者 怎么在图表线上的y值加个自定义的label

[chenhengstar]

[AAChartModel]

配置 AAOptions

- (AAChartModel *)customSpecialStyleDataLabelOfSingleDataElementChart {
    NSDictionary *gradientColorDic1 =
    [AAGradientColor gradientColorWithDirection:AALinearGradientDirectionToTop
                               startColorString:@"rgba(255,215,0,0.1)" // gold color, alpha: 0.1
                                 endColorString:@"rgba(255,215,0, 0.6)"]; // gold color, alpha: 0.6   ▴
    
    NSString *formatStr = [NSString stringWithFormat:@"%@%@",
                           @"<span style=""color:#FFFFFF;font-weight:thin;font-size:25px"">▲{y}</span>",
                           @"<span style=""color:#FFFFFF;font-weight:thin;font-size:17px""> m</span>"
                           ];
    
    AADataElement *singleSpecialData = AADataElement.new
    .dataLabelsSet(AADataLabels.new
                   .enabledSet(true)
                   .useHTMLSet(true)
                   .formatSet(formatStr)
                   .styleSet(AAStyle.new
                             .fontWeightSet(AAChartFontWeightTypeBold)
                             .colorSet(AAColor.whiteColor)
                             .fontSizeSet(@"16px"))
                   .ySet(@(-35))
                   .alignSet(AAChartAlignTypeCenter)
                   .verticalAlignSet(AAChartVerticalAlignTypeTop)
                   .overflowSet(@"none")
                   .cropSet(false)
                   )
    .ySet(@26.5);
    
    return AAChartModel.new
    .chartTypeSet(AAChartTypeAreaspline)
    .titleSet(@"")
    .backgroundColorSet(@"#4b2b7f")
    .yAxisTitleSet(@"")//设置Y轴标题
    .dataLabelsEnabledSet(false)//是否显示值
    .tooltipEnabledSet(true)
    .markerRadiusSet(@0)
    .xAxisVisibleSet(false)
    .yAxisVisibleSet(false)
    .seriesSet(@[
                 AASeriesElement.new
                 .nameSet(@"Virtual Data")
                 .lineWidthSet(@6)
                 .colorSet(@"rgba(255,215,0,1)")
                 .fillColorSet((id)gradientColorDic1)// gold color, alpha: 1.0
                 .dataSet(@[@7.0, @6.9, @2.5, @14.5, @18.2, singleSpecialData, @5.2, @26.5, @23.3, @45.3, @13.9, @9.6])
                 ]);
}

图形结果

[AAChartModel]

相关 API 参见

• AADataLabels: https://api.highcharts.com.cn/highcharts#plotOptions.series.dataLabels
• AADataElement: https://api.highcharts.com.cn/highcharts#series%3Carea%3E.data

[chenhengstar]

谢谢 作者

[chenhengstar]

前面的 ▲ 能换成图标吗 ??亲

[AAChartModel]

能的! 亲 👻

[chenhengstar]

怎么搞 ,教教我 亲

[AAChartModel]

设置 format 字符串属性

    NSString *formatStr = [NSString stringWithFormat:@"%@%@%@",
                           @"<img src=""https://www.highcharts.com/samples/graphics/sun.png"">",
                           @"<span style=""color:#FFFFFF;font-weight:thin;font-size:25px"">{y}</span>",
                           @"<span style=""color:#FFFFFF;font-weight:thin;font-size:17px""> m</span>"
                           ];

绘图结果

[AAChartModel]

如果需要调整图片宽高的话,就将

@"<img src=""https://www.highcharts.com/samples/graphics/sun.png"">"

修改为

@"<img src=""https://www.highcharts.com/samples/graphics/sun.png"" width=""42"" height=""42"">"

width=""42"" height=""42"" 这两个属性可以修改图片的宽高

[AAChartModel]

<img> 标签所有功能参见文档: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

[AAChartModel]

按理说还可以将 图片 HTTPS 链接 改成本地图片资源,就像这样

将

@"<img src=""https://www.highcharts.com/samples/graphics/sun.png"">",

改为

@"<img src=""sun.png"">",

但是我这边测试没有成功,也不知道是为啥,可能是哪个地方符号或是写法不符合标椎,暂时也没有时间仔细查找问题原因了,姑且就先这样吧,亲

[chenhengstar]

https://www.highcharts.com/samples/graphics/sun.png 这个链接能显示图片 ,换个链接https://img.hcharts.cn/static/common/weixin_logo.png 就显示不出来了

[AAChartModel]

404 Not Found

---

nginx/1.10.3

https://img.hcharts.cn/static/common/weixin_logo.png

你的这个链接是有效链接吗? 我点击之后怎么是 404?

[chenhengstar]

嗯可以显示了 要https
的图片才行,谢谢亲🙏