jsf页面调用jquery来实现断面图的代码

 <script type="text/javascript">

var chart,dmdateZZ,jjsw,zgsw,dmLineName,jjMax,zgMax,stnm;

dmLineName = '#{heDaoBean.lineDmZZ}';//时间

dmdateZZ = #{heDaoBean.dmZZ};//断面图数据

jjsw = #{heDaoBean.wrz};//警戒水位线Y值

jjMax= #{heDaoBean.lenghtXZZ};//警戒水位线x值

zgsw = #{heDaoBean.obhtzMax};//最高水位线y值

zgMax= #{heDaoBean.lenghtXZZ};//最高水位线x值

stnm = '#{heDaoBean.stnm}';//河道水位站站名

$j(function($) {

chart = new Highcharts.Chart({

chart: {

renderTo: 'duanmian'//此处与下面的div的id值对应

},

colors: [

'#333333',

'#FF6633',

'#FF0000'

  ],

title: {

text: '河流横断面验测成果'

},

xAxis: {

reversed : false,

labels: {

formatter: function() {

return this.value +'m';

},

style: {

color: '#89A54E'

}

},

title: {

text: '起点距'

}

},

yAxis: {

labels: {

formatter: function() {

return this.value +'m';

},

style: {

color: '#89A54E'

}

},

title: {

text: '河底高程'

}

},

plotOptions: {

line: {

lineWidth: 6,

states: {

hover: {

lineWidth: 5

}

},

marker: {

enabled: true,

states: {

hover: {

enabled: false,

radius: 5,

lineWidth: 1

}

}

}

},

areaspline: {

lineWidth: 4,

states: {

hover: {

lineWidth: 5

}

},

marker: {

enabled: false,

states: {

hover: {

enabled: false,

radius: 5,

lineWidth: 1

}

}

}

}

},

series: [{

type: 'areaspline',//断面图 标识

name: '断面图',

data: dmdateZZ     //dmdateZZ的数据格式：[[0.0,500.0],[1.0,490.0],[4.0,400.0]]

}, {

type: 'line',//直线标识

name: '警戒水位',

data: [[0,jjsw],{

x:jjMax,

y: jjsw,

marker: {

   enabled: true,

symbol: 'url(/static/common/images/icons/sum.gif)'

}

} ]

}, {

type: 'line',

name: '实测最高水位',

data: [[0,zgsw],{

x:zgMax,

y:zgsw,

marker: {

   enabled: true,

symbol: 'url(/static/common/images/icons/sum.gif)'

}

} ]

},

{

name: dmLineName

},{

name: stnm

}]

});

});

</script>

<div align="center" id="duanmian" style="width: 100%; height: 320px; margin: 0 auto"></div>

 

界面显示效果图：