嵌套柱状图柱子层级调整

[Zorodon]

作者大大，怎么实现嵌套柱状图柱子层级调整啊，如图这种数列，有大有小，按demo搞的嵌套后面的柱子会被前面的挡住，怎么调整到前面来？就是不管几列，小的数据搞到前面，大的在后面

[AAChartModel]

你是想要实现 Highcharts 嵌套柱状图中柱子层级根据数值大小自动调整，确保小的数据对应的柱子显示在前面，大的在后面，不会被遮挡，对吧？

但是 Highcharts 本身应该是没有直接提供这个功能(我还没有找到相关资料).

我感觉要实现的你的这个效果, 只能靠你自己对数据排序做预处理.

[Zorodon]

对啊，是想实现那种效果，有想过预先处理数据，但是后面tooltip也要处理，啊，头疼头疼

[AAChartModel]

这个没办法🤷‍♂️. 但是 Highcharts 不是支持调整柱状图宽度吗? 处在后面的偏矮的柱状图只要够宽, 也一样能够被看到啊.

[AAChartModel]

这个没办法🤷‍♂️. 但是 Highcharts 不是支持调整柱状图宽度吗? 处在后面的偏矮的柱状图只要够宽, 也一样能够被看到啊.

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

类似于这种: 偏矮的棱柱, 即便在后方, 因为足够宽, 也一样能够被看见.

[Zorodon]

我一开始就是处理成这种不等宽的，设计师说丑，不要啊，必须要等宽TT。如果处理数据，弄成大的一列，小的一列，然后标志哪个是换过的，处理完数据，这个tooltip有办法根据标志来提示替换的值吗？

[AAChartModel]

AADataElement 的确实有 name 属性, 你可以先通过设置每个 AADataElement 的对应的 name 值, 来对数据进行分类,

@interface AADataElement : NSObject

AAPropStatementAndPropSetFuncStatement(copy  , AADataElement, NSString *, color)
AAPropStatementAndPropSetFuncStatement(strong, AADataElement, AADataLabels *, dataLabels)
AAPropStatementAndPropSetFuncStatement(strong, AADataElement, AAMarker *, marker)
AAPropStatementAndPropSetFuncStatement(copy  , AADataElement, NSString *, name)
AAPropStatementAndPropSetFuncStatement(strong, AADataElement, NSNumber *, x)
AAPropStatementAndPropSetFuncStatement(strong, AADataElement, NSNumber *, y)
AAPropStatementAndPropSetFuncStatement(strong, AADataElement, id,         selected)

@end

然后通过 AATooltip 的 formatter 方法, 来自定义 tooltip.

[AAChartModel]

至于如何通过 AATooltip 的 formatter 自定义 浮动提示框内容, 参考 demo 中的这些示例方法

• 示例方法集合一:

• (id)chartConfigurationWithSelectedIndex:(NSUInteger)selectedIndex { switch (self.selectedIndex) { case 0: return [self customAreaChartTooltipStyleWithSimpleFormatString];//简单字符串拼接 case 1: return [self customAreaChartTooltipStyleWithDifferentUnitSuffix];//自定义不同单位后缀 case 2: return [self customAreaChartTooltipStyleWithColorfulHtmlLabels];//自定义多彩颜色文字 case 3: return [self customLineChartTooltipStyleWhenValueBeZeroDoNotShow];//值为0时,在tooltip中不显示 case 4: return [self customStackedAndGroupedColumnChartTooltip];//自定义分组堆积柱状图tooltip内容

  case 5: return [self configureSpecialStyleTrianglePolarChart];//外部显示六边形边框的三角形雷达图
  case 6: return [self customArearangeChartTooltip];//自定义面积范围图的 tooltip
  case 7: return [self customLineChartOriginalPointPositionByConfiguringXAxisFormatterAndTooltipFormatter];//通过自定义X轴的 labels 的 Formatter 和 tooltip 的 Formatter 来调整折线图的 X 轴左边距
  case 8: return [self customTooltipWhichDataSourceComeFromOutSideRatherThanSeries];//通过来自外部的数据源来自定义 tooltip (而非常规的来自图表的 series)
  case 9: return [self customAreasplineChartTooltipStyleByDivWithCSS];//通过自定义 div 的 css 样式来自定义复杂效果的 tooltip 浮动提示框
  
  default:
      return nil;

  } }

• 示例方法集合二:

• (id)chartConfigurationWithSelectedIndex:(NSUInteger)selectedIndex { switch (self.selectedIndex) { case 0: return [self customColumnChartBorderStyleAndStatesHoverColor];//自定义📊柱状图的 border 样式和手指或鼠标 hover 时的显示效果 case 1: return [self customTooltipPostionerFunction];//自定义浮动提示框 Positioner 函数 case 2: return [self fixedTooltipPositionByCustomPositionerFunction];//通过 Positioner 函数来实现一个位置固定的提示框 case 3: return [self customPlotAreaOutsideComlicatedTooltipStyle];//通过 Positioner 函数来实现绘图区外的复杂浮动提示框样式 case 4: return [self makePieChartShow0Data];//使饼图显示为 0 的数据 case 5: return [self customizeTooltipShapeAndShadowBeSpecialStyle];

  default:
      return nil;

  } }

[AAChartModel]

参考在线文档:

• https://api.highcharts.com/highcharts/series.column.data.name
• https://api.highcharts.com/highcharts/tooltip.formatter

[Zorodon]

大大，求助，怎么让AAColumn每列都配置自己的颜色，我数据替换了，但是柱子颜色怎么换？

[AAChartModel]

AADataElement 有 color 属性, 具体设置方法参考:

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

[AAChartModel]

在线文档参考:

• https://api.highcharts.com/highcharts/series.column.data.color

[Zorodon]

感谢大佬，搞定啦，谢谢