WPF Toolkit 之 AreaSeries chart with DateTime Axis

本文链接：https://blog.csdn.net/Kevin__lin/article/details/20696091

By default, the WPF Toolkit chart displays physical points for each datapoint in the series. You can turn this off by setting the data point style:

				var newSeries = new AreaSeries()
				                	{
										Title = categoryToAllocationList.Key,
										Opacity = 1,
										IndependentValuePath = "TimeSpan",
				                		DependentValuePath = "AllocatedCores",
                                        ItemsSource = categoryToAllocationList.Value,
				                		HorizontalContentAlignment = HorizontalAlignment.Left
				                	};
			    
                //Don't display physical points for each data point
				var dataPointOpacitySetter = new Setter(OpacityProperty, 0.0);
				var backgroundSetter = new Setter(BackgroundProperty, brushes[count]);
				newSeries.DataPointStyle = new Style(typeof (AreaDataPoint))
				                           	{
												Setters = { dataPointOpacitySetter, backgroundSetter }
				                           	};

                //Make sure the color is not transparent among multiple area serieses
				var pathOpacitySetter = new Setter(OpacityProperty, 1.0);
				newSeries.PathStyle = new Style(typeof (Path))
				                      	{
											Setters = { pathOpacitySetter }
				                      	};
				
				myGridUsageChart.Series.Add(newSeries);

Please note TimeSpan property must be DateTime type.

<DVC:Chart Name="myXXXChart" Title="XXX Chart" 
                  LegendTitle="XXX XXX" Margin="8,12,12,17" Grid.Column="1">
            
            <DVC:Chart.Axes>
                <DVC:DateTimeAxis Orientation="X" IntervalType="Hours" Interval="1">
                    <DVC:DateTimeAxis.AxisLabelStyle>
                        <Style TargetType="DVC:DateTimeAxisLabel">
                            <Setter Property="StringFormat" Value="{}{0:HH:mm}" />
                        </Style>
                    </DVC:DateTimeAxis.AxisLabelStyle>
                </DVC:DateTimeAxis>
                <DVC:LinearAxis Orientation="Y" ShowGridLines="False" 
                                Visibility="Visible" />
            </DVC:Chart.Axes>
            <DVC:Chart.Series>
                <DVC:AreaSeries Title="Series 1" IndependentValuePath="TimeSpan" DependentValuePath="AllocatedCores" Background="Orange" >
                </DVC:AreaSeries>

                <DVC:AreaSeries Title="Series 2" IndependentValuePath="TimeSpan" DependentValuePath="AllocatedCores" Background="Green" >
                    
                </DVC:AreaSeries>
            </DVC:Chart.Series>
        </DVC:Chart>