Линейный график Silverlight с градиентом - PullRequest
Новая
       40

Линейный график Silverlight с градиентом

2 голосов
/ 09 июня 2010

У меня есть ряд точек, которые я превращу в линию на графике. Я хочу, чтобы область под графиком была заполнена градиентом. Это выглядело бы несколько похоже на граф Блумберга, подобный этому;

Example Graph

Мой вопрос действительно состоит из трех частей;

  • Во-первых, как мне заполнить только область под графиком?
  • Во-вторых, как мне заполнить это градиентом?
  • Наконец, если у меня есть несколько линий на одном графике, любая область под более чем одной линией должна иметь градиентную заливку серого, как бы вы это настроили?

Моя самая большая проблема - это выбор структур данных, которые я бы использовал, я мог бы использовать много сторонних фигур (по одной для каждой линии / ряда данных), а затем сказать кисти рисовать;

  • Прозрачный, если он не в любой форме
  • Цвет одной серии, если он в одной форме (альфа относительно высоты, чтобы дать град)
  • черный, если он имеет несколько форм (альфа относительно высоты, чтобы дать град)

Затем я бы нарисовал границы фигур белым цветом.

Спасибо

Гав

1 Ответ

6 голосов
/ 07 января 2011

Эффект градиента возможен при использовании бесплатной версии Visiblox Silverlight Charts . См. Пример приложения «Взгляд в прошлое», чтобы увидеть, как диаграммы 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 для привязки ваших бизнес-объектов непосредственно к диаграмме. :)

Раскрытие информации: Ранее я работал разработчиком на графиках Visiblox.

Надеюсь, это поможет!

...