350 lines
13 KiB
JavaScript
350 lines
13 KiB
JavaScript
|
function drawCharts(result_paramsArr_data,filesNameStr){
|
|||
|
|
var paramAllData = [];
|
|||
|
|
if(filesNameStr!='allFiles'){//如果不是选择的所有文件
|
|||
|
|
//解析filesNameArr，获取新的result_paramsArr_data---------------------
|
|||
|
|
result_paramsArr_data = getNewresult_paramsArr_data(result_paramsArr_data,filesNameStr);
|
|||
|
|
//解析filesNameArr，获取新的result_paramsArr_data---------------------
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var result_paramsArr_dataLen = result_paramsArr_data.length;
|
|||
|
|
//每个图表容器的高度
|
|||
|
|
chart_containerHeight = parseInt(page_total_height/result_paramsArr_dataLen);
|
|||
|
|
//注销之前的图形缓存,图表1，初始图表
|
|||
|
|
myLineChart.destroy();
|
|||
|
|
//注销之前的图形缓存，2个以上的图表
|
|||
|
|
for(var charti=0;charti<myLineChartArr.length;charti++){
|
|||
|
|
myLineChartArr[charti].destroy();
|
|||
|
|
}
|
|||
|
|
//清空
|
|||
|
|
myLineChartArr = [];
|
|||
|
|
console.log('注销之前的图形缓存成功');
|
|||
|
|
for(var k=0;k<result_paramsArr_data.length;k++){ //所有选中的参数
|
|||
|
|
//某个参数包含的数据
|
|||
|
|
var chartDataSets = [];
|
|||
|
|
var result_params_data = result_paramsArr_data[k];
|
|||
|
|
var req_param_data = result_params_data.req_param_data;
|
|||
|
|
//参数名
|
|||
|
|
var paramName_k = req_param_data.paramName;
|
|||
|
|
|
|||
|
|
//参数包含的数据
|
|||
|
|
paramAllData = req_param_data.paramAllData;
|
|||
|
|
//自定义x轴范围---------------------------------------
|
|||
|
|
var paramName_k_x_min=0;
|
|||
|
|
var paramName_k_x_max=0;
|
|||
|
|
var hasCustomerXField = false;
|
|||
|
|
var paramValue_jArr_X_k_cus = [];
|
|||
|
|
for(var kk=0;kk<customer_x_field.length;kk++){
|
|||
|
|
customer_x_field_values = customer_x_field[kk];
|
|||
|
|
if(paramName_k==customer_x_field_values.set_paramName){
|
|||
|
|
if(customer_x_field_values.x_minValue!=''&&customer_x_field_values.x_minValue!="")
|
|||
|
|
paramName_k_x_min = customer_x_field_values.x_minValue
|
|||
|
|
if(customer_x_field_values.x_maxValue!=''&&customer_x_field_values.x_maxValue!="")
|
|||
|
|
paramName_k_x_max = customer_x_field_values.x_maxValue;
|
|||
|
|
paramValue_jArr_X_k_cus = customer_x_field_values.paramValue_jArr_X_k_cus;
|
|||
|
|
hasCustomerXField = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//自定义x轴范围---------------------------------------
|
|||
|
|
//如果设置过x轴范围，则重新生成数据
|
|||
|
|
if(hasCustomerXField&&(paramName_k_x_min<paramName_k_x_max))
|
|||
|
|
paramAllData = get_Y_data_k_By_customer_X_Field(paramName_k_x_min,paramName_k_x_max,paramAllData);
|
|||
|
|
|
|||
|
|
//自定义y轴范围数据------------------------------------
|
|||
|
|
var paramName_k_y_min = 0;
|
|||
|
|
var paramName_k_y_max = 0;
|
|||
|
|
var hasCustomerYField = false;
|
|||
|
|
//遍历自定义y轴范围数据
|
|||
|
|
for(var i=0;i<customer_y_field.length;i++){
|
|||
|
|
var customer_y_fieldObj = customer_y_field[i];
|
|||
|
|
if(paramName_k==customer_y_fieldObj.set_paramName){
|
|||
|
|
if(customer_y_fieldObj.y_minValue!=''&&customer_y_fieldObj.y_minValue!="")
|
|||
|
|
paramName_k_y_min = customer_y_fieldObj.y_minValue;
|
|||
|
|
if(customer_y_fieldObj.y_maxValue!=''&&customer_y_fieldObj.y_maxValue!="")
|
|||
|
|
paramName_k_y_max = customer_y_fieldObj.y_maxValue;
|
|||
|
|
|
|||
|
|
hasCustomerYField = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//自定义y轴范围数据------------------------------------
|
|||
|
|
//获取图表的颜色
|
|||
|
|
//获取图表的颜色,models_keypoint_params_colorArr 存放参数的颜色序号 数组
|
|||
|
|
for(var i=0;i<models_keypoint_params_colorArr.length;i++){
|
|||
|
|
models_keypoint_params_colorObj = models_keypoint_params_colorArr[i];
|
|||
|
|
if(paramName_k==models_keypoint_params_colorObj.paramName_k)
|
|||
|
|
getColorNum(models_keypoint_params_colorObj.color_index);
|
|||
|
|
}
|
|||
|
|
//选择的的参数的字体颜色
|
|||
|
|
var param_fontColor = "rgba("+redcolor+","+greencolor+","+bluecolor+",1)";
|
|||
|
|
$("."+req_param_data.paramName+"_class").css({"color":param_fontColor});
|
|||
|
|
//初始化图表------------------
|
|||
|
|
var ctxk;
|
|||
|
|
if(result_paramsArr_dataLen==1) //只有一个参数
|
|||
|
|
ctxk = addOneChart(0,'onlyone',chart_containerHeight,paramName_k,param_fontColor);
|
|||
|
|
else //多个参数
|
|||
|
|
ctxk = addOneChart(k,'',chart_containerHeight,paramName_k,param_fontColor);
|
|||
|
|
var myLineChartk;
|
|||
|
|
//初始化图表------------------
|
|||
|
|
//每一个csv中计算出来的x轴数据
|
|||
|
|
var paramValue_jArr_X = [];
|
|||
|
|
//获取x轴数据时需要判断该值
|
|||
|
|
loop_paramAllData_temp_i = -1;
|
|||
|
|
|
|||
|
|
for(var i=0;i<paramAllData.length;i++){
|
|||
|
|
var paramObj = paramAllData[i];
|
|||
|
|
var paramName = paramObj.paramName;
|
|||
|
|
//一个csv的计算后的数据
|
|||
|
|
var paramValue = paramObj.paramValue;
|
|||
|
|
//文件名序号
|
|||
|
|
fileIndex = paramObj.fileIndex;
|
|||
|
|
|
|||
|
|
//每一个csv中计算出来的y轴数据
|
|||
|
|
var paramValue_jArr_Y = [];
|
|||
|
|
var paramValueArr = paramValue.split(';');
|
|||
|
|
|
|||
|
|
//获取每个参数x轴数据------------------------------------------
|
|||
|
|
if(paramValue==''||paramValue==""||paramValue==null){
|
|||
|
|
continue;
|
|||
|
|
}else{
|
|||
|
|
if(loop_paramAllData_temp_i==-1){
|
|||
|
|
loop_paramAllData_temp_i = i;
|
|||
|
|
if(loop_paramAllData_temp_i>-1){
|
|||
|
|
for(var ii=0;ii<paramValueArr.length;ii++){
|
|||
|
|
//只计算一个csv的x轴数据
|
|||
|
|
paramValue_jArr_X.push(ii);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//获取每个参数x轴数据------------------------------------------
|
|||
|
|
|
|||
|
|
paramValue_jArr_Y = paramValueArr;
|
|||
|
|
|
|||
|
|
//填充颜色
|
|||
|
|
var backgroundColor = "rgba("+redcolor+","+greencolor+","+bluecolor+",0.4)";
|
|||
|
|
var borderColor = "rgba("+redcolor+","+greencolor+","+bluecolor+",1)";
|
|||
|
|
var pointBorderColor = "rgba("+redcolor+","+greencolor+","+bluecolor+",1)";
|
|||
|
|
//图表数据对象
|
|||
|
|
var chartDataObj;
|
|||
|
|
if(hasCustomerYField&&(paramName_k_y_min<paramName_k_y_max)){
|
|||
|
|
//用户自定义y轴范围
|
|||
|
|
chartDataObj = {
|
|||
|
|
label : 'csv'+parseInt(fileIndex),
|
|||
|
|
//backgroundColor: backgroundColor,
|
|||
|
|
backgroundColor : 'rgba(0,0,0,0.0)',
|
|||
|
|
borderColor: borderColor,
|
|||
|
|
pointBorderColor: pointBorderColor,
|
|||
|
|
pointHoverBackgroundColor: pointBorderColor,
|
|||
|
|
pointHoverBorderColor: pointBorderColor,
|
|||
|
|
pointHoverBackgroundColor: pointBorderColor,
|
|||
|
|
pointBorderWidth:1,
|
|||
|
|
yAxisID: 'customer_y_ID'+k,
|
|||
|
|
data : paramValue_jArr_Y
|
|||
|
|
};
|
|||
|
|
}else{
|
|||
|
|
chartDataObj = {
|
|||
|
|
label : 'csv'+parseInt(fileIndex),
|
|||
|
|
//backgroundColor: backgroundColor,
|
|||
|
|
backgroundColor : 'rgba(0,0,0,0.0)',
|
|||
|
|
borderColor: borderColor,
|
|||
|
|
pointBorderColor: pointBorderColor,
|
|||
|
|
pointHoverBackgroundColor: pointBorderColor,
|
|||
|
|
pointHoverBorderColor: pointBorderColor,
|
|||
|
|
pointHoverBackgroundColor: pointBorderColor,
|
|||
|
|
pointBorderWidth:1,
|
|||
|
|
data : paramValue_jArr_Y
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//图表数据集
|
|||
|
|
chartDataSets.push(chartDataObj);
|
|||
|
|
console.log('获取某个图表数据集成功');
|
|||
|
|
}
|
|||
|
|
if(hasCustomerXField&&(paramName_k_x_min<paramName_k_x_max)){
|
|||
|
|
paramValue_jArr_X = paramValue_jArr_X_k_cus;
|
|||
|
|
}
|
|||
|
|
//图表数据
|
|||
|
|
var showchartdata = {
|
|||
|
|
labels : paramValue_jArr_X,
|
|||
|
|
datasets : chartDataSets
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//只勾选一个参数，只有一个图表
|
|||
|
|
if(k==0){
|
|||
|
|
|
|||
|
|
//画图表-生成图标图形------------------------------
|
|||
|
|
if(hasCustomerYField&&(paramName_k_y_min<paramName_k_y_max)){//该参数x轴范围已经被自定义过
|
|||
|
|
myLineChart = new Chart(ctx, {
|
|||
|
|
type: 'line',
|
|||
|
|
data: showchartdata,
|
|||
|
|
options: {
|
|||
|
|
scales: {
|
|||
|
|
yAxes: [{
|
|||
|
|
id: 'customer_y_ID'+k,
|
|||
|
|
type: 'linear',
|
|||
|
|
position: 'left',
|
|||
|
|
ticks: {
|
|||
|
|
max: parseInt(paramName_k_y_max),
|
|||
|
|
min: parseInt(paramName_k_y_min)
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
display: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
myLineChart = new Chart(ctx, {
|
|||
|
|
type: 'line',
|
|||
|
|
data: showchartdata,
|
|||
|
|
options : {
|
|||
|
|
legend: {
|
|||
|
|
display: false
|
|||
|
|
}
|
|||
|
|
}//'top',
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
console.log('绘制第一个图表成功');
|
|||
|
|
//画图表-结束------------------------------
|
|||
|
|
}else{
|
|||
|
|
//画图表-生成图标图形------------------------------
|
|||
|
|
if(hasCustomerYField&&(paramName_k_y_min<paramName_k_y_max)){//该参数x轴范围已经被自定义过
|
|||
|
|
myLineChartk = new Chart(ctxk, {
|
|||
|
|
type: 'line',
|
|||
|
|
data: showchartdata,
|
|||
|
|
options: {
|
|||
|
|
scales: {
|
|||
|
|
yAxes: [{
|
|||
|
|
id: 'customer_y_ID'+k,
|
|||
|
|
type: 'linear',
|
|||
|
|
position: 'left',
|
|||
|
|
ticks: {
|
|||
|
|
max: parseInt(paramName_k_y_max),
|
|||
|
|
min: parseInt(paramName_k_y_min)
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
display: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
console.log('绘制自定义x轴范围，某个图表成功');
|
|||
|
|
}else{
|
|||
|
|
myLineChartk = new Chart(ctxk, {
|
|||
|
|
type: 'line',
|
|||
|
|
data: showchartdata,
|
|||
|
|
options : {
|
|||
|
|
legend: {
|
|||
|
|
display: false
|
|||
|
|
}
|
|||
|
|
}//'top',
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('绘制某个图表成功');
|
|||
|
|
}
|
|||
|
|
myLineChartArr.push(myLineChartk);
|
|||
|
|
//画图表-结束------------------------------
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
function getNewresult_paramsArr_data(result_paramsArr_data,filesNameStr,allClickFlag){
|
|||
|
|
var result_paramsArr_dataNew = [];
|
|||
|
|
var filesNameArr = filesNameStr.split(",");
|
|||
|
|
var result_paramsArr_dataLen = result_paramsArr_data.length;
|
|||
|
|
for(var k=0;k<result_paramsArr_dataLen;k++){
|
|||
|
|
var result_params_data = result_paramsArr_data[k];
|
|||
|
|
var req_param_data = result_params_data.req_param_data;
|
|||
|
|
var paramAllData = req_param_data.paramAllData;
|
|||
|
|
var result_params_dataNew;
|
|||
|
|
var req_param_dataNew;
|
|||
|
|
var paramAllDataNew=[];
|
|||
|
|
for(var i=0;i<filesNameArr.length;i++){
|
|||
|
|
for(var j=0;j<paramAllData.length;j++){
|
|||
|
|
var paramObj = paramAllData[j];
|
|||
|
|
var paramName = paramObj.paramName;
|
|||
|
|
//一个csv的计算后的数据
|
|||
|
|
var fileName = paramObj.fileName;
|
|||
|
|
if(filesNameArr[i]==fileName){
|
|||
|
|
paramAllDataNew.push(paramObj);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
req_param_dataNew = {"paramAllData":paramAllDataNew,"keyPointName":req_param_data.keyPointName,"paramName":req_param_data.paramName,"param_X_Length":req_param_data.param_X_Length,"param_from":req_param_data.param_from,"param_to":req_param_data.param_to};
|
|||
|
|
result_params_dataNew = {"req_param_data":req_param_dataNew}
|
|||
|
|
result_paramsArr_dataNew.push(result_params_dataNew);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return result_paramsArr_dataNew;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//根据自定义x轴的范围获取指定数量的y轴数据
|
|||
|
|
function get_Y_data_k_By_customer_X_Field(paramName_k_x_min,paramName_k_x_max,paramAllData){
|
|||
|
|
var paramAllDataNew=[];
|
|||
|
|
for(var j=0;j<paramAllData.length;j++){
|
|||
|
|
var paramObj = paramAllData[j];
|
|||
|
|
var paramName = paramObj.paramName;
|
|||
|
|
var paramValue = paramObj.paramValue;
|
|||
|
|
paramValueArr = paramValue.split(";");
|
|||
|
|
var paramValueNew = '';
|
|||
|
|
for(var m=paramName_k_x_min;m<paramName_k_x_max;m++){
|
|||
|
|
paramValueNew=paramValueNew+paramValueArr[m]+";";
|
|||
|
|
}
|
|||
|
|
paramValueNew = paramValueNew.substring(0, paramValueNew.length-1);
|
|||
|
|
paramObjNew = {"keyPointName":paramObj.keyPointName,"fileName":paramObj.fileName,"paramName":paramObj.paramName,"paramValue":paramValueNew};
|
|||
|
|
paramAllDataNew.push(paramObjNew);
|
|||
|
|
}
|
|||
|
|
return paramAllDataNew;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//暂时不使用该函数--------------
|
|||
|
|
//生成自定义的x轴数据，选择过的参数
|
|||
|
|
var customer_x_field_valuesArr = [];
|
|||
|
|
//是否有参数被自定义过x轴范围，只要有一个，就为true
|
|||
|
|
var isContainCusXFieldsTag = false;
|
|||
|
|
//获取每个参数的自定义x轴范围和显示的y轴数据
|
|||
|
|
function get_customer_x_field_k_values(paramName_k){
|
|||
|
|
var paramName_k_x_min=0;
|
|||
|
|
var paramName_k_x_max=0;
|
|||
|
|
var hasCustomerXField = false;
|
|||
|
|
for(var i=0;i<customer_x_field.length;i++){
|
|||
|
|
var customer_x_fieldObj = customer_x_field[i];
|
|||
|
|
if(paramName_k==customer_x_fieldObj.set_paramName){
|
|||
|
|
paramName_k_x_min = customer_x_fieldObj.x_minValue;
|
|||
|
|
paramName_k_x_max = customer_x_fieldObj.x_maxValue;
|
|||
|
|
hasCustomerXField=true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//如果该参数没有被自定义过x轴范围，则不改变什么，如果有，则同时改变y轴要显示的数据，并重新绘图
|
|||
|
|
//只要有一个参数被自定义过x轴范围，就要重新绘图，所以，只要有一个参数被自定义过，返回false，则continue,执行下一个参数，继续判断下一个参数是否也被自定义过x轴范围，获取该x轴范围
|
|||
|
|
if(hasCustomerXField){
|
|||
|
|
//生成自定义的x轴数据
|
|||
|
|
paramValue_jArr_X_k_cus = [];
|
|||
|
|
for(var i=paramName_k_x_min;i<paramName_k_x_max;i++){
|
|||
|
|
paramValue_jArr_X_k_cus.push(i);
|
|||
|
|
}
|
|||
|
|
customer_x_field_k_values = {"paramName_k":paramName_k,"paramValue_jArr_X_k_cus":paramValue_jArr_X_k_cus,"paramName_k_x_min":paramName_k_x_min,"paramName_k_x_max":paramName_k_x_max};
|
|||
|
|
customer_x_field_valuesArr.push(customer_x_field_k_values);
|
|||
|
|
isContainCusXFieldsTag = true;
|
|||
|
|
//如果返回isContainCusXFieldsTag = true，则continue,执行下一个参数，继续判断下一个参数是否也被自定义过x轴范围
|
|||
|
|
}
|
|||
|
|
//如果返回isContainCusXFieldsTag = false，则不改变什么
|
|||
|
|
|
|||
|
|
}
|