1

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

分为三个部分：

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

这三个元素是如何创建/绘制的，如何定制它们？

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

4

1 回答 1

4

事实证明，类中的dataTipRenderer样式ChartBase默认为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 时，将禁用在悬停时在线上绘制圆圈。

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

一旦我弄清楚这showDataTipTargets与此有关，我就可以回答另一个问题。在那里您可以找到有关如何自定义DataTipTarget

ChartBase布尔属性 ,仅切换数据提示框的showDataTips呈现。它们是使用 style 呈现的dataTipRenderer，而 datatip 框的文本是使用 property 创建的dataTipFunction。

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

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