带渐变的 Silverlight 线图

Question

我有一系列的点，我将把它们变成图表上的一条线。我想要的是给图表下方的区域进行渐变填充。它看起来有点类似于这样的彭博图表；

我的问题实际上分为三个部分；

• 首先，我应该如何只填充图表下方的区域？
• 第二，如何用渐变填充它？
• 最后，如果我在同一张图表上有多条线，则多条线下方的任何区域都应具有灰度渐变填充，您将如何设置？

我最大的问题是决定使用的数据结构，我可以使用许多多边形状(每条线/数据系列一个)，然后告诉画笔进行绘制；

• 如果没有任何形状，则为透明
• 一个系列的颜色(如果它是一种形状)(相对于高度的 Alpha 给出等级)
• 如果有多种形状，则为黑色(相对于高度的 Alpha 给出梯度)

然后我会用白色绘制形状的边界。

谢谢

加夫

Answer 1

使用免费版本 Visiblox Silverlight Charts 可以实现渐变效果。请参阅示例应用程序“Hindsight”，了解如何将 Visiblox 图表应用于此上下文的应用程序。

我附上了关于如何实现此效果的 XAML 粗略代码片段:

<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:v="clr-namespace:Visiblox.Charts;assembly=Visiblox.Charts">

<UserControl.Resources>
    <LinearGradientBrush x:Key="GradientBrush" StartPoint="1.0, 0.0" EndPoint="1.0, 1.0">
        <GradientStop Color="AliceBlue" Offset="0.3" />
        <GradientStop Color="DarkBlue" Offset="0.7" />
    </LinearGradientBrush>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
    <v:Chart x:Name="Chart">
        <v:Chart.Series>
            <v:LineSeries x:Name="Series" ShowArea="True" AreaFill="{StaticResource GradientBrush}"/>
        </v:Chart.Series>
    </v:Chart>
</Grid>

就我个人而言，我会采取后见之明的做法，当绘图区域上有多个系列时，删除线条下的区域。我认为此时梯度会妨碍数据，正如您上面提到的，对此采取一些措施会产生计算成本。这也可能导致对数据的误解，因此要小心。

在将数据获取到图表方面，您可以使用 Visiblox BindableDataSeries 将业务对象直接绑定(bind)到图表上。 :)

披露:我之前曾担任 Visiblox Charts 的开发人员。

希望这有帮助!