向 Silverlight Toolkit 柱形图添加水平线答案

【问题标题】：Adding a horizontal line to a Silverlight Toolkit column chart向 Silverlight Toolkit 柱形图添加水平线
【发布时间】：2011-07-19 17:01:42
【问题描述】：

我在 WPF 项目中使用 Silverlight 工具包，我想在我可以指定的 Y 轴值处向柱形图中添加一条红色虚线。我已经修改了图表模板并成功添加了一条线，但我不确定如何让这条线显示在我想要的 y 轴值以及如何让它横跨整个图表。这是我到目前为止的图表图片：

这是我用来生成它的图表模板 XAML 代码：

            <charting:Chart Name="chartUsageHours" Grid.Column="1" BorderThickness="0" Padding="0" Loaded="chartUsageHours_Loaded">
            <charting:Chart.Template>
                <ControlTemplate TargetType="{x:Type charting:Chart}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <datavis:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" />
                            <chartingprimitives:EdgePanel Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" Grid.Row="1" Margin="0,0,0,0">
                                <Grid Panel.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                                <Border Panel.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1, 0, 0, 1" />
                                <Grid Name="HoursThresholdContainer" Canvas.ZIndex="1" Background="Transparent">
                                    <Grid Name="HoursThreshold">
                                        <Line Name="Horizontal" HorizontalAlignment="Stretch" X1="0" Y1="100" X2="600" Y2="100" Stroke="Red" StrokeDashArray="4, 2"/>
                                    </Grid>
                                </Grid>
                            </chartingprimitives:EdgePanel>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </charting:Chart.Template>
            <charting:Chart.Series>
                <charting:StackedColumnSeries Visibility="{Binding Include_OnTimeVsFitTime, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <charting:StackedColumnSeries.IndependentAxis>
                        <charting:CategoryAxis Orientation="X" SortOrder="None" ShowGridLines="False">
                            <charting:CategoryAxis.AxisLabelStyle>
                                <Style TargetType="charting:AxisLabel">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="charting:AxisLabel">
                                                <TextBlock Text="{Binding Converter={StaticResource DateStringConverter}}" FontSize="8">
                                                    <TextBlock.LayoutTransform>
                                                        <RotateTransform Angle="-90"/>
                                                    </TextBlock.LayoutTransform>
                                                </TextBlock>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </charting:CategoryAxis.AxisLabelStyle>
                        </charting:CategoryAxis>
                    </charting:StackedColumnSeries.IndependentAxis>
                    <charting:SeriesDefinition ItemsSource="{Binding ChartUsageHours}" DependentValuePath="Value" IndependentValuePath="Key" />
                    <charting:SeriesDefinition ItemsSource="{Binding ChartOnTimeHours}" DependentValuePath="Value" IndependentValuePath="Key" />
                </charting:StackedColumnSeries>
                <charting:StackedColumnSeries Visibility="{Binding DontInclude_OnTimeVsFitTime, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <charting:SeriesDefinition ItemsSource="{Binding ChartUsageHours}" DependentValuePath="Value" IndependentValuePath="Key" />
                </charting:StackedColumnSeries>
            </charting:Chart.Series>
        </charting:Chart>

有人知道怎么做吗？

谢谢，保罗

【问题讨论】：

标签： wpf silverlight-toolkit

【解决方案1】：

顺便说一句，我创建了一个更通用的图表，它适用于任何类型的系列（列、条形、StackedColumn 等）并将任何值显示为一条线。

我在blog post 中解释了此图表的用法。

源码可以在here下载。

【讨论】：

Vorrtex 的工作真的很棒！我还没有真正看过你的代码，但我期待学习一些东西。
我看过你的我已经改变了我接受的答案，因为它比我使用的方法更好。很好的解决方案。

【解决方案2】：

您可以设置 Line 的 Stretch="Fill" 使其拉伸整个长度

至于沿 Y 轴对齐它，我会尝试绑定到 Y1/Y2 属性，或者将线放在同时包含 Chart 和 @987654325 的 Canvas 或 Grid 控件中@ 并绑定 Canvas.Top 以设置其位置

【讨论】：

谢谢，Stretch="Fill" 效果很好。至于 Y1/Y2 绑定，我到底要绑定什么，才能反映 Y 轴上的值？
@PIntag 红线应该代表什么？它是基于数据、您想在 XAML 中定义的某个静态值还是其他什么？
抱歉没有更清楚。它是基于数据的阈值。例如，在我上面粘贴的图表片段上，我想指定在 4.5 小时使用时显示该线。 Line 对象的 Y1/Y2 值似乎代表原始单位，而不是 Y 轴上的数据值。

【解决方案3】：

要获取直线的 y 位置，您需要在 Y 轴上调用 GetPlotAreaCoordinate 方法

chart.Axes[1].GetPlotAreaCoordinate(value) // you could name your axis if you like.

【讨论】：

【解决方案4】：

我最终根据http://www.scottlogic.co.uk/blog/colin/2009/03/adding-a-location-crosshair-to-silverlight-charts-again/ 此处描述的技术实现了一些东西。

【讨论】：