silverlight 图表

实现如下图表样式：

 

添加SLVisifire.Charts.dll引用

命名空间：

 xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"

 

 <vc:Chart   
    Width="490" Height="290" Theme="Theme1" ShadowEnabled="True" CornerRadius="7,7,0,0" BorderThickness="0.5"         
    BorderBrush="Gray" AnimatedUpdate="true" >

                    <vc:Chart.Titles>
                        <vc:Title Text="Athens 2004 Olympics" FontFamily="Arial" FontSize="14"/>
                    </vc:Chart.Titles>

                    <vc:Chart.PlotArea>
                        <vc:PlotArea CornerRadius="0,14,0,0" BorderThickness="0,1,1,0" BorderColor="LightGray" />
                    </vc:Chart.PlotArea>

                    <vc:Chart.AxesX>
                        <vc:Axis Title="Country">
                            <vc:Axis.AxisLabels>
                                <vc:AxisLabels Interval="1"/>
                            </vc:Axis.AxisLabels>
                        </vc:Axis>
                    </vc:Chart.AxesX>

                    <vc:Chart.AxesY>
                        <vc:Axis AxisMinimum="0" AxisMaximum="60" Title="Gold Medals Won"/>
                    </vc:Chart.AxesY>

                    <vc:Chart.Series>
                        <vc:DataSeries RenderAs="Column" LabelEnabled="True">
                            <vc:DataSeries.DataPoints>
                                <vc:DataPoint AxisXLabel="USA" YValue="50"/>
                                <vc:DataPoint AxisXLabel="China" YValue="35"/>
                                <vc:DataPoint AxisXLabel="Russia" YValue="27"/>
                                <vc:DataPoint AxisXLabel="Australia" YValue="17"/>
                                <vc:DataPoint AxisXLabel="Japan" YValue="16"/>
                            </vc:DataSeries.DataPoints>
                        </vc:DataSeries>
                    </vc:Chart.Series>
                </vc:Chart>

 

 

方案二：

前后台交互

 <vc:Chart   
    Width="490" Height="290" Theme="Theme1" ShadowEnabled="True" CornerRadius="7,7,0,0" BorderThickness="0.5"         
    BorderBrush="Gray" AnimatedUpdate="true" x:Name="Chart_Gold" >

                    <vc:Chart.Titles>
                        <vc:Title Text="Athens 2004 Olympics" FontFamily="Arial" FontSize="14"/>
                    </vc:Chart.Titles>

                    <vc:Chart.PlotArea>
                        <vc:PlotArea CornerRadius="0,14,0,0" BorderThickness="0,1,1,0" BorderColor="LightGray" />
                    </vc:Chart.PlotArea>

                    <vc:Chart.AxesX>
                        <vc:Axis Title="Country">
                            <vc:Axis.AxisLabels>
                                <vc:AxisLabels Interval="1"/>
                            </vc:Axis.AxisLabels>
                        </vc:Axis>
                    </vc:Chart.AxesX>

                    <vc:Chart.AxesY>
                        <vc:Axis AxisMinimum="0" AxisMaximum="60" Title="Gold Medals Won"/>
                    </vc:Chart.AxesY>

                    <vc:Chart.Series>
                        <vc:DataSeries RenderAs="Column" LegendText="" AxisYType="Primary" LabelEnabled="True">
                            <vc:DataSeries.DataPoints>
                               
                            </vc:DataSeries.DataPoints>
                        </vc:DataSeries>                      
                    </vc:Chart.Series>
                </vc:Chart>

 

后天代码

 public class Gold
    {
        public int USAGold { set; get; }
        public int ChinaGold { set; get; }
        public int RussiaGold { set; get; }
        public int AustraliaGold { set; get; }
        public int JapanGold { set; get; }       
    }

 

 public partial class ChartControl : UserControl
    {
               
        public ChartControl()
        {
            InitializeComponent();

 

            Gold objGold=new Gold{ USAGold=50, ChinaGold=35, RussiaGold=27, AustraliaGold=17, JapanGold=16};

            this.Chart_Gold.Series[0].DataPoints.Add(GetDataPointByData("USA", "USA", objGold.USAGold.ToString()));
            this.Chart_Gold.Series[0].DataPoints.Add(GetDataPointByData("China", "China" , objGold.ChinaGold.ToString()));
            this.Chart_Gold.Series[0].DataPoints.Add(GetDataPointByData("Russia", "Russia" , objGold.RussiaGold.ToString()));
            this.Chart_Gold.Series[0].DataPoints.Add(GetDataPointByData("Australia", "Australia" , objGold.AustraliaGold.ToString()));
            this.Chart_Gold.Series[0].DataPoints.Add(GetDataPointByData("Japan", "Japan" , objGold.JapanGold.ToString()));

        }

        private DataPoint GetDataPointByData(String xlabel, String xtip, String yValue)
        {
            DataPoint pt = new DataPoint();
            pt.AxisXLabel = xlabel;

            pt.ToolTipText = xtip + "," + yValue;
            pt.YValue = Convert.ToDouble(yValue);
            return pt;
        }
    }