在 Flex 图表上绘图

发布于 2024-11-27 17:24:55 字数 269 浏览 1 评论 0原文

我在 Flex 中创建了一个折线图，它的工作原理与预期一致。现在，我想为背景添加阴影以获取特定信息。例如，此图表 - http://research.stlouisfed.org/fred2/ graph/?id=TOTALSL,TOTALNS, - 显示经济衰退的阴影背景。我如何在 Flex 折线图中模仿这种阴影？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

撕心裂肺的伤痛 2024-12-04 17:24:55

您可以使用绘图 api 在图表的背景中绘制它。

编辑：

我不知道网络上有任何代码示例，我只在生产代码中完成了它（又名我无法分享它，抱歉:(）
您将需要创建一个容器并将其放入图表中。

<mx:backgroundElements>

您应该将 x 轴的最小值和最大值可能作为单独的属性以及描述何时显示突出显示部分的数据提供程序传递到该容器中。您可能必须根据传递到图表中的数据提供程序来计算最小值和最大值。

如果您只想显示突出显示的区域，您只需使用绘图 API 并根据数据提供者的最小值、最大值、容器宽度以及数据点（开始值和结束值）计算 X 轴上的放置位置。它在你的 updateDisplayList 中看起来像这样：

// code is not tested but a good start

var shadeStartX:Number = (max-min)/startPoint; 
var shadeEndX:Number = (max-min)/endPoint;
var shadeWidth:Number = shadeEndX - shadeStartX;

...

this.graphics.drawRect(shadeStartX, 0, shadeWidth, unscaledHeight);

但如果你想要像悬停状态这样的东西和所有这些优点，我建议创建一个显示对象，你将宽度传入并将其添加到计算的 x 轴处的容器中将其设置为。

You could draw it in the background of the chart using the drawing api.

edit:

I dont know of any code examples on the web, I've only done it in production code (aka I cant share it, sorry :( )
you will want to create a container and put it into the charts

<mx:backgroundElements>

You should pass into this container the min and max for the x-axis probably as separate properties and a dataprovider that describes when to show a highlighted section. You might have to compute the min and max based on the dataprovider you pass into the chart.

If you just want to show the highlighted area you will just use the drawing api and compute where to put on the x-axis based on your min, max, width of container, and data point (start and end values) from your dataprovider. It will look something like this in your updateDisplayList:

// code is not tested but a good start

var shadeStartX:Number = (max-min)/startPoint; 
var shadeEndX:Number = (max-min)/endPoint;
var shadeWidth:Number = shadeEndX - shadeStartX;

...

this.graphics.drawRect(shadeStartX, 0, shadeWidth, unscaledHeight);

but if you want to have things like hover states and all that goodness I would suggest creating a display object that you pass the width in and adding that to the container at the computed x-axis to set it at.

回复收藏 0 原文