WPF Visifire使用 ---- 基礎篇一

引言：

　　由於項目中需要使用Visifire所以自己就寫了一些demo，大家一起共享！

基礎Visifire圖表的展示

1.Visifire的創建需要引用的DLL包【WPFToolkit.dll;WPFVisifire.Charts;WPFVisifire.Gauges(這個以后會用到)】

2.我們開始創建簡單的Visifire圖表

第一步：前台代碼

<Window x:Class="Wpf_Tray.VisifireWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vc="clr-namespace:Visifire.Charts;assembly=WPFVisifire.Charts"
        Title="VisifireWindow" Height="378" Width="536" WindowStartupLocation="CenterScreen">
    <Grid Name="LayoutRoot">
      <vc:Chart Name="chart" DockPanel.Dock="Left" Margin="0,40,0,2" />
      <Button Content="showChartData" Height="23" HorizontalAlignment="Left" Margin="24,8,0,0" Name="btn_showChartData" VerticalAlignment="Top" Width="97" Click="btn_showChartData_Click" />
       <Button Content="ExportToPng" Height="23" HorizontalAlignment="Left" Margin="134,8,0,0" Name="btn_ExportToPng" VerticalAlignment="Top" Width="88" Click="btn_ExportToPng_Click" />
        <Button Content="ExportChart" Height="23" HorizontalAlignment="Left" Margin="233,8,0,0" Name="btn_ExportChart" Click="btn_ExportChart_Click" VerticalAlignment="Top" Width="75" />
    </Grid>
</Window>

 

寫完后的一個顯示效果，如圖;

第二步：

實現后台綁定數據，上代碼：

/// <summary>
        /// 綁定數據
        /// </summary>
        private void BindData()
        {
            DataSet ds = DBSQLHelper.Search("select * from hospitalorg", null, CommandType.Text);
            BindChart(ds.Tables[0]);
        }

#region 綁定界面上的Chart
        /// <summary>
        /// 綁定界面上的Chart
        /// </summary>
        /// <param name="dt">Chart數據源</param>
        public void BindChart(DataTable dtChart)
        {
            //綁定Chart
            this.chart.Series.Clear();
            this.chart.Titles.Clear();

            this.chart.AnimationEnabled = true;
            this.chart.ThemeEnabled = true;
            this.chart.Width = 500;
            this.chart.Height = 300;

            //使Chart顯示三維                                           
            this.chart.View3D = true;

            DataSeries dataSeries = new DataSeries();
            //Chart的實例這是以餅圖顯示       Bubble    
            
            DataPoint datapoint = null;

            for (int i = 0; i < dtChart.Rows.Count; i++)
            {
                datapoint = new DataPoint();
                datapoint.AxisXLabel = dtChart.Rows[i]["hospitalName"].ToString();
                datapoint.YValue = Convert.ToDouble(dtChart.Rows[i]["hospitalId"].ToString());
                datapoint.Tag = dtChart.Rows[i]["hospitalId"].ToString();
                //DataPoint被點擊執行事件 
                datapoint.MouseLeftButtonDown += new MouseButtonEventHandler(datapoint_MouseLeftButtonDown); 
                dataSeries.DataPoints.Add(datapoint);
            }
            //綁定當鼠標放上去顯示的信息     
            dataSeries.LabelAngle = -30;
            this.chart.Series.Add(dataSeries);

            Title title = new Title();
            title.Text = "某某醫院...";
            this.chart.Titles.Add(title);

            this.chart.ShadowEnabled = true;
        }

        #endregion

　　

        public VisifireWindow()
        {
            InitializeComponent(); 
            BindData();
        }

綁定后的效果，如圖：

這是綁定一列的！

第三步：

如圖，有三個按鈕，‘showChartData’，‘ExportToPng’

1.showChartData，主要是多列數據綁定，實現效果如圖：

上代碼：

#region 可以顯示多列，綁定界面Chart
        
        private void BindMoreColumnChart(DataTable dtChart)
        {
            this.chart.Series.Clear();

            this.chart.AnimationEnabled = true;

            this.chart.View3D = true;

            DataSeries dataSeries = new DataSeries();

            dataSeries.RenderAs = RenderAs.Bar;

            dataSeries.LabelEnabled = true;

            dataSeries.LegendText = "最小值";//圖例顯示的信息

            dataSeries.LabelText = "#AxisXLabel, #YValue";

            DataPoint datapoint;

            for (int i = 0; i < dtChart.Rows.Count; i++)
            {

                datapoint = new DataPoint();

                datapoint.AxisXLabel = dtChart.Rows[i]["job_id"].ToString();

                datapoint.YValue = Convert.ToDouble(dtChart.Rows[i]["min_lvl"].ToString());

                dataSeries.DataPoints.Add(datapoint);

            }

            this.chart.Series.Add(dataSeries);




            DataSeries dataSeries1 = new DataSeries();

            dataSeries1.RenderAs = RenderAs.Bar;

            dataSeries1.LabelEnabled = true;

            DataPoint datapoint1;

            for (int i = 0; i < dtChart.Rows.Count; i++)
            {

                datapoint1 = new DataPoint();

                datapoint1.AxisXLabel = dtChart.Rows[i]["job_id"].ToString();

                datapoint1.YValue = Convert.ToDouble(dtChart.Rows[i]["max_lvl"].ToString());

                dataSeries1.DataPoints.Add(datapoint1);
            }

            dataSeries1.LegendText = "最大值";

            dataSeries1.LabelText = "#AxisXLabel, #YValue";

            this.chart.Series.Add(dataSeries1);

            this.chart.ShadowEnabled = true;
        }
        #endregion

2.ExportTopng，是將visifire當前實現的圖表導成png，上代碼:

  #region ExportToPng
        /// <summary>
        /// ExportToPng
        /// </summary>
        /// <param name="path"></param>
        /// <param name="surface"></param>
        public void ExportToPng(Uri path,Visifire.Charts.Chart surface)
        {
            if (path == null) return;
            //Save current canvas transform 保存當前畫布變換
            Transform transform = surface.LayoutTransform;
            //reset current transform (in case it is scaled or rotated) 重設當前畫布（如果縮放或旋轉）
            surface.LayoutTransform = null;
            //Create a render bitmap and push the surface to it 創建一個渲染位圖和表面
            RenderTargetBitmap renderBitmap = new RenderTargetBitmap(
                (int)surface.Width,
                (int)surface.Height,
                96d, 96d,
                PixelFormats.Pbgra32);
            renderBitmap.Render(surface);
            // Create a file stream for saving image
            using (FileStream outStream = new FileStream(path.LocalPath,FileMode.Create))
            {
                //Use png encoder for our data
                PngBitmapEncoder encoder = new PngBitmapEncoder();
                // push the rendered bitmap to it
                encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
                // save the data to the stream
                encoder.Save(outStream);
            }
            // Restore previously saved layout 恢復以前保存布局
            surface.LayoutTransform = transform;
        }
        #endregion

#region 將Visifire圖表保存為圖片  http://www.visifire.com/blog/page/15/

        private void btn_ExportToPng_Click(object sender, RoutedEventArgs e)
        {
            ExportToPng(new Uri("D:/Visifire.png"), this.chart);
        }
#endregion

【這只是基礎，大家可以了解下，想起昨天看大本營了，快樂未完待續，我想說，學習未完待續！大家可以看看visifire官方網站的文檔進行學習，http//www.visifire.com/】