Question

我正在测试WinRT Xaml工具包，并且有这样的问题。在Column Series中，当我使用连续2个月的样本数据（如第一张图片）时，列宽自动计算得很好。但是当我使用2个非连续月份的样本数据，如第二张图片（2月和9月）时，列宽有点失败。在第二张图片中，除了输入数据= 0表示没有数据的月份之外，还有其他任何方法可以使列宽度跨度与第一张图片一样整齐。

这是我的代码：

class Report
{
    public string months { get; set; }
    public int value{ get; set; }
}

public MainPage()
{
    this.InitializeComponent();
    LoadChartContents();
}

private void LoadChartContents()
{
    List<Report> lstSource = new List<Report>();
    lstSource.Add(new Report() { months = "2", value= 10 });
    lstSource.Add(new Report() { months = "9", value= 15 });

    (LineChart.Series[0] as ColumnSeries).ItemsSource = lstSource;
    (LineChart.Series[0] as ColumnSeries).IndependentAxis = new LinearAxis{Minimum = 1,Maximum = 12,Orientation = AxisOrientation.X,Interval = 1};
}

的Xaml

<Chart:Chart x:Name="Chart" HorizontalAlignment="Center" Margin="5" Width="500">
 <Chart:ColumnSeries Title="Chart Name" IndependentValuePath="months" DependentValuePath="value" />
</Chart:Chart>

Answer 1

还有其他任何方法可以使列宽跨度与第一张图片完全相同。

可以通过重置ColumnDataPoint样式来更改列宽。将Border元素的宽度更新为您想要影响列的宽度。代码如下：

<charting:Chart
    x:Name="Chart"
    Width="500"
    Margin="5"
    HorizontalAlignment="Center">
    <charting:ColumnSeries
        Title="Chart Name"
        DependentValuePath="value"
        IndependentValuePath="months">
        <charting:ColumnSeries.DataPointStyle>
            <Style TargetType="charting:ColumnDataPoint">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="charting:ColumnDataPoint">
                            <Border
                                x:Name="Root"
                                Width="20"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Opacity="0">
                                <Grid Background="{TemplateBinding Background}">
                                    <Rectangle
                                        x:Name="SelectionHighlight"
                                        Width="20"
                                        Fill="Red"
                                        Opacity="0" />
                                    <Rectangle
                                        x:Name="MouseOverHighlight"
                                        Width="20"
                                        Fill="White"
                                        Opacity="0" />
                                </Grid>
                                <ToolTipService.ToolTip>
                                    <ContentControl Content="{TemplateBinding FormattedDependentValue}" />
                                </ToolTipService.ToolTip>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.1" />
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0"
                                                    Storyboard.TargetName="MouseOverHighlight"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="0.6" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.1" />
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Unselected" />
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0"
                                                    Storyboard.TargetName="SelectionHighlight"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="0.6" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="RevealStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.001" />
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Shown">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0"
                                                    Storyboard.TargetName="Root"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="1" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Hidden">
                                            <Storyboard>
                                                <DoubleAnimation
                                                    Duration="0"
                                                    Storyboard.TargetName="Root"
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="0" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </charting:ColumnSeries.DataPointStyle>
    </charting:ColumnSeries>
</charting:Chart>

尽管宽度可以通过样式更改，但在我看来，更好的方法是将集合的计数设置为适应数量。如你所知，宽度实际上可以自动计算，列的原因看起来很宽，因为它只有两条记录，平均有十二条记录＆＃39;地点。我们可以创建12条记录，但只有2条和9条具有其他可以设置为0的值。代码如下：

private void LoadChartContents()
{
    List<Report> lstSource = new List<Report>();
    for (int i = 1; i <= 12; i++)
    {
        if (i == 2)
        {
            lstSource.Add(new Report() { months = 2, value = 10 });
        }
        if (i == 9)
        {
            lstSource.Add(new Report() { months = 9, value = 15 });
        }
        else
        {
            lstSource.Add(new Report() { months = i, value = 0 });
        }
    }
    (Chart.Series[0] as ColumnSeries).ItemsSource = lstSource;
    //lstSource.Add(new Report() { months = 2, value = 10 });
    //lstSource.Add(new Report() { months = 9, value = 15 }); 
    //(Chart.Series[0] as ColumnSeries).IndependentAxis = new LinearAxis { Minimum = 1, Maximum = 12, Orientation = AxisOrientation.X, Interval = 1 };
}

结果：

WinRT Xaml ToolKit更改Column Series中的列宽

1 个答案: