如何在折线图上进行更改

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 的字体大小？以上无效。
2) 更改IndependentValuePath 和DependentValuePath 的颜色？以上无效。
3) 触摸折线图的线或点时如何获取IndependentValuePath和DependentValuePath的值？

-------- Edit_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) change the fontsize for the IndependentValuePath and DependentValuePath? The above is not working.

对于IndependentValueBinding属性的样式，是由LineSeries父元素Chart定义的，所以直接设置fontsize属性 ] 对于 LineSeris 元素将不起作用。为图表元素设置 Fontsize 即可。

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

对于DependentValueBinding属性，其实就是折线，没有FontSize属性。

2) Change the color of the IndependentValuePath and DependentValuePath? The above is not working.

对于IndependentValueBinding的颜色，与fontsize属性相同，只需为Chart元素设置Foreground属性 . 对于DependentValueBinding的颜色，应该改变LineSeries的ControlTemplate中的PolyLine的颜色。将 Stroke 属性更改为 PolyLine 即可。

<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) How to get the value of the IndependentValuePath and DependentValuePath when the line or point of line chart is touched?

在点击事件中，获取所选项目并获取绑定到 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 在控件模板中定义了 Ellipse 的属性。

<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>

如何在折线图上进行更改

How to make changes on LineChart

winrt-xaml

winrt-xaml-toolkit

uwp