最近项目要做曲线报表之前用的是生成图片然后传到前端感觉不是很好在网上找到资料说highstock就可以而且还可以做类似股票的那种实时的曲线研究的一段时间把项目问题解决了做个总结
首先把highstockjs放到项目资源路径下因为这个需要JQuery所以jqueryminjs也需要放而且在页面引用是要先引用jqueryminjs再引用highstockjs刚开始做的时候没注意页面加载完后不出图我做的这个图还需要exportingjs所以也要放进项目资源文件夹中
页面代码 <script type=text/javascriptsrc=${pagntextPath}/js/jqueryminjs></script>
<script type=text/javascriptsrc=${pagntextPath}/js/highstockjs></script>
<script type=text/javascriptsrc=${pagntextPath}/js/exportingjs></script>
<script >
$（document）ready（function（）{
$（#sub）click（function（）{
var names = [];
$（input:checked[name=sms]）each（function（i e） {
var ks = $（this）val（）
if（ks == ） {
namespush（ ）
}
else if （ks == ）{
namespush（ ）
}
else if （ks == ）{
namespush（ ）
}
else if （ks == ）{
namespush（ ）
}
else if （ks == ）{
namespush（ ）
}
else if （ks == ）{
namespush（ ）
}
else if （ks == ）{
namespush（ ）
}
}）
var seriesOptions = []
yAxisOptions = []
seriesCounter =
colors = HighchartsgetOptions（）colors;
$each（names function（i name） {
//后台读取json数据
$getJSON（<%=requestgetContextPath（）%>/JSONByAction?name=+name+toh=+ function（data） {
//将json数据放入seriesOptions数组
seriesOptions[i] = {
name: name
data: data
};
seriesCounter++;
if （seriesCounter == nameslength） {
//开始绘图
createChart（）
}
}）
function createChart（） {
windowchart = new HighchartsStockChart（{
chart : {
renderTo : container
}
rangeSelector : {
selected :
}
title : {
text : 湿度显示
}
credits : {
enabled : false//去掉右下角的标志
}
rangeSelector: {
// 缩放选择按钮是一个数组
// 其中type可以是 millisecond second minute day week month ytd （year to date） year 和 all
// 其中count是指多少个单位type
// 其中text是配置显示在按钮上的文字
buttons: [{
type: month
count:
text: 月
} {
type: month
count:
text: 月
} {
type: month
count:
text: 月
} {
type: year
count:
text: 年
}{
type: year
count:
text: 年
} {
type: all
text: 所有
}]
// 默认选择域（缩放按钮中的第一个）（缩放按钮中的第二个）……
selected:
// 是否允许input标签选框
inputEnabled: false
}
//右上角日期区间格式化
rangeSelector:{
selected:
inputDateFormat:%Y%m%d
}
xAxis: {
type: datetime
//x轴时间的格式化
dateTimeLabelFormats: {
second: %Y%m%d<br/>%H:%M:%S
minute: %Y%m%d<br/>%H:%M
hour: %Y%m%d<br/>%H:%M
day: %Y<br/>%m%d
week: %Y<br/>%m%d
month: %Y%m
year: %Y
}
}
yAxis : {
title : {
text : 湿度
}
labels: {
formatter: function（） {
return （thisvalue > ? + : ） + thisvalue + %;
}
}
}
//弹出框的格式化显示
tooltip: {
xDateFormat: %Y%m%d %A
pointFormat: <span >{pointname}</span>: <b>{pointy}</b><br/>
valueDecimals:
}
series :seriesOptions
}）
}
}）
}）
}）
</script>
<div id=container ></div>
后台其实就简单了
@SuppressWarnings（rawtypes）
@RequestMapping（/queHumHistory）
@ResponseBody
public Map kan（HttpServletRequest requestHttpServletResponse response）{
int id = IntegerparseInt（requestgetParameter（region））
List<TempHumHistory> historyList = historyImplqueHistoryById（id）
Map<String Object> modelMap = new HashMap<String Object>（）
modelMapput（total ）
modelMapput（data historyList）
modelMapput（success true）
return modelMap;
}
