今天公司要求開發一個曲線圖，簡單看了一下之前公司的一個系統，發現一個曲線圖效果還不錯，查了一下叫OpenFlashChart，還是很不錯的，很多人用。研究了一下，發現還不錯，特地寫了個DEMO測試下。
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> <head> <title>Index</title> </head> <body> <div> <script type="text/javascript" src="/FlashChart/swfobject.js"></script> <br /> <div id="week_Tooltip" style="margin-bottom: 20px;"> </div> <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>
顯示效果如下：
| 元素/屬性 |
形狀或作用 |
參數1 |
| title |
顯示圖表主題（最上方） |
主題名稱 |
| 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; 字面意思理解是線圖是否環繞起來。