dataLabel 如何加不同的单位呢

[JenkenXu]

dataLabel如何加不同的单位。 现在知道可以用{y}找到数字， 然后后面我想每个y分别加不同的单位。 2盒 3箱 4个 5瓶 之类的要怎么做

[AAChartModel]

类似于这种的自定义DataLabels

参见 #521

[JenkenXu]

不是 我的意思是 后面的单位不统一 第一个点的单位是美元 第二个点的单位是欧元， 这样的需求是不是要改js文件了啊

[AAChartModel]

不需要改js,其实highCharts支持针对data数组中的单个数据元素的DataLabels,进行个性化设置

参见官方示例:https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/point/datalabels/

[Crayonnerry]

请问你这个解决了吗？

[AAChartModel]

总共有两种方法

[Crayonnerry]

我现在是想显示不同的值 自己计算出来的，要怎么操作？求解

[AAChartModel]

第一种方案:

1* 配置AAChartModel实例对象

 NSArray *dataArr =
    @[AAData.new
      .dataLabelsSet(AADataLabels.new
                     .enabledSet(true)
                     .styleSet(AAStyle.new
                               .fontSizeSet(@"20px")
                               .fontWeightSet(AAChartFontWeightTypeBold)
                               .colorSet(AAColor.redColor)
                               .textOutlineSet(@"1px 1px contrast")
                               )
                     .formatSet(@"{y} 美元🇺🇸💲")
                     .xSet(@3)
                     .verticalAlignSet(AALegendVerticalAlignTypeMiddle)
                     )
      .ySet(@7.0),
      @14.5,
      @18.2,
      @21.5,
      @25.2,
      AAData.new
      .dataLabelsSet(AADataLabels.new
                     .enabledSet(true)
                     .styleSet(AAStyle.new
                               .fontSizeSet(@"20px")
                               .fontWeightSet(AAChartFontWeightTypeBold)
                               .colorSet(AAColor.blueColor)
                               .textOutlineSet(@"0.5px 0.5px contrast")
                               )
                     .formatSet(@"{y} 英镑🇬🇧£")
                     .xSet(@3)
                     .verticalAlignSet(AALegendVerticalAlignTypeMiddle)
                     )
      .ySet(@26.5),
      @23.3,
      @18.3,
      @13.9,
      @9.6,
      AAData.new
      .dataLabelsSet(AADataLabels.new
                     .enabledSet(true)
                     .styleSet(AAStyle.new
                               .fontSizeSet(@"20px")
                               .fontWeightSet(AAChartFontWeightTypeBold)
                               .colorSet(AAColor.greenColor)
                               .textOutlineSet(@"1px 1px contrast")
                               )
                     .formatSet(@"{y} 日元🇯🇵￥")
                     .xSet(@3)
                     .verticalAlignSet(AALegendVerticalAlignTypeMiddle)
                     )
      .ySet(@6.9),
      ];
    
    
    AAChartModel *aaChartModel= AAChartModel.new
    .titleSet(@"单独自定义某个指定数据元素的DataLabel")
    .subtitleSet(@"")
    .colorsThemeSet(@[AAGradientColor.mysticMauveColor])
    .seriesSet(@[
                 AASeriesElement.new
                 .nameSet(@"货币")
                 .dataSet(dataArr),
                 ]
               )
    ;

2* 绘制图形

    [self.aaChartView aa_drawChartWithChartModel:self.aaChartModel];

最终效果图

[AAChartModel]

第二种方法(推荐):

1* 配置AAOptions实例对象

    AAChartModel *aaChartModel= AAChartModel.new
    .chartTypeSet(AAChartTypeAreaspline)//图表类型
    .titleSet(@"")//图表主标题
    .subtitleSet(@"")//图表副标题
    .dataLabelEnabledSet(true)
    .tooltipEnabledSet(false)
    .colorsThemeSet(@[AAColor.lightGrayColor])
    .markerRadiusSet(@0)
    .legendEnabledSet(false)
    .categoriesSet(@[@"美国🇺🇸",@"欧洲🇪🇺",@"中国🇨🇳",@"日本🇯🇵",@"韩国🇰🇷",@"越南🇻🇳",@"中国香港🇭🇰",])
    .seriesSet(@[
                 AASeriesElement.new
                 .colorSet((id)AAGradientColor.fizzyPeachColor)
                 .dataSet(@[
                            AAData.new
                            .dataLabelsSet(AADataLabels.new
                                           .enabledSet(true)
                                           .formatSet(@"{y} 美元")
                                           )
                            .ySet(@7.1),
                            AAData.new
                            .dataLabelsSet(AADataLabels.new
                                           .enabledSet(true)
                                           .formatSet(@"{y} 欧元")
                                           )
                            .ySet(@6.9),
                            AAData.new
                            .dataLabelsSet(AADataLabels.new
                                           .enabledSet(true)
                                           .formatSet(@"{y} 人民币")
                                           )
                            .ySet(@2.5),
                            AAData.new
                            .dataLabelsSet(AADataLabels.new
                                           .enabledSet(true)
                                           .formatSet(@"{y} 日元")
                                           )
                            .ySet(@14.5),
                            AAData.new
                            .dataLabelsSet(AADataLabels.new
                                           .enabledSet(true)
                                           .formatSet(@"{y} 韩元")
                                           )
                            .ySet(@18.2),
                            AAData.new
                            .dataLabelsSet(AADataLabels.new
                                           .enabledSet(true)
                                           .formatSet(@"{y} 越南盾")
                                           )
                            .ySet(@18.2),
                            AAData.new
                            .dataLabelsSet(AADataLabels.new
                                           .enabledSet(true)
                                           .formatSet(@"{y} 港币")
                                           )
                            .ySet(@21.5),
                         ]),
                 ]
               );
    
    AAOptions *aaOptions = [AAOptionsConstructor configureChartOptionsWithAAChartModel:aaChartModel];
    aaOptions.yAxis.gridLineDashStyle = AALineDashStyleTypeLongDash;//设置Y轴的网格线样式为 AALineDashStyleTypeLongDash
    AADataLabels *aaDatalabels = aaOptions.plotOptions.areaspline.dataLabels;
    aaDatalabels
    .xSet(@3)
    .verticalAlignSet(AALegendVerticalAlignTypeMiddle)
    .ySet(@-20)
    .styleSet(AAStyle.new
              .fontSizeSet(@"10px")
              .fontWeightSet(AAChartFontWeightTypeBold)
              .colorSet(AAColor.redColor)
              .textOutlineSet(@"1px 1px contrast")
              )
    .backgroundColorSet(AAColor.whiteColor)// white color
    .borderColorSet(AAColor.redColor)// red color
    .borderRadiusSet(@1.5)
    .borderWidthSet(@1.3);

2* 绘制图形

    [aaChartView aa_drawChartWithOptions:aaOptions];

最终效果图

[AAChartModel]

数据较多的时候,推荐使用第二种方法.因为数据量较大的时候,第一种方法的重复代码会比较多

[AAChartModel]

以上所有示例代码内容都已包含在AAChartKit的最新demo中,请自行更新运行查看最终示意效果.