使用 Visifire 製作透明圖表

Visifire是一个基于Silverlight & WPF的可视化图表组件,使用Visifire可以轻松创建出可嵌入桌面程序或Web程序的动态图表。

    Visifire是一个基于Silverlight & WPF的可视化图表组件,使用Visifire可以轻松创建出可嵌入桌面程序或Web程序的动态图表。

    使用Visifire创建的图表,默认的是带边框、背景色(使用Xaml代码创建的图表默认背景是透明的,使用C#代码创建的图表默认背景色是白色的)、坐标和图表格(ChartGrid)的,有时为了实现特殊的需求,需要将图表的背景做成透明的。在Xaml代码中,可以通过设置Chart的“BorderThickness”属性为“0”和Axis的“Enabled”属性为“False”轻松实现透明效果。下面我们通过C#代码来实现Visifire图表的透明效果。

    首页使用下面的代码创建一个图表

01 Chart chart = new Chart();
02 chart.Width = 400;
03 chart.Height = 300;
04
05 DataSeries dataSeries = new DataSeries();
06 dataSeries.RenderAs = RenderAs.Column;
07 dataSeries.DataPoints.Add(new DataPoint
08 {
09           AxisXLabel = "Wall-Mart",
10           YValue = 351139
11 }
);
12 dataSeries.DataPoints.Add(new DataPoint
13 {
14           AxisXLabel = "Exxon Mobil",
15           YValue = 345254
16 }
);
17 dataSeries.DataPoints.Add(new DataPoint
18 {
19           AxisXLabel = "Shell",
20           YValue = 318845
21 }
);
22 dataSeries.DataPoints.Add(new DataPoint
23 {
24           AxisXLabel = "BP",
25           YValue = 274316
26 }
);
27 dataSeries.DataPoints.Add(new DataPoint
28 {
29          AxisXLabel = "General Motors",
30           YValue = 207349
31 }
);
32
33 chart.Series.Add(dataSeries);
34 chart.SetValue(Grid.ColumnProperty, 1);
35 LayoutRoot.Children.Add(chart);

去掉图表的边框和背景色,在上面的代码第3行后面加入下面的代码

去掉坐标轴,接着上第二段代码再加入下面的代码

1 //去掉X轴
2 Axis xaxis = new Axis();
3 xaxis.Enabled = false;
4 chart.AxesX.Add(xaxis);
5
6 //去掉Y轴
7 Axis yaxis = new Axis();
8 yaxis.Enabled = false;
9 chart.AxesY.Add(yaxis);

最后再去掉图表格,在第三段代码的第3行和第8行下面分别插入下面的代码

1 //插入第三段代码第3行后面
2 ChartGrid xgrid = new ChartGrid();
3 xgrid.Enabled = false;
4 xaxis.Grids.Add(xgrid);
5
6 //插入第三段代码第8行后面
7 ChartGrid ygrid = new ChartGrid();
8 ygrid.Enabled = false;
9 yaxis.Grids.Add(ygrid);

至此我们就将Visifire图表设置成透明的了。


為了你的幸福,我一直在努力!