安装OFC
在我们开始之前,你应该先下载ofc的压缩包。
下载地址在这里:http://teethgrinder.co.uk/open-flash-chart-2/downloads.php,下载里面的zip压缩包。
解压.zip文件,进入version-2目录,把open-flash-chart.swf这个文件复制到你的web目录的根目录下(其实任何目录都是可以的,只要你在使用的时候写对路径,但是这里我们为了方便,就放到根目录好了)。
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "mychart", "550", "200", "9.0.0", "expressInstall.swf", {"data-file":"datafile/line.aspx"});
</script>
<div id="mychart"> </div>
从两方面进行详细讲解:脚本swfobject.js和参数{"data-file":"datafile/line.aspx"}。
这里有个示例代码:代码下载: http://files.cnblogs.com/yaunion/testexample.rar
官方教程地址:http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php
OFC的一些属性和方法介绍
Chart Size
创建 flash object 时指定 chart 的大小,下面代码指定宽为 550 ,高為 200 ,
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "550", "200","9.0.0", "expressInstall.swf",{"data-file":"datafile/bar.aspx"});
</script>
也可以指定寬或高為 100% ,意為占滿整個瀏覽器窗口的寬度,或者高度
Data Lines
曲線圖,包括三種類型: Line( 平滑曲線 ) 、 LineDot( 帶實心點的曲線 ) 、 LineHollow( 帶空心點的曲線 ) 。如圖:
Width: 寬度,即曲線的粗細;
Dotsize: 實心點的大小;
Halosize: 空心點的大小;
如上圖中 LineDot 的實現代碼:
OpenFlashChart.LineDot line1 = new LineDot();
line1.Values = data1;
line1.HaloSize = 0;
line1.Width = 2;
line1.DotSize = 5;
Bar Chart
在 .NET 中沒有 bar_outline 。
Set_key 用來設置圖例,顏色與對應的 Bar 一致。 如 bar.Set_Key("Test",12);
Values 設置 Bar 的值,如:
List<double> values = new List<double>();
for (int i = 0; i < 13; i++)
{
values.Add(random.Next(i, i * 2));
}
bar.Values = values;
也可以在一個 chart 中顯示多組 Bar :如圖:
實現代碼如下:
Bar bar = new OpenFlashChart.Bar();
Random random = new Random();
bar.Colour = "#345";
bar.Set_Key("Test",12);
List<double> values = new List<double>();
List<string> aa=new List<string>();
for (int i = 0; i < 13; i++)
{
values.Add(random.Next(i, i * 2));
aa.Add(i.ToString()+" 月 ");
}
bar.Values = values;
Bar bar1 = new Bar();
bar1.Colour = "#ff0000";
bar1.Text = "test2";
List<double> bb = new List<double>();
for (int i = 0; i < 13; i++)
{
bb.Add(random.Next(i, i * 2)+6);
}
bar1.Values = bb;
chart.AddElement(bar1);
chart.AddElement(bar);
3D Bar Chart
X_Axis.Set3D() 方法設置 X 軸的 3D 效果,如 chart.X_Axis.Set3D(12); 時:Glass Bar Chart
Fade Bar Chart
.net 中沒有此類型。
Sketch Bars
在創建一個新的 Sketch Bar 時需要指定三個參數:
BarSketch bar = new OpenFlashChart.BarSketch("#ff0000", "#4f1", 4); 分別為 Bar 的顏色,外圍邊線的顏色, Offset ;
此外還可以但都設置這三個屬性,分別為:
bar.Colour 、 bar.OutlineColour 、 bar.offSet;
Offset 為 BarSketch 的整潔程度,默認值為 2. 如 bar.Offset =1 時 :
bar.Offset =9 時
Fillalpha 屬性設置當鼠標移上 Bar 時顏色變化的起始值,如 bar.Colour = "# ff0000 " ; bar.Fillalpha = 0.4; 當鼠標移上 Bar 時紅色從 0.4 到 1;
Bars+Lines
同時創建兩個 ( 或者多個 )Bar 對象和 Line 對象, 最后通過 chart.AddElement(); 將其都加入到 chart 中來顯示:
實現代碼如下:
Bar bar = new OpenFlashChart.Bar();
Random random = new Random();
bar.Colour = "#345";
bar.Fillalpha = 0.4;
bar.Set_Key("Test",12);
List<double> values = new List<double>();
for (int i = 0; i < 13; i++)
{
values.Add(random.Next(i, i * 2));
}
bar.Values = values;
List<double> data1 = new List<double>();
for (double i = 0; i < 6.2; i += 0.2)
{
data1.Add(Math.Sin(i) * 1.9 + 4);
}
OpenFlashChart.Line line1 = new Line();
line1.Values = data1;
line1.HaloSize = 0;
line1.Width = 2;
line1.DotSize = 5;
line1.Set_Key("Line1", 12);
line1.Colour = "#ff0000";
line 1 .DotStyleType.Tip="#val#%";// 鼠标悬浮时显示
chart.AddElement(line1);
chart.AddElement(bar);
Pie Chart
餅狀圖, Values 屬性設置各部分的值,如
List<PieValue> values = new List<PieValue>();
for (int i = 0; i < 12; i++)
{
values.Add(new PieValue(random.NextDouble(),"Pie"+i));
labels.Add(i.ToString());
}
values.Add(0.2);
pie.Values = values;
Colors 屬性設置顏色,如 pie.Colours = new string[] { "#00FA9A", "#FFFF00", "#0033FF", "#000000" }; 效果
Pie Chart Links
.net 中沒有此類型。
Scatter Chart
Mixed Scatter
High Low Close
.net 中沒有此類型。
Candle
.net 中沒有此類型。
X Axis
X Axis Labels
設置 X 軸的標簽 值:
List<string> aa=new List<string>();
for (int i = 0; i < 13; i++)
{
aa.Add(i.ToString()+" 月 ");
}
chart.X_Axis.Labels.Values=aa ; 如圖:
chart.X_Axis.Labels.SetLabels(x_axis); 没有上面的 Values 属性
chart.X_Axis.TickHeight = "10"; 如圖:
chart.X_Axis.Labels.Rotate 設置 X 軸標簽的旋轉方式,可選擇 horizontal 或者 vertical, vertical 旋轉時中文不會顯示,此處為 Bug 。 .NET 下選擇 45degrees 旋转沒有效果。
如:
List<string> aa=new List<string>();
for (int i = 0; i < 13; i++)
{
aa.Add(i.ToString()+" 月 ");
}
chart.X_Axis.Labels.Values=aa ;
chart.X_Axis.Labels.Rotate = "vertical"; 時如圖:chart.X_Axis.Labels.Vertical = true; 設置 X 軸的標簽是否為垂直旋轉,
chart.X_Axis.Labels.Color = "#ff0000"; 設置 X 軸標簽的顏色。
X Axis Labels Step
設置 X 軸標簽的間隔值 chart.X_Axis.Steps = 2; 時如圖:X Axis Legend
chart.Y_Legend 不能显示中文,不能显示英文
設置 X 軸的圖例, chart.X_Legend = new Legend("x-axis legend");Y Axis
Y Axis
Steps 屬性設置 Y 軸標簽的間距值,如 chart.Y_Axis.Steps = 2
Y Min Max
設置 Y 軸的最值, chart.Y_Axis.SetRange(0, 10)Chart Title
Chart 的標題,如 chart.Title = new Title("Bar 3D"); 時效果圖:
顯示多組數據時, Set_Key() 方法來設置圖例
如 line1.Set_Key("Line1",12);
Line2.Set_Key("Line2",12);
Line3.Set_Key("Line3",12);