?? class_statistical_chart.js
字號:
//定義一個 vml統計圖的 類
function cls_statistical_chart()
{
///////////////////////////////////
//property definition
this.Copyleft = "Copyleft"; //自由軟件授權
this.title = "QingFeng VML Statistical Chart"; //圖表的標題
//x, y 坐標軸的單位 名稱和單位長度（以像素為單位）
this.x_axis_unit_name = ""; //保留
this.x_axis_lengthpx = 400;
this.y_axis_unit_name = ""; //保留
this.y_axis_lengthpx = 200;
//原點坐標
this.zero_point_x = 0;
this.zero_point_y = 0;
//邏輯尺寸
this.logic_width = 10000;
this.logic_height = 10000;
//用戶定義的區間
this.user_x_from = 0;
this.user_x_to = 10000;
this.user_y_from = 0;
this.user_y_to = 10000;
//x, y 坐標軸上的標尺標記
this.x_axis_tag_ary = new Array();
this.y_axis_tag_ary = new Array();
//統計項目的數據數組
this.data_item_ary = new Array();
this.data_item_ary.push(0);
/*
這個數組的[0]是統計項目的個數，即它后面有幾個項目需要統計
后面的元素條目是數組，格式為：
[0] = "項目名稱"
[1] = "線條顏色"
[2] = "數據點的個數n"
[3] = "此項目的說明信息"
[4] = 第一個點的 x
[5] = 第一個點的 y
如 [4],[5] 所示，后面是 成對的點 的 x,y 坐標值
*/
////////////////////////////////
//methord definition
this.draw = cls_statistical_chart_draw; //畫整個圖表，是其他幾個函數的組裝
this.getaxis = cls_statistical_chart_getaxis; //畫坐標軸
this.getpolyline = cls_statistical_chart_getpolyline; //畫統計數據形成的折線
this.addpolyline = cls_statistical_chart_addpolyline; //添加一條折線（統計項目）
this.getitemlist = cls_statistical_chart_getitemlist; //畫圖示
this.user_to_logic = cls_statistical_chart_user_to_logic;
}
//畫整個圖表，是其他幾個函數的組裝
function cls_statistical_chart_draw()
{
var str_vml = "";
str_vml = str_vml + this.getaxis();
str_vml = str_vml + this.getpolyline();
////打包圖形
var str_group = "";
str_group = "<v:group id=\"QingFeng_Statistical_" + Math.floor(Math.random()).toString() + "\" ";
str_group = str_group + " style=\"position:relative; width:" + this.x_axis_lengthpx.toString() + "px; height:" + this.y_axis_lengthpx.toString() + "px;\" ";
str_group = str_group + " CoordSize=\"" + this.logic_width.toString() + "," + this.logic_height.toString() + "\" ";
str_group = str_group + ">"
str_group = str_group + "<!--v:rect style=\"width:" + this.logic_width.toString() + "px; height:" + this.logic_height.toString() + "px;\" filled=\"false\" /-->"
//<!--統計圖數據 開始-->
str_vml = str_group + str_vml + "</v:group>"
//<!--統計圖數據 結束-->
/////alert(this.x_axis_tag_ary.length.toString());
return str_vml;
}
//畫坐標軸
function cls_statistical_chart_getaxis()
{
var str_x_axis = "";
var str_x_assistant = "";
var str_y_axis = "";
var str_y_assistant = "";
var str_axis = "";
this.zero_point_x = 1;
this.zero_point_y = this.logic_height - 1;
//畫坐標軸
str_x_axis = "<v:line id=x_axis from=\"" + this.zero_point_x.toString() + "," + (this.zero_point_y).toString() + "\" to=\"" + (this.logic_width).toString() + "," + (this.zero_point_y).toString() + "\"><v:stroke EndArrow=\"Classic\" /></v:line>"
str_y_axis = "<v:line id=y_axis from=\"" + this.zero_point_x.toString() + "," + (this.zero_point_y).toString() + "\" to=\"" + this.zero_point_x.toString() + ",0\"><v:stroke EndArrow=\"Classic\" /></v:line>"
var i = 0;
//畫 x， y 上的標號
for ( i=1; i<=this.x_axis_tag_ary.length; i++)
{
str_x_axis = str_x_axis + "<v:shape strokecolor=\"none\" filled=\"False\" style=\"left:" + (this.zero_point_x + this.logic_width / (this.x_axis_tag_ary.length+1) * i - (this.x_axis_tag_ary[i-1].length * 250 * 300/this.x_axis_lengthpx) / 2).toString() + ";top:" + (this.zero_point_y).toString() + ";width:" + (this.x_axis_tag_ary[i-1].length * 250 * 400/this.x_axis_lengthpx).toString() + ";height:" + (300 * 400/this.y_axis_lengthpx).toString() +";\" inset=\"1px,1px,1px,1px\">";
str_x_axis = str_x_axis + "<div align=\"center\" title=\"" + this.x_axis_tag_ary[i-1] + "\" style=\"cursor:hand;font-size:7pt;color:blue\">" + this.x_axis_tag_ary[i-1] + "</div>";
str_x_axis = str_x_axis + "</v:shape>";
//畫輔助線--豎向
str_x_assistant = "<v:line id=x_assistant from=\"" + (this.zero_point_x + this.logic_width / (this.x_axis_tag_ary.length+1) * i).toString() + "," + (this.zero_point_y).toString() + "\" to=\"" + (this.zero_point_x + this.logic_width / (this.x_axis_tag_ary.length+1) * i).toString() + "," + "0" + "\"";
//str_x_assistant = str_x_assistant + " style=\"cursor:hand; \"";
str_x_assistant = str_x_assistant + "><v:stroke dashstyle=\"Dot\"/></v:line>";
str_x_axis = str_x_axis + str_x_assistant;
}
for ( i=1; i<=this.y_axis_tag_ary.length; i++)
{
str_y_axis = str_y_axis + "<v:shape strokecolor=\"none\" filled=\"False\" style=\"left:" + (this.zero_point_x - (this.y_axis_tag_ary[i-1].length * 250 * 300/this.x_axis_lengthpx)).toString() + ";top:" + (this.zero_point_y - this.logic_height / (this.y_axis_tag_ary.length+1) * i - 100).toString() + ";width:" + (this.y_axis_tag_ary[i-1].length * 250 * 300/this.x_axis_lengthpx).toString() + ";height:" + (300 * 400/this.y_axis_lengthpx).toString() +";\" inset=\"1px,1px,1px,1px\">";
str_y_axis = str_y_axis + "<div title=\"" + this.y_axis_tag_ary[i-1] + "\" style=\"Text-align:right;cursor:hand;font-size:7pt;color:blue\">" + this.y_axis_tag_ary[i-1] + "</div>";
str_y_axis = str_y_axis + "</v:shape>";
//畫輔助線--橫向
str_y_assistant = "<v:line id=y_assistant from=\"" + (this.zero_point_x).toString() + "," + (this.zero_point_y - this.logic_height / (this.y_axis_tag_ary.length+1) * i).toString() + "\" to=\"" + this.logic_width.toString() + "," + (this.zero_point_y - this.logic_height / (this.y_axis_tag_ary.length+1) * i).toString() + "\"";
//str_y_assistant = str_y_assistant + " style=\"cursor:hand; \"";
str_y_assistant = str_y_assistant + "><v:stroke dashstyle=\"Dot\"/></v:line>";
str_y_axis = str_y_axis + str_y_assistant;
}
//合成
str_axis = str_x_axis + str_y_axis;
return str_axis;
}
//畫統計數據形成的折線
function cls_statistical_chart_getpolyline()
{
var rtitle;
var polyline_ary = new Array();
var polyline = "";
var polylines = "";
this.zero_point_x = 1;
this.zero_point_y = this.logic_height - 1;
var i = 0;
var i_temp = 0;
var temp_ary;
for (i=1; i<=this.data_item_ary[0]; i++)
{
polyline = "\" filled=\"false\"/>";
temp_ary = this.data_item_ary[i];
//alert(temp_ary);
for (i_temp=temp_ary[2]*2+4-1; i_temp>3; i_temp-=2)
{
polyline = "," + (this.zero_point_y - temp_ary[i_temp]).toString() + polyline; //y
polyline = " " + (this.zero_point_x + temp_ary[i_temp-1]).toString() + polyline; //x
}
polyline = " points=\"" + polyline;
polyline = " strokeColor=\"" + temp_ary[1] + "\" " + polyline;
polyline = "<v:polyline style=\"cursor:hand;\" title=\"" + temp_ary[0] + "\n說明:" + temp_ary[3] + "\"" + polyline;
//polyline_ary.push(polyline);
polylines = polylines + polyline;
}
return polylines;
}
function cls_statistical_chart_getitemlist()
{
;
}
function cls_statistical_chart_addpolyline( polyline_data_ary )
{
var data_ary = new Array();
data_ary.push(polyline_data_ary[0]); //項目名稱
data_ary.push(polyline_data_ary[1]); //圖表顏色
data_ary.push(polyline_data_ary[2]); //后面的數據元素
data_ary.push(polyline_data_ary[3]); //項目說明
var i = 0;
var l;
for (i=0; i<data_ary[2]; i++)
{
data_ary.push(this.logic_width / (this.x_axis_tag_ary.length + 1) * (i+1)); //自動填充 x
data_ary.push(this.user_to_logic(polyline_data_ary[i+4], this.user_y_from, this.user_y_to, this.logic_height, this.y_axis_tag_ary.length));
}
this.data_item_ary.push(data_ary); //注冊到管理器
this.data_item_ary[0]++;
}
function cls_statistical_chart_user_to_logic( user_value, user_start, user_end, logic_range, axis_tag_ary_length)
{
var unit_size;
unit_size = logic_range / (axis_tag_ary_length + 1);
var logic_value = 0;
logic_value = unit_size + logic_range * (1 - 2 / (axis_tag_ary_length + 1)) * (user_value - user_start) / (user_end - user_start);
return logic_value;
}
/////////////////////////////////
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -