数据提示如何在 Flex 图表中工作？

Question

Flex 图表中的数据提示是一个记录不充分且鲜为人知的功能。

分为三个部分：

• DataTip，默认情况下是一个带有文本的框
• DataTipTarget，默认情况下在系列点上方的靶心圆
• 标注，从 dataTipTarget 到 DataTip 框的行

如何创建/绘制这三个元素以及如何自定义它们？

---

另请参阅my answer，了解如何正确自定义 DataTipTargets 和 Callout 行的呈现。

Answer 1

原来ChartBase 类中的dataTipRenderer 样式默认为DataTip。

DataTip 是一个IDataRenderer，因此可以充当渲染器。 但是，DataTip.updateDisplayList(w,h) 方法不会在数据点处绘制圆。它绘制了一个矩形，里面有 HTML 文本。

那么，是什么吸引了难以捉摸的靶心呢？

---

现在我做了一些挖掘，一些非常深的挖掘，我找到了答案。我会在这里为其他人记录它们。

我的 SDK 版本是 4.1.0。

默认的在悬停时渲染圆形数据点的代码并不是我们想象的渲染器，而是mx.charts.chartClasses.ChartBase类中的一个函数，第3873行：

/**
 *  Defines the locations of DataTip objects on the chart.
 *  This method ensures that DataTip objects do not overlap each other
 *  (if multiple DataTip objects are visible) or overlap their target data items.
 *  
 *  @langversion 3.0
 *  @playerversion Flash 9
 *  @playerversion AIR 1.1
 *  @productversion Flex 3
 */
protected function positionDataTips():void

在同一个类中有一个类似的函数positionAllDataTips()。

ChartBase、showDataTipTargets 上有一个简单的布尔样式，当设置为 false 时，将禁用在悬停时在线上绘制圆圈。

数据提示目标在ChartBase 的positionDataTips() 函数中呈现（从第4204 行开始）。

一旦我发现showDataTipTargets 与此相关，我就能够answer another question。在那里您可以找到有关如何自定义DataTipTarget的详细说明

ChartBase 布尔属性 showDataTips 仅切换数据提示框的呈现。它们使用样式dataTipRenderer 呈现，数据提示框的文本使用属性dataTipFunction 创建。

---

总结一下，图表上的DataTips可以这样理解：

• ChartBase.getStyle("showDataTipTargets"):Boolean 将切换悬停在某个点上时呈现的默认圆圈的可见性。
  • 为了实际更改数据提示目标的呈现，您必须覆盖/修改它们在ChartBase.positionDataTips() 函数中的绘制方式
• DataTip 框单独处理
  • ChartBase.showDataTips:Boolean 将切换整个图表的 DataTips 和 DataTipTargets 的可见性
  • ChartBase.getStyle("dataTipRenderer"):Class 将仅处理 DataTip 框的图形呈现。
  • dataTipRenderer 将使用ChartBase.dataTipFunction:Function 返回的字符串来显示数据。
  • 应遵循的约定是：
    • 自定义dataTipRenderer 应该处理数据提示的图形/绘图
    • 自定义 dataTipFunction 应处理给定点的数据文本格式
• 标注线是从 DataTipTarget 到 DataTip 框的可选线，可以通过设置 ChartBase.getStyle(“dataTipCalloutStroke”):IStroke 来启用和自定义。