0

我正在构建一个使用 Windows 8 Metro XAML 预览控件的应用程序。我已经下载并检查了示例应用程序，但它主要使用代码隐藏来定义图表所需的所有内容。我正在尝试用绑定完成类似的事情，但图表仍然是空的。实际上，他们得到了数据，但什么也没画（例如，我可以看到 RadPieChart 的边界线和 RadCartesianChart 的全零）。这是 RadPieChart 的代码：

<telerik:RadPieChart>
    <telerik:PieSeries ItemsSource="{Binding AssetsData}" />
</telerik:RadPieChart>

AssetsData 是这样定义的：

private ElementCollection<PieDataPoint> assetsData;
public ElementCollection<PieDataPoint> AssetsData
{
    get
    {
        return assetsData;
    }
    set
    {
        assetsData = value;
        Notify("AssetsData");
    }
}

填充数据，如下所示：

PieSeries series = new PieSeries();
series.RadiusFactor = 0.9;

foreach (var entry in dataSource)
{
    series.DataPoints.Add(new PieDataPoint() { Value = entry.Percentage, Label = entry.Title });
}

assetsData = series.DataPoints;

当我在示例应用程序中使用代码隐藏 (C#) 时，一切正常。我定义系列，将数据点添加到系列并将该系列添加到图表控件。当使用相同的数据并尝试像这样绑定时，它不起作用。

我在这里做错了什么？

我检查了集合中的值是否设置正确，并且它们是正确的（因为我使用的逻辑与我使用代码隐藏时的逻辑相同，所以实际上应该没有任何区别，而且没有）。

另外，有没有办法设置 RadCartesianChart 根据正在绘制的数据来缩放它的最小值和最大值？

4

2 回答 2

1

我也在控件方面苦苦挣扎，直到我意识到您必须以编程方式定义调色板时，我才设法让图表向我展示任何东西。目前我有这个例子，但下周我会在图表上做更多的工作，我可以为你发布一些更好的代码。但这至少可以让你开始！

            <Grid Height="520" Grid.Row="1" Margin="10">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>
          <StackPanel Grid.Row="0" Background="#007EA9" Height="auto" Width="500">
            <Border Background="#007EA9">
              <telerik:RadCartesianChart x:Name="barChart" Margin="0,6,0,0" Height="250" Width="230">
                <telerik:RadCartesianChart.HorizontalAxis>
                  <telerik:CategoricalAxis LabelFitMode="MultiLine">
                    <telerik:CategoricalAxis.LabelStyle>
                      <Style TargetType="TextBlock">
                        <Setter Property="MaxWidth" Value="10" />
                        <Setter Property="Margin" Value="4" />
                      </Style>
                    </telerik:CategoricalAxis.LabelStyle>
                  </telerik:CategoricalAxis>
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.VerticalAxis>
                  <telerik:LinearAxis Maximum="200" Minimum="0">
                    <telerik:LinearAxis.LabelStyle>
                      <Style TargetType="TextBlock">
                        <Setter Property="Width" Value="10" />
                        <Setter Property="TextAlignment" Value="Right" />
                      </Style>
                    </telerik:LinearAxis.LabelStyle>
                  </telerik:LinearAxis>
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.Grid>
                  <telerik:CartesianChartGrid MajorLinesVisibility="Y" />
                </telerik:RadCartesianChart.Grid>
              </telerik:RadCartesianChart>
            </Border>
          </StackPanel>
          <StackPanel Grid.Row="1" Height="auto" Width="500" Margin="0,35,0,0">
            <Border Background="#007EA9">
              <telerik:RadPieChart x:Name="pieChart" Margin="0,0,0,0" Height="250" Width="230" />
            </Border>
          </StackPanel>
        </Grid>

C# 代码

        private void CreateSuckyChart()
    {
        double value;

        pieChart.Palette = ChartPalettes.DefaultDark;
        barChart.Palette = ChartPalettes.DefaultDark;

        var data = new List<WBDataEntry> { new WBDataEntry { Data = "Benchpress", Value = 70 }, new WBDataEntry { Data = "Squats", Value = 15 }, new WBDataEntry { Data = "Lat pulls", Value = 205 }, new WBDataEntry { Data = "Lunges", Value = 55 } };
        var series = new BarSeries();
        series.CategoryBinding = new PropertyNameDataPointBinding("Date");
        series.ValueBinding = new PropertyNameDataPointBinding("Value"); 
        this.barChart.Series.Add(series);
        var series2 = new PieSeries();
        var labelDefinition = new ChartSeriesLabelDefinition();
        labelDefinition.Margin = new Thickness(-10, 0, 0, 0);
        labelDefinition.DefaultVisualStyle = this.Resources["PieChartLabelStyle"] as Style;
        series2.LabelDefinitions.Add(labelDefinition);
        series2.RadiusFactor = 0.7;
        series2.AngleRange = new AngleRange(-90, 360);

        this.pieChart.Series.Add(series2);

        foreach (WBDataEntry indicator in data) // Class WBDataEntry has two properties, Value and Date
        {
            series2.DataPoints.Add(new PieDataPoint() { Value = indicator.Value, Label = indicator.Data });

            series.DataPoints.Add(new CategoricalDataPoint() { Value = indicator.Value , Label = indicator.Data });

        }
    }
于 2012-06-28T13:44:43.453 回答
0

我看到您已经找到了解决方案，但我想我会在这里发布解决方案。这是我的xml：

<Grid>
    <Grid.Resources>
        <t:ChartPalette x:Key="CustomPalette">
            <t:ChartPalette.FillEntries>
                <t:PaletteEntryCollection>
                    <SolidColorBrush Color="Red"></SolidColorBrush>
                    <SolidColorBrush Color="Green"></SolidColorBrush>
                    <SolidColorBrush Color="Blue"></SolidColorBrush>
                    <SolidColorBrush Color="Purple"></SolidColorBrush>
                </t:PaletteEntryCollection>
            </t:ChartPalette.FillEntries>
            <t:ChartPalette.StrokeEntries>
                <t:PaletteEntryCollection>
                    <SolidColorBrush Color="Red"></SolidColorBrush>
                    <SolidColorBrush Color="Green"></SolidColorBrush>
                    <SolidColorBrush Color="Blue"></SolidColorBrush>
                    <SolidColorBrush Color="Purple"></SolidColorBrush>
                </t:PaletteEntryCollection>
            </t:ChartPalette.StrokeEntries>
        </t:ChartPalette>
    </Grid.Resources>

    <tpri:RadLegendControl LegendProvider="{Binding ElementName=pieChart}">
        <tpri:RadLegendControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </tpri:RadLegendControl.ItemsPanel>

        <tpri:RadLegendControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Ellipse Fill="{Binding Fill}" Stroke="{Binding Stroke}" StrokeThickness="1" Width="10" Height="10"/>
                    <TextBlock Text="{Binding Title}" Foreground="{Binding Fill}"  Margin="10" FontStyle="Italic"/>
                </StackPanel>
            </DataTemplate>
        </tpri:RadLegendControl.ItemTemplate>
    </tpri:RadLegendControl>

    <t:RadPieChart x:Name="pieChart" Palette="{StaticResource CustomPalette}">
        <t:PieSeries ItemsSource="{Binding ScoreCard}" RadiusFactor="0.8">
            <t:PieSeries.ValueBinding>
                <t:PropertyNameDataPointBinding PropertyName="Total"/>
            </t:PieSeries.ValueBinding>

            <t:PieSeries.LegendTitleBinding >
                <t:PropertyNameDataPointBinding PropertyName="Name"></t:PropertyNameDataPointBinding>
            </t:PieSeries.LegendTitleBinding>
        </t:PieSeries>
    </t:RadPieChart>
</Grid>

对于记分卡绑定，我有这个：

private ObservableCollection<TestQuestionResult> _scoreCard;
public ObservableCollection<TestQuestionResult> ScoreCard
{
    get { return _scoreCard; }
    set { _scoreCard = value; Notify("ScoreCard"); }
}

数据类如下所示：

public class TestQuestionResult
{
    public string Name { get; set; }
    public int Correct { get; set; }
    public int Incorrect { get; set; }
    public int Total { get; set; }
}

此方法生成用于测试的虚拟数据：

private void Init()
{
    var list = new ObservableCollection<TestQuestionResult>();
    var ran = new Random(-1);

    for (var ix = 0; ix < 7; ix++)
    {
        var tq = new TestQuestionResult()
        {
            Name = ix.ToString(),
            Correct = ran.Next(321, 932),
            Incorrect = ran.Next(321, 932),
        };

        tq.Total = tq.Correct + tq.Incorrect;
        list.Add(tq);
    }

    ScoreCard = list;
}

我希望这至少可以节省其他人我花在上面的时间。:)

于 2012-11-29T14:49:48.930 回答