通过前面基础篇一介绍后，我想大家应该对visifire有了一定的了解了吧，下面在给大家看一个visifire的效果图吧，如图所以：
这个效果是不是挺炫，想要实现这样的效果吗，哈哈，下面我就废话不多说了，直接上代码：
第一步：前台代码
<Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Background="White">
<!--第一个图表-->
<vc:Chart CornerRadius="10,10,0,0" BorderThickness="0,1,1,0" Margin="0,0,0,0" Padding="5,5,5,20"
HorizontalAlignment="Left" VerticalAlignment="Top" Theme="Theme1" Background="#FFF8F4FF"
ShadowEnabled="True" x:Name="Chart1" Width="679" Height="200" ScrollingEnabled="false">
<vc:Chart.Titles>
<vc:Title BorderThickness="1" Margin="0,0,0,5" ShadowEnabled="True" Padding="5" CornerRadius="4"
FontSize="12" Text="Interaction between two separate charts">
<vc:Title.Background>
<LinearGradientBrush>
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="White" Offset="1"></GradientStop>
</LinearGradientBrush>
</vc:Title.Background>
</vc:Title>
</vc:Chart.Titles>
<vc:Chart.TrendLines>
<vc:TrendLine Opacity="0.1" LineColor="Red" Orientation="Vertical" StartValue="1" EndValue="10"/>
<vc:TrendLine Opacity="0.1" LineColor="Green" Orientation="Vertical" StartValue="11" EndValue="20"/>
<vc:TrendLine Opacity="0.1" LineColor="Blue" Orientation="Vertical" StartValue="21" EndValue="30"/>
</vc:Chart.TrendLines>
<vc:Chart.AxesX>
<vc:Axis AxisMaximum="31" StartFromZero="true" IncludeZero="False" Enabled="false" Interval="2" LineThickness="0">
<vc:Axis.Grids>
<vc:ChartGrid Opacity="0.2" Interval="0.5"></vc:ChartGrid>
</vc:Axis.Grids>
</vc:Axis>
</vc:Chart.AxesX>
<vc:Chart.AxesY>
<vc:Axis LineThickness="0" TitleFontWeight = "Light" Title="Y-Axis" TitleFontSize = "12" >
<vc:Axis.Grids>
<vc:ChartGrid Opacity="0.2" Interval="2" ></vc:ChartGrid>
</vc:Axis.Grids>
</vc:Axis>
</vc:Chart.AxesY>
<vc:Chart.PlotArea>
<vc:PlotArea BorderBrush="#002147" BorderThickness="0" ShadowEnabled="false" >
<vc:PlotArea.Background>
<LinearGradientBrush>
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="White" Offset="1"></GradientStop>
</LinearGradientBrush>
</vc:PlotArea.Background>
</vc:PlotArea>
</vc:Chart.PlotArea>
</vc:Chart>
<!--第二个图表-->
<vc:Chart CornerRadius="10,0,10,10" BorderThickness="1,0,1,0" Padding="5,5,5,5" HorizontalAlignment="Left" VerticalAlignment="Top" Theme="Theme1" Background="#FFF8F4FF" ShadowEnabled="True" x:Name="Chart2" Width="680" Height="200" ScrollingEnabled="false">
<vc:Chart.TrendLines>
<vc:TrendLine Opacity="0.1" LineColor="Red" Orientation="Vertical" StartValue="1" EndValue="10"/>
<vc:TrendLine Opacity="0.1" LineColor="Green" Orientation="Vertical" StartValue="11" EndValue="20"/>
<vc:TrendLine Opacity="0.1" LineColor="Blue" Orientation="Vertical" StartValue="21" EndValue="30"/>
</vc:Chart.TrendLines>
<vc:Chart.AxesX>
<vc:Axis StartFromZero="true" AxisMaximum="31" IncludeZero="False" Interval="1" LineThickness="1" LineColor="Black" Title="Groups" TitleFontSize="14" >
<vc:Axis.Grids>
<vc:ChartGrid Opacity="0.2" Interval="0.5"></vc:ChartGrid>
</vc:Axis.Grids>
<vc:Axis.AxisLabels>
<vc:AxisLabels ></vc:AxisLabels>
</vc:Axis.AxisLabels>
<!--<vc:Axis.CustomAxisLabels>
<vc:CustomAxisLabels FontSize="12">
<vc:CustomAxisLabels.Labels>
<vc:CustomAxisLabel Text="Group1" From="1" To="10"/>
<vc:CustomAxisLabel Text="Group2" From="11" To="20"/>
<vc:CustomAxisLabel Text="Group3" From="21" To="30"/>
</vc:CustomAxisLabels.Labels>
</vc:CustomAxisLabels>
</vc:Axis.CustomAxisLabels>-->
</vc:Axis>
</vc:Chart.AxesX>
<vc:Chart.AxesY>
<vc:Axis LineThickness="0" TitleFontWeight = "Light" Title="Remarks" TitleFontSize = "14" >
<vc:Axis.Grids>
<vc:ChartGrid Opacity="0.2" Interval="2" ></vc:ChartGrid>
</vc:Axis.Grids>
<!--<vc:Axis.CustomAxisLabels>
<vc:CustomAxisLabels FontSize="10">
<vc:CustomAxisLabels.Labels>
<vc:CustomAxisLabel Text="Poor" From="20" To="20"/>
<vc:CustomAxisLabel Text="Average" From="40" To="40"/>
<vc:CustomAxisLabel Text="Good" From="50" To="68"/>
<vc:CustomAxisLabel Text="VeryGood" From="70" To="80"/>
<vc:CustomAxisLabel Text="Excellent" From="82" To="100"/>
</vc:CustomAxisLabels.Labels>
</vc:CustomAxisLabels>
</vc:Axis.CustomAxisLabels>-->
</vc:Axis>
</vc:Chart.AxesY>
<vc:Chart.PlotArea>
<vc:PlotArea BorderBrush="#002147" BorderThickness="0" ShadowEnabled="false" >
<vc:PlotArea.Background>
<LinearGradientBrush>
<GradientStop Color="White" Offset="0"></GradientStop>
<GradientStop Color="White" Offset="1"></GradientStop>
</LinearGradientBrush>
</vc:PlotArea.Background>
</vc:PlotArea>
</vc:Chart.PlotArea>
</vc:Chart>
</StackPanel>
</Grid>
第二步：后台代码：
1.create chart：在后台创建chart
#region Create a chart
public void CreateMyChart(DataTable dtChart, Chart chart, RenderAs renderAs, Double opacity)
{
//绑定Chart
chart.Series.Clear();
chart.Titles.Clear();
chart.ScrollingEnabled = false;
chart.AnimationEnabled = true;
chart.ThemeEnabled = true;
chart.View3D = true;
DataSeries dataSeries = new DataSeries();
//Chart的实例这是以饼图显示
// Set DataSeries property
dataSeries.RenderAs = renderAs;
dataSeries.Opacity = opacity;
dataSeries.Bevel = false;
dataSeries.MarkerType = Visifire.Commons.MarkerTypes.Triangle;
DataPoint datapoint;
for (int i = 0; i < dtChart.Rows.Count; i++)
{
datapoint = new DataPoint();
if (renderAs == RenderAs.Line)
{
datapoint.MarkerEnabled = true;
datapoint.MarkerSize = 8;
datapoint.MarkerColor = datapoint.Color;
}
datapoint.AxisXLabel = dtChart.Rows[i]["job_id"].ToString();
datapoint.YValue = Convert.ToDouble(dtChart.Rows[i]["max_lvl"].ToString());
dataSeries.DataPoints.Add(datapoint);
}
//绑定当鼠标放上去显示的信息
dataSeries.LabelText = "#AxisXLabel, #YValue";
chart.Series.Add(dataSeries);
Title title = new Title();
title.Text = "某某医院...";
chart.Titles.Add(title);
chart.IndicatorEnabled = true;
chart.ShadowEnabled = true;
}
#endregion
2.load ：加载时需要绑定chart，以及Plotarea的实现
View Code
public VisifireWindow2() { InitializeComponent(); DataSet ds = DBSQLHelper.Search("select * from jobs", null, CommandType.Text); CreateMyChart(ds.Tables[0], Chart1, RenderAs.Line, 1); CreateMyChart(ds.Tables[0], Chart2, RenderAs.Column, 1); Chart1.PlotArea.MouseMove += new EventHandler<PlotAreaMouseEventArgs>(PlotArea_MouseMove); Chart1.PlotArea.MouseLeave += new EventHandler<MouseEventArgs>(PlotArea_MouseLeave); Chart2.PlotArea.MouseMove += new EventHandler<PlotAreaMouseEventArgs>(PlotArea2_MouseMove); Chart2.PlotArea.MouseLeave += new EventHandler<MouseEventArgs>(PlotArea2_MouseLeave); }
3.plotarea：两个chart，mousemove和mouseleave事件的实现效果的关键代码
#region Chart2'PlotArea
/// <summary>
/// MouseMove event handler, it will enabled ShowIndicator for Chart1
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void PlotArea2_MouseMove(object sender, PlotAreaMouseEventArgs e)
{
Chart1.ShowIndicator(e.XValue, e.YValue);
}
/// <summary>
/// MouseLeave event handler, it will disabled ShowIndicator for Chart1
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void PlotArea2_MouseLeave(object sender, MouseEventArgs e)
{
Chart1.HideIndicator();
}
#endregion
#region Chart1'PlotArea
/// <summary>
/// MouseMove event handler, it will enabled ShowIndicator for Chart2
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void PlotArea_MouseMove(object sender, PlotAreaMouseEventArgs e)
{
Chart2.ShowIndicator(e.XValue, e.YValue);
}
/// <summary>
/// MouseLeave event handler, it will disabled ShowIndicator for Chart2
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void PlotArea_MouseLeave(object sender, MouseEventArgs e)
{
Chart2.HideIndicator();
}
#endregion
哈哈哈，这样就可以了，麻烦大家多提提意见哦！
