GridView行點(diǎn)擊事件數(shù)據(jù)賦值到highcharts 的使用

1.行改變樣式及點(diǎn)擊事件

protected void QMSInfoGDV_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    //當(dāng)鼠標(biāo)停留時(shí)更改背景色
                    e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#95B8FF'");
                    //當(dāng)鼠標(biāo)移開時(shí)還原背景色
                    e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
                    //設(shè)置懸浮鼠標(biāo)指針形狀為"小手"
                    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.點(diǎn)擊事件獲取到數(shù)據(jù)

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中單元格的內(nèi)容
                    time=Date.parse(column);
                    if(grid_view.rows[i].cells[j].innerText>0){
                        tableInfo = grid_view.rows[i].cells[j].innerText;  //獲取Table中單元格的內(nèi)容
                    }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中單元格的內(nèi)容  
                        } 
                }
                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.數(shù)組賦值到highcharts的數(shù)據(jù)源sersies

$(function() {
            ChartLoad();
        });
        function ChartLoad(car_pla,dataChart) {
            
            Highcharts.setOptions({
                
                global: {
                    //時(shí)間設(shè)置
                    useUTC: false//非常重要
                },
                lang: {
                    resetZoom: "縮放重置"
                }
            });
            
            $('#container').highcharts({
                chart: {
                    type:"spline",
                    //圖形放大類型
                    zoomType: 'x',
                    //圖形右側(cè)空間
                    spacingRight: 20
                },
                
                title: {
                    text: '里程統(tǒng)計(jì)(天)',
                    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: {
//                        //跟隨光標(biāo)的精準(zhǔn)線
//                        crosshairs: true,
//                        //多個(gè)圖形共享一個(gè)氣泡
//                        shared: false,
//                        xDateFormat: '時(shí)間：%Y-%m-%d'
//                    },

                
                legend: {
                    enabled: true
                },

                //導(dǎo)出
                exporting: {
                    enabled: true,
                    filename: '里程統(tǒng)計(jì)(天)',
                    width: 1200
                },

                credits: {
                    enabled: false //屏蔽版權(quán)信息
                },

                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart:Date.UTC( 2010,01,01)
                    }
                },

                series: [{
                name: car_pla,
                data: eval('('+dataChart+')')
                }]

            });        
        }