highcharts 简单动态加载数据 ajax加载数据
Highcharts 是一个用纯JavaScript编写的一个图表库。
Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表
下面列子可以简单的动态加载数据
[codee]
$(function () {
$('#dtu1').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'dtu 采集测试 每日 ph'
},
subtitle: {
text: '设备号: O3419X49VZ8MM30V'
},
xAxis: {
categories: eval("[" + $.ajax({url:"{:U('user/dtu/getdata2')}",async:false}).responseText + "]") //获取数据源操作信息
// ['0:00', '0:30', '1:00', '1:30']
// $.ajax({url:"{:U('user/dtu/getdata')}",async:false}).responseText
},
yAxis: {
title: {
text: 'ph值'
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
//radius: 10
},
// pointInterval: 3600000, // one hour
// pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)
}
},
series: [{
name: 'ph',
data: eval("[" + $.ajax({url:"{:U('user/dtu/getdata')}",async:false}).responseText + "]") //获取数据源操作信息
},
]
});
});
[/codee]
[codee]
$(function () {
var title = "{$title}";
var subtitle = "{$subtitle}";
var xAxis = "{$xAxis}";
var yAxis = "{$yAxis}";
var series = "{$series}";
var series_name = "{$series_name}";
draw(title, subtitle, xAxis, yAxis, series, series_name);
$(".showdata").click(function () {
var showdata = $(this).attr('data');
$.ajax({
url: "{:U('user/dtu/getdata')}",
type : "POST", //提交方式
data:{'type':showdata},
dataType: "json",
success: function (info) {
draw(info.title, info.subtitle, info.xAxis, info.yAxis, info.series, info.series_name);
}});
});
});
function draw(title, subtitle, xAxis, yAxis, series, series_name) {
$('#dtu1').highcharts({
chart: {
type: 'spline'
},
title: {
text: title
},
subtitle: {
text: subtitle
},
xAxis: {
categories: eval("[" + xAxis + "]")
},
yAxis: {
title: {
text: yAxis
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
}
},
series: [{
name: series_name,
data: eval("[" + series + "]")
},
]
});
}
[/codee]
