2017-10-06 63 views
1

我使用的是winrt xaml工具包列表圖表,我想爲度數創建圖表,因此我需要爲列表中的每個名稱設置最小值和最大值,爲此找到一條途徑。這裏是我的代碼:如何在UWP圖表上設置兩值列

的XAML:

<charting:Chart x:Name="chart" FlowDirection="RightToLeft" HorizontalAlignment="Center" Width="800" VerticalAlignment="Top" Height="500" > 
    <charting:ColumnSeries Title="month" IndependentValuePath="Name" DependentValuePath="Amount" IsSelectionEnabled="True"/> 
</charting:Chart> 

C#

private void LoadChart() 
{ 
    List<weather> list = new List<weather>(); 
    list.Add(new weather() { Name = "s1", Amount = 5.5 }); 
    (chart.Series[0] as ColumnSeries).ItemsSource = list; 
} 

我希望它是這樣一個在這樣的畫面: enter image description here

+0

你不能做到這一點與'ColumnSeries'。完成此操作的_hackish_方法是使用帶有兩個'SeriesDefinition'的StackedColumnSeries',並將其中一個的顏色設置爲透明。 – jsanalytics

回答

1

這裏,試試這個XAML只樣品:

enter image description here

XAML:

<Page x:Class="App8.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:chart="using:WinRTXamlToolkit.Controls.DataVisualization.Charting" 
    xmlns:local="using:App8" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" Loaded="Page_Loaded"> 

    <Page.Resources> 

     <local:WeatherCollection x:Key="data1"> 
      <local:Weather Month="Jan" MinAmount="1" MaxAmount="8"/> 
      <local:Weather Month="Feb" MinAmount="3" MaxAmount="9"/> 
      <local:Weather Month="Mar" MinAmount="7" MaxAmount="10"/> 
      <local:Weather Month="Apr" MinAmount="8" MaxAmount="11"/> 
      <local:Weather Month="May" MinAmount="10" MaxAmount="12"/> 
      <local:Weather Month="Jun" MinAmount="13" MaxAmount="12"/> 
      <local:Weather Month="Jul" MinAmount="15" MaxAmount="11"/> 
      <local:Weather Month="Aug" MinAmount="12" MaxAmount="10"/> 
      <local:Weather Month="Sep" MinAmount="10" MaxAmount="9"/> 
      <local:Weather Month="Oct" MinAmount="9" MaxAmount="8"/> 
      <local:Weather Month="Nov" MinAmount="7" MaxAmount="7"/> 
      <local:Weather Month="Dec" MinAmount="3" MaxAmount="6"/> 
     </local:WeatherCollection> 

     <Style x:Key="Style1" TargetType="chart:ColumnDataPoint"> 
      <Setter Property="Background" Value="Transparent"/> 
     </Style> 

    </Page.Resources> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

     <chart:Chart Title="Sample Chart"> 
      <chart:StackedColumnSeries> 
       <chart:SeriesDefinition ItemsSource="{StaticResource data1}" 
             DependentValuePath="MinAmount" 
             DataPointStyle="{StaticResource Style1}" 
             IndependentValuePath="Month"/> 
       <chart:SeriesDefinition ItemsSource="{StaticResource data1}" 
             DependentValuePath="MaxAmount" 
             IndependentValuePath="Month" 
             Title="Temp(C)"/> 
      </chart:StackedColumnSeries> 
     </chart:Chart> 

    </Grid> 
</Page> 

型號/視圖模型:

public class WeatherCollection : ObservableCollection<Weather> 
{ 
} 
public class Weather 
{ 
    public string Month { get; set; } 
    public double MaxAmount { get; set; } 
    public double MinAmount { get; set; } 
}