Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
225
how to set background like this? who can help me?
posted

 

new hand ask question:how to set background like this pic?

 

Parents
  • 26458
    Offline posted

    You can use a template to re-style the chart's grid. Here's an example:

    <ig:XamChart Name="chart">
        <ig:XamChart.Legend>
            <ig:Legend Visible="False"/>
        </ig:XamChart.Legend>
            <ig:XamChart.Axes>
            <ig:Axis AxisType="PrimaryX">
                <ig:Axis.MajorGridline>
                    <ig:Mark Visible="False"/>
                </ig:Axis.MajorGridline>
            </ig:Axis>
            <ig:Axis AxisType="PrimaryY" Unit="2"/>
        </ig:XamChart.Axes>
        <ig:XamChart.Series>
            <ig:Series ChartType="Line" Fill="Black">
                <ig:Series.Marker>
                    <ig:Marker Format=" "/>
                </ig:Series.Marker>
                <ig:Series.DataPoints>
                    <ig:DataPoint Value="1"/>
                    <ig:DataPoint Value="3"/>
                    <ig:DataPoint Value="6"/>
                    <ig:DataPoint Value="4"/>
                    <ig:DataPoint Value="7"/>
                    <ig:DataPoint Value="9"/>
                    <ig:DataPoint Value="3"/>
                </ig:Series.DataPoints>
            </ig:Series>
        </ig:XamChart.Series>
               
        <ig:XamChart.Scene>
            <ig:Scene>
                <ig:Scene.GridArea>
                    <ig:GridArea>
                        <ig:GridArea.Template>
                            <ControlTemplate TargetType="ig:GridArea">
                                <Grid>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <Border Background="Red" Grid.Row="0"/>
                                        <Border Background="Yellow" Grid.Row="1"/>
                                        <Border Background="Lime" Grid.Row="2"/>
                                        <Border Background="Lime" Grid.Row="3"/>
                                        <Border Background="Yellow" Grid.Row="4"/>
                                        <Border Background="Red" Grid.Row="5"/>
                                    </Grid>
                                    <ContentPresenter/>
                                </Grid>
                            </ControlTemplate>
                        </ig:GridArea.Template>
                    </ig:GridArea>
                </ig:Scene.GridArea>
            </ig:Scene>
        </ig:XamChart.Scene>
    </ig:XamChart>

  • 225
    posted in reply to Max Rivlin [Infragistics]

    i so glod you can answer my question.first ,other question is no line and no cicle.

    thanks again you patience,by the way ,i want the lable like that chart:

       <Grid x:Name="LayoutRoot">
            <igWebChart:XamWebChart HorizontalAlignment="Left" Name="xamWebChart1" VerticalAlignment="Top" >
                <igWebChart:XamWebChart.Legend>
                    <igWebChart:Legend Visibility="Collapsed">
                    </igWebChart:Legend>
                </igWebChart:XamWebChart.Legend>
                <igWebChart:XamWebChart.Axes>
                    <igWebChart:Axis AxisType="PrimaryX">
                        <igWebChart:Axis.MajorGridline>
                            <igWebChart:GridlineGroup  Visibility="Visible">
                            </igWebChart:GridlineGroup>
                        </igWebChart:Axis.MajorGridline>
                    </igWebChart:Axis>
                    <igWebChart:Axis AxisType="PrimaryY" Unit="2">
                    </igWebChart:Axis>
                </igWebChart:XamWebChart.Axes>
                <igWebChart:XamWebChart.Series>
                    <igWebChart:Series ChartType="Line" Fill="Black" Opacity="1"  >
                            <igWebChart:Series.Marker>
                                <igWebChart:Marker Format="" Type="Circle" ></igWebChart:Marker>
                            </igWebChart:Series.Marker>
                        <igWebChart:Series.DataPoints>
                            <igWebChart:DataPoint Value="1" Label="a"/>
                            <igWebChart:DataPoint Value="4" Label="b"/>
                            <igWebChart:DataPoint Value="6" Label="c"/>
                            <igWebChart:DataPoint Value="11" Label="d"/>
                            <igWebChart:DataPoint Value="7" Label="e"/>
                            <igWebChart:DataPoint Value="19" Label="f"/>
                        </igWebChart:Series.DataPoints>
                    </igWebChart:Series>
                </igWebChart:XamWebChart.Series>
               
                <igWebChart:XamWebChart.Scene>
                    <igWebChart:Scene>
                        <igWebChart:Scene.GridArea>
                            <igWebChart:GridArea>
                                <igWebChart:GridArea.Template>
                                    <ControlTemplate TargetType="igWebChart:GridArea">
                                        <Grid>
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                </Grid.RowDefinitions>
                                                <Border Background="Red" Grid.Row="0"/>
                                                <Border Background="Yellow" Grid.Row="1"/>
                                                <Border Background="Lime" Grid.Row="2"/>
                                                <Border Background="Lime" Grid.Row="3"/>
                                                <Border Background="Yellow" Grid.Row="4"/>
                                                <Border Background="Red" Grid.Row="5"/>
                                            </Grid>
                                            <ContentPresenter/>
                                        </Grid>
                                    </ControlTemplate>
                                </igWebChart:GridArea.Template>
                            </igWebChart:GridArea>
                        </igWebChart:Scene.GridArea>
                    </igWebChart:Scene>
                </igWebChart:XamWebChart.Scene>
               
            </igWebChart:XamWebChart>

  • 26458
    Verified Answer
    Offline posted in reply to jean

    The template will work for the WPF chart, but not for Silverlight. For the silverlight chart, you have to modify the template to use a Canvas instead of a ContentPresenter:

    <ControlTemplate TargetType="igWebChart:GridArea">
        <Grid>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Border Background="Red" Grid.Row="0" />
                <Border Background="Yellow" Grid.Row="1" />
                <Border Background="Lime" Grid.Row="2"/>
                <Border Background="Lime" Grid.Row="3"/>
                <Border Background="Yellow" Grid.Row="4"/>
                <Border Background="Red" Grid.Row="5" />
            </Grid>
            <Canvas Name="RootElement"/>
        </Grid>
    </ControlTemplate>

    The labels can be rotated like this:
    <igWebChart:Axis AxisType="PrimaryX">
        <igWebChart:Axis.Label>
            <igWebChart:LabelGroup Angle="-70" DistanceFromAxis="6"/>
        </igWebChart:Axis.Label>
    </igWebChart:Axis>

    If you want dates for the labels, you can use those dates as label strings, when you add data points to the series.
    DataPoint Value="1" Label="10:45"

  • 225
    posted in reply to Max Rivlin [Infragistics]

     

    mychart  so ugly

      <igWebChart:Axis AxisType="PrimaryY" Maximum="130" Minimum="20" AutoRange="True" Unit="30">
                                                <igWebChart:Axis.Label>
                                                    <igWebChart:LabelGroup Angle="-30" >
                                                    </igWebChart:LabelGroup>
                                                </igWebChart:Axis.Label>
                                                <igWebChart:Axis.MajorGridline>
                                                    <igWebChart:GridlineGroup Visibility="Visible" StrokeThickness="0"></igWebChart:GridlineGroup>
                                                </igWebChart:Axis.MajorGridline>
                                            </igWebChart:Axis>
                                        </igWebChart:XamWebChart.Axes>

    how can i set the YAxes for datasource like MIN Max and so on .

    when i selected second row

Reply Children