0

我在下面尝试过，但它不起作用。

<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 的值？

-------- 编辑_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）我得到了点和中风。

谢谢

4

2 回答 2

1

首先，对于LineSeries元素，您要更改样式的两个属性是DependentValueBinding和IndependentValueBinding。

1) 更改 IndependentValuePath 和 DependentValuePath 的字体大小？以上不起作用。

IndependentValueBinding属性的样式是由LineSeries父元素定义的Chart，所以直接给元素设置属性fontsize是LineSeris不会生效的。设置Fontsize图表元素将起作用。

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

对于DependentValueBinding属性，它实际上是一条折线，没有FontSize属性。

2) 改变 IndependentValuePath 和 DependentValuePath 的颜色？以上不起作用。

的颜色IndependentValueBinding与fontsize属性相同，只需Foreground为Chart元素设置属性即可。对于 的颜色DependentValueBinding，它应该改变在 ControlTemplate 中的 PolyLine 的颜色LineSeries。更改将起作用的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) 触摸折线图的折线或点时如何获取 IndependentValuePath 和 DependentValuePath 的值？

在 tapped 事件中，获取选中项并获取绑定到 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; }
}
于 2016-09-05T10:05:55.950 回答
0

为了使点更大，您可以LineDataPoint按如下方式更新样式。更改WidthandHeight属性将起作用。控件模板中 Ellipse的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>
于 2016-09-12T07:19:21.033 回答