如何在LineChart上進行更改

Question

我在下面嘗試過，但無法正常工作。

<Charting:LineSeries Title="Line_1" Margin="0" 
FontSize="30" Tapped="LineSeries_Tapped" 
FontWeight="SemiBold"   BorderBrush="Red"  
IndependentValuePath="interval" 
DependentValuePath="size" IsSelectionEnabled="True">

 </Charting:Chart>

如何

1）更改IndependentValuePath和DependentValuePath的fontsize？ 上面的方法不起作用。
2）更改IndependentValuePath和DependentValuePath的顏色？ 上面的方法不起作用。
3）觸摸折線圖或折線圖時如何獲取IndependentValuePath和DependentValuePath的值？

-------編輯_2

I combine both styles you have provided:

<Charting:Chart 
x:Name="LineChart" Grid.Column="1" FontSize="16" VerticalAlignment="Top" 
HorizontalAlignment="Left" Margin="94,27,0,0" 
FontWeight="SemiBold"  Width="651" Height="506">

<Charting:LineSeries 
Title="Station1" Margin="0" FontSize="16" Foreground="Blue" FontWeight="SemiBold" IndependentValuePath="Q_interval" DependentValuePath="Q_size" IsSelectionEnabled="True">

<Charting:LineSeries.Style>

(1)
  <Style TargetType="Charting:LineSeries">

      <Setter Property="IsTabStop" Value="False" />
      <Setter Property="PolylineStyle">
          <Setter.Value>
             <Style TargetType="Polyline">
             <Setter Property="StrokeThickness" Value="3" />
             <Setter Property="StrokeMiterLimit" Value="1" />
             </Style>
          </Setter.Value>
      </Setter>

      <Setter Property="Template">
         <Setter.Value>
         <ControlTemplate TargetType="Charting:LineSeries">
            <Canvas x:Name="PlotArea">
               <Polyline
                   Style="{TemplateBinding PolylineStyle}"
                            Stroke="Blue"
                            Points="{TemplateBinding Points}" />
             </Canvas>
         </ControlTemplate>
        </Setter.Value>
      </Setter>
   </Style>                    
</Charting:LineSeries.Style>

(2)

<Charting:LineSeries.DataPointStyle>                        
<Style TargetType="Charting:LineDataPoint">                            
    <Setter Property="Width" Value="20" />
    <Setter Property="Height" Value="20" />
    <Setter Property="Background" Value="Blue"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
 </Style>
</Charting:LineSeries.DataPointStyle>

</Charting:LineSeries>              

</Charting:Chart>

用（1）和（2）我得到了點和筆畫。

謝謝

Answer 1

首先，對於LineSeries元素，要更改樣式的兩個屬性是DependentValueBinding和IndependentValueBinding 。

1）更改IndependentValuePath和DependentValuePath的fontsize？ 上面的方法不起作用。

對於IndependentValueBinding屬性的樣式，它是由LineSeries父元素Chart定義的，因此直接為LineSeris元素設置fontsize屬性將無效。 設置圖表元素的Fontsize將起作用。

<charting:Chart
   x:Name="LineChart"
   Title="Line Chart"
   Margin="70,0" 
   FontSize="30">

對於DependentValueBinding屬性，它實際上是一個PolyLine，沒有FontSize屬性。

2）更改IndependentValuePath和DependentValuePath的顏色？ 上面的方法不起作用。

對於IndependentValueBinding的顏色，它與fontsize屬性相同，只需為Chart元素設置Foreground屬性即可。 對於DependentValueBinding的顏色，應更改LineSeries ControlTemplate中的PolyLine的顏色。 更改PolyLine的Stroke屬性將起作用。

<charting:LineSeries.Style>
    <Style TargetType="charting:LineSeries">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="PolylineStyle">
            <Setter.Value>
                <Style TargetType="Polyline">
                    <Setter Property="StrokeThickness" Value="10" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="charting:LineSeries">
                    <Canvas x:Name="PlotArea">
                        <Polyline
                            Style="{TemplateBinding PolylineStyle}"
                            Stroke="Red"
                            Points="{TemplateBinding Points}" />
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</charting:LineSeries.Style>

