2018-12-04 GridView行点击事件数据赋值到hig

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+')')
                }]

            });        
        }