Open Flash Chart 之線圖

時間 2019-11-24

標籤 open flash chart 線圖欄目 Flash 简体版

原文原文鏈接

天公司要求開發一個曲線圖，簡單看了一下以前公司的一個系統，發現一個曲線圖效果還不錯，查了一下叫OpenFlashChart，仍是很不錯的，不少人用。研究了一下，發現還不錯，特意寫了個DEMO測試下。javascript

public ActionResult ITooltip() { int DateLen = Convert.ToInt32(Request["d"]); int DateMode = Convert.ToInt32(Request["m"]); OpenFlashChart.OpenFlashChart chart = new OpenFlashChart.OpenFlashChart(); List<double> ListData = new List<double>(); //定義一條X軸 XAxisLabels xal = new XAxisLabels(); for (int i = DateLen; i >= 0; i--) { string aDateID = DateTime.Now.AddDays(-i).ToString("yyyyMMdd"); int count = i * 10; ListData.Add(count); //X軸的顯示信息 AxisLabel al = new AxisLabel(DateTime.Now.AddDays(-i).ToString("MM月dd日")); xal.Add(al); } //定義一條曲線，該曲線就是用於顯示數據的曲線 OpenFlashChart.LineHollow line = new LineHollow(); //此處是new LineHollow() 表示是空心點，若是要實心點，能夠new LineDot() line.Values = ListData; //將數據給曲線 //line.HaloSize = 12; line.Width = 6; //圖中曲線的粗細 line.DotSize = 12; line.FontSize = 12; //該參數控制 line.Text的字體大小 line.Colour = "#0838CE"; //設置曲線的顏色 ////自定義一個曲線中點的樣式 //DotStyle ds = new DotStyle(); //ds.BackgroundColour = "#000000"; //自定義點的背景顏色 //ds.Colour = "#ffffff"; //自定義點的顏色 //ds.DotSize = 6; //自定義點的大小 //ds.IsHollow = true; //是不是空心 //ds.Sides = 333; //ds.Tip = "評論數 #val#"; //鼠標移到點上的提示信息 //ds.Width = 20; //line.DotStyleType = ds;  line.Text = "評論數"; line.Loop = true; line.Tooltip = "評論數 #val#"; chart.AddElement(line); chart.Title = new Title("最近30天評論趨勢曲線圖"); //設置整個圖表的顯示範圍，也就是說 //圖表中，Y軸的最小值爲表中數據的最小值減10. //圖表中，Y軸的最大值爲表中數據的最大值加10， //第三個參數用於設計後背景方格的密集程度，方格中每一格表示的高度爲Y軸的10 chart.Y_Axis.SetRange(ListData.Min() - 10, ListData.Max() + 10, (Convert.ToInt32(ListData.Max()+10)) / 10); chart.X_Axis.Labels = xal; //chart.X_Axis.Set3D(12); //設置X軸的3D效果，仍是挺好看的 chart.Tooltip = new ToolTip("my tip #val#"); //這4行代碼仍是要的，清空緩存  Response.Clear(); Response.CacheControl = "no-cache"; Response.Write(chart.ToPrettyString()); Response.End(); return View(); }

　　其中前臺頁面代碼以下：html

<html> <head> <title>Index</title> </head> <body> <div> <script type="text/javascript" src="/FlashChart/swfobject.js"></script> <br /> &nbsp;&nbsp;&nbsp;&nbsp;<div id="week_Tooltip" style="margin-bottom: 20px;"> </div> &nbsp;&nbsp;&nbsp;&nbsp;<div id="month_Tooltip"> </div> <script type="text/javascript"> swfobject.embedSWF("/FlashChart/open-flash-chart-SimplifiedChinese.swf", "week_Tooltip", "700px", "400px", "9.0.0", "expressInstall.swf", { "data-file": "/Chart/ITooltip?d=7&m=0" }); </script> </div> </body> </html>

　　顯示效果以下：java

元素/屬性express	形狀或做用緩存	參數1ide
titleoop	顯示圖表主題（最上方）學習	主題名稱測試
x_legend字體	X座標說明（最下方, 與X軸平行）	說明信息
y_legend	Y座標說明（最左邊, 與Y軸平行）	說明信息
x_labels	設置X軸座標顯示
y_label_size
x_label_style	設置X軸樣式	字體大小
y_label_style	設置Y軸樣式	字體大小
x_ticks	控制X軸座標標記顯示	X軸座標標記長度
y_ticks	控制Y軸座標標記顯示	Y軸座標標記最小長度
X_min	設置X軸座標最小值	X軸座標最小值
x_max	設置X軸座標最大值	X軸座標最大值
y_min	設置Y軸座標最小值	Y軸座標最小值
y_max	設置Y軸座標最大值	Y軸座標最大值
bg_colour	設置背景顏色
inner_background	設置座標區域內部顏色	顏色1
bg_image	設置背景圖片	圖片位置
bg_image_x	設置圖片橫向位置	[left \|center \|right]
bg_bg_image_y	設置圖片縱向位置	[top \|middle \|bottom]
x_axis_colour	設置X軸顏色
y_axis_colour	設置Y軸顏色
x_axis_steps	設置X軸線條間隔
x_axis_3d	設置X軸3d效果的高度
x_grid_colour	設置X軸線條顏色
y_grid_colour	設置Y軸線條顏色
show_y2	設置Y軸右邊也顯示座標	[true \|false]
y2_lines	設置哪一個圖是根據右邊Y座標的值來顯示	[能夠有多個]
y_format	格式化Y軸顯示(常與#val#等聯合使用)
values	設置值
num_decimals	格式化小數位數
is_fixed_num_decimals_forced	是否強制格式化小數	[true \|false]
is_decimal_separator_comma	是否使用小數分隔符	[true: , \|false: . ](與千位分隔符相反)
is_thousand_separator_disabled	是否使用千位分隔符	[true \|false]
x_offset	是否自動補償以適應圖的顯示	[true \|false]

關於toolTip

在chart中有一個參數爲tool_tip，起到title的做用。這個參數的值的格式和其餘的參數不同。以下例中：

so.addVariable("tool_tip","#key#\nhigh:#high#\nlow:#low#\nclost:#close#");

tool_tip的參數值中#...#這個格式是起替換的做用。好比：　　#x_label#表明鼠標所在列的X軸文案。　　#val#表明了鼠標所在區域的值。　　#key#表明了鼠標所在區域，此種點，線和主體的文案。　　#high#表示鼠標所在區域最高值。　　#low#表示鼠標所在區域最低值。　　#clost#表示鼠標所在區域關閉值。　　#open#表示鼠標所在區域開始值。

2013-05-13 今天將以前的學習測試代碼直接添加到項目中，結果生成的線圖多了一條線，而後改了一下這個屬性就正常了。

line.Loop = false;　字面意思理解是線圖是否環繞起來。