我想在UWP中创建一个折线图,LiveCharts是我的选择,但是当我测试其示例时,它的显示无效
我使用了此示例Sections,但不同的是我将它们放入了UserControl
。
Xaml:
<UserControl
x:Class="LiveChart.SectionsExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveCharts.Uwp"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" TextWrapping="Wrap">
<Bold>New in 0.7.0</Bold> You can now have axis sections to highlight a range of values
</TextBlock>
<Button Grid.Row="1" Height="30" Click="UpdateAllOnClick" HorizontalAlignment="Stretch">
Move All
</Button>
<lvc:CartesianChart Grid.Row="2" Series="{Binding SeriesCollection}">
<lvc:CartesianChart.AxisY>
<lvc:Axis Name="Axis">
<lvc:Axis.Sections>
<lvc:AxisSection Value="8.5" StrokeThickness="3" Stroke="#F9D648">
<lvc:AxisSection.Fill>
<SolidColorBrush Color="#A3A3FF" Opacity=".4"></SolidColorBrush>
</lvc:AxisSection.Fill>
</lvc:AxisSection>
<lvc:AxisSection Value="4" SectionWidth="4" Label="Good">
<lvc:AxisSection.Fill>
<SolidColorBrush Color="#CDCDCD" Opacity=".4"></SolidColorBrush>
</lvc:AxisSection.Fill>
</lvc:AxisSection>
<lvc:AxisSection Value="0" SectionWidth="4" Label="Bad">
<lvc:AxisSection.Fill>
<SolidColorBrush Color="#FF8585" Opacity=".4"></SolidColorBrush>
</lvc:AxisSection.Fill>
</lvc:AxisSection>
</lvc:Axis.Sections>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</UserControl>
CodeBehind:
namespace LiveChart
{
using System;
using System.Linq;
using LiveCharts;
using LiveCharts.Defaults;
using LiveCharts.Uwp;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
/// <summary>
/// The sections example.
/// </summary>
public sealed partial class SectionsExample : UserControl
{
/// <summary>
/// Initializes a new instance of the <see cref="SectionsExample"/> class.
/// </summary>
public SectionsExample()
{
this.InitializeComponent();
this.SeriesCollection = new SeriesCollection
{
new LineSeries
{
Values = new ChartValues<ObservableValue>
{
new ObservableValue(3),
new ObservableValue(5),
new ObservableValue(2),
new ObservableValue(7),
new ObservableValue(7),
new ObservableValue(4)
},
PointGeometrySize = 0,
StrokeThickness = 4,
Fill = new SolidColorBrush(Colors.Transparent)
},
new LineSeries
{
Values = new ChartValues<ObservableValue>
{
new ObservableValue(3),
new ObservableValue(4),
new ObservableValue(6),
new ObservableValue(8),
new ObservableValue(7),
new ObservableValue(5)
},
PointGeometrySize = 0,
StrokeThickness = 4,
Fill = new SolidColorBrush(Colors.Transparent)
}
};
this.DataContext = this;
}
/// <summary>
/// Gets or sets the series collection.
/// </summary>
public SeriesCollection SeriesCollection { get; set; }
/// <summary>
/// The update all on click.
/// </summary>
/// <param name="sender">
/// The sender.
/// </param>
/// <param name="e">
/// The e.
/// </param>
private void UpdateAllOnClick(object sender, RoutedEventArgs e)
{
var r = new Random();
foreach (var series in this.SeriesCollection)
{
foreach (var observable in series.Values.Cast<ObservableValue>())
{
observable.Value = r.Next(0, 10);
}
}
}
}
}
我得到这个结果:
每个人都有解决方案吗?我想知道这是LiveCharts中的错误,还是我应该设置一个属性来解决此问题?