3）觸摸折線圖或折線圖時如何獲取IndependentValuePath和DependentValuePath的值？

在點擊事件中，獲取選定的項目，並獲取您綁定到IndependentValueBinding和DependentValueBinding屬性的值。

if (line1.SelectedItem != null)
{
    NameValueItem seleteditem = line1.SelectedItem as NameValueItem;
    System.Diagnostics.Debug.WriteLine(seleteditem.Name);
    System.Diagnostics.Debug.WriteLine(seleteditem.Value);
}

這是包含您上面想要的功能的完整代碼，請嘗試如上所述設置屬性。

Xaml代碼

<charting:Chart
    x:Name="LineChart"
    Title="Line Chart"
    Margin="70,0"
    Foreground="Red"
    FontSize="30">
    <charting:LineSeries
        x:Name="line1"
        Title="Population in 2005"
        DependentValueBinding="{Binding Value}"
        IndependentValueBinding="{Binding Name}"
        IsSelectionEnabled="True"
        Tapped="LineSeries_Tapped">
        <charting:LineSeries.Style>
            <Style TargetType="charting:LineSeries">
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="PolylineStyle">
                    <Setter.Value>
                        <Style TargetType="Polyline">
                            <Setter Property="StrokeThickness" Value="10" />
                            <Setter Property="StrokeMiterLimit" Value="1" />
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="charting:LineSeries">
                            <Canvas x:Name="PlotArea">
                                <Polyline
                                    Style="{TemplateBinding PolylineStyle}"
                                    Stroke="Red"
                                    Points="{TemplateBinding Points}" />
                            </Canvas>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </charting:LineSeries.Style>
    </charting:LineSeries>     
</charting:Chart>

后面的代碼

public sealed partial class MainPage : Page
{
    private Random _random = new Random();
    public MainPage()
    {
        this.InitializeComponent();
        var items1 = new List<NameValueItem>();
        var items2 = new List<NameValueItem>();
        var items3 = new List<NameValueItem>();
        for (int i = 0; i < 3; i++)
        {
            items1.Add(new NameValueItem { Name = "Name" + i, Value = _random.Next(10, 100) });   
        }
        this.RunIfSelected(this.LineChart, () => ((LineSeries)this.LineChart.Series[0]).ItemsSource = items1);     

    }


    private void RunIfSelected(UIElement element, Action action)
    {
        action.Invoke();
    }

    private void LineSeries_Tapped(object sender, TappedRoutedEventArgs e)
    {
        if (line1.SelectedItem != null)
        {
            NameValueItem seleteditem = line1.SelectedItem as NameValueItem;
            System.Diagnostics.Debug.WriteLine(seleteditem.Name);
            System.Diagnostics.Debug.WriteLine(seleteditem.Value);
        }

    }
}
public class NameValueItem
{
    public string Name { get; set; }
    public int Value { get; set; }
}

Answer 2

為了擴大點，可以如下更新LineDataPoint樣式。 更改Width和Height屬性將起作用。 控件模板中“橢圓”的“ Width和“ Height定義的屬性。

<charting:Chart
        x:Name="LineChart"
        Title="Line Chart"
        Margin="70,0"
        Foreground="Red"
        FontSize="10">
        <charting:LineSeries
            x:Name="line1"
            Title="Population in 2005"
            DependentValueBinding="{Binding Value}"
            IndependentValueBinding="{Binding Name}"
            IsSelectionEnabled="True"
            Tapped="LineSeries_Tapped" >
            <charting:LineSeries.DataPointStyle>
                <Style TargetType="charting:LineDataPoint"> 
                    <Setter Property="Width" Value="20" />
                    <Setter Property="Height" Value="20" />                      
                </Style>
            </charting:LineSeries.DataPointStyle>
        </charting:LineSeries>
    </charting:Chart>