GridView行点击事件数据赋值到highcharts 的使用
1.行改变样式及点击事件
protected void QMSInfoGDV_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//当鼠标停留时更改背景色
e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#95B8FF'");
//当鼠标移开时还原背景色
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
//设置悬浮鼠标指针形状为"小手"
e.Row.Attributes["style"] = "Cursor:hand";
//单击 事件
e.Row.Attributes.Add("onclick", e.Row.ClientID.ToString() + ".checked=true;selectx(this)");
int row_index = e.Row.RowIndex + 1;
e.Row.Attributes.Add("onclick", "ClickEvent('" + row_index + "')");
//保持列不变形
for (int i = 0; i < e.Row.Cells.Count; i++)
{
e.Row.Cells[i].Wrap = false;
}
}
}
2.点击事件获取到数据
function ClickEvent(row_index) {
var dataChart=new Array;
var tableInfo = new Array;
var column=new Array;
var car_pla=new Array;
var time=new Array;
var grid_view = document.getElementById('<%=QMSInfoGDV.ClientID %>');
var rows = grid_view.rows;
var i = rows[row_index].cells[0].innerText; //取第一列的值
debugger;
for(var j = 2; j < grid_view.rows[i].cells.length; j++){
column= grid_view.rows[0].cells[j].innerText; //获取Table中单元格的内容
time=Date.parse(column);
if(grid_view.rows[i].cells[j].innerText>0){
tableInfo = grid_view.rows[i].cells[j].innerText; //获取Table中单元格的内容
}else{
tableInfo = 0;
}
dataChart+='['+time+','+tableInfo+']';
dataChart += ','
debugger;
if(j < grid_view.rows[i].cells.length) { //遍历Row中的每一列
car_pla = grid_view.rows[i].cells[1].innerText; //获取Table中单元格的内容
}
}
var lastIndex = dataChart.lastIndexOf(',');
if (lastIndex > -1) {
dataChart = dataChart.substring(0, lastIndex) + dataChart.substring(lastIndex + 1, dataChart.length);
}
dataChart='['+dataChart+']';
ChartLoad(car_pla, dataChart);
}
3.数组赋值到highcharts的数据源sersies
$(function() {
ChartLoad();
});
function ChartLoad(car_pla,dataChart) {
Highcharts.setOptions({
global: {
//时间设置
useUTC: false//非常重要
},
lang: {
resetZoom: "缩放重置"
}
});
$('#container').highcharts({
chart: {
type:"spline",
//图形放大类型
zoomType: 'x',
//图形右侧空间
spacingRight: 20
},
title: {
text: '里程统计(天)',
style: {
fontSize: '12px'
}
},
subtitle: {
text: null
},
xAxis: {
maxZoom: 10 * 60 * 1000, //最大放大级别 eg.一天：24*60*60*1000
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
tooltip: {
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%Y-%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: [{
labels: {
format: '{value}KM',
style: {
color: '#4572A7'
}
},
title: {
text: '里程',
style: {
color: '#4572A7'
}
}
}],
// tooltip: {
// //跟随光标的精准线
// crosshairs: true,
// //多个图形共享一个气泡
// shared: false,
// xDateFormat: '时间：%Y-%m-%d'
// },
legend: {
enabled: true
},
//导出
exporting: {
enabled: true,
filename: '里程统计(天)',
width: 1200
},
credits: {
enabled: false //屏蔽版权信息
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart:Date.UTC( 2010,01,01)
}
},
series: [{
name: car_pla,
data: eval('('+dataChart+')')
}]
});
}
网友评论