$(function (){ Highcharts.setOptions({ global: { useUTC: false } }); });
var chart; var varseries; // 动态曲线图 function b(){ chart = new Highcharts.Chart({ chart:{ // 将报表对象渲染到层上 renderTo:'container2' , defaultSeriesType:'spline', marginRight: 10 }, // chart end title:{ text:'辛加涛 动态曲线图' }, yAxis:{ title:{ text:'PCA值' }, tickPositions: [-10,-5,0,5,10,15, 20,25,30,35,40,45,50,55,60,70,80,90,100], //指定竖轴坐标点的值 //指定y 直线的样式 plotLines: [ { value: 0, width: 1, color: '#808080' } ] }, /* xAxis: { type: 'datetime', labels: { step: 4, formatter: function () { return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S' , this.value); } } },*/ xAxis: { title: { text: '时间' }, //linear" or "datetime" type: 'datetime', //坐标间隔 tickPixelInterval: 150 }, //鼠标放在某个点上时的提示信息 //dateFormat,numberFormat是highCharts的工具类 tooltip: { formatter: function() { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);//2数据保留2位小数 } }, legend: { enabled: true }, exporting: { enabled: true }, // 设定报表对象的初始数据 /* series:[{ data:[0,0] }]*/ series: [{ name: 'Random data', data: (function() { var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 1000, y: 0 }); } return data; })() }] }); // Highcharts.Chart end varseries = chart.series[0]; run(); } var interval; function run(){ interval = setInterval(functiongetForm,1000); } // 获取后台数据 function functiongetForm(){ $.ajax({ type: 'POST', url: $.contextPath + "/DemoAction.do?method=quxianPic", dataType: 'json', success: function(rdata) { // data= jQuery.parseJSON(data); varseries.addPoint([rdata.x,rdata.y],true,true); chart.redraw(); }, error: function(XMLHttpRequest, textStatus, errorThrown) { } }); }
/** * 动态曲线图 */ public ActionForward quxianPic(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) { System.out.println("进入quxianPic Action"); try { JSONObject jsonObject = jsonObject = new JSONObject(); jsonObject = new JSONObject(); int x = (int) (Math.random() * 50); int y = (int) (Math.random() * 50); jsonObject.put("x", new Date().getTime()); jsonObject.put("y", y); // 返回 RiaUtils.writeJsonText2Page(jsonObject.toString(), response); } catch (Exception e) { e.printStackTrace(); } return null; }
相关推荐
NULL 博文链接:https://ligson.iteye.com/blog/1340433
Highcharts 构建曲线图。最简单的一个例子。 最简单的代码,web项目,解压后直接导入运行即可
使用highcharts实现饼图和曲线图的展示
highcharts 动态生成柱状图,曲线图,仪表盘图,调用totalReport方法,传入要生成图表的类型 和数据参数 标题等 可以自动生成图
做数据的图标显示,适合用highcharts.js插件来实现,可以做曲线图、柱状图、面积图等
今天给大家推荐一款强大的highcharts插件,适合做一些曲线图之类的前端特效 请在火狐等高版本浏览器下浏览网站,低版本不支持
实时显示highcharts曲线图,读取本地txt文件
js画饼状图 柱状图 曲线图,实现中文描述,自定义模块名称,用Highcharts实现饼状图 柱状图 曲线图,可参开Highcharts开发文档
NULL 博文链接:https://747017186.iteye.com/blog/2196221
NULL 博文链接:https://747017186.iteye.com/blog/2071305
jQuery及highcharts做cpu动态走势图,https://blog.csdn.net/qq_40374604/article/details/83578837,有问题请留言
该项目主要是使用.NET MVC 和Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图,让数据更加的明显美观,可以满足绝多数数据报表的需求!
强大的highcharts 内置php+mysql饼状图动态开发实例 及各种曲线 柱状图 饼状图示例!
Java和Highcharts结合实现折线图
android的webview控件的highchart曲线的实现
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
各种图表js加实例,highcharts实例,使用说明
目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。 HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外...
Highcharts是一个制作图表的Javascript类库,可以制作的图表有:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散状图等等。主要特性: 1、提示功能:鼠标移动到图表的某一点上有提示信息 2...更多>> ...
Highcharts是一个纯JavaScript编写的图表库,它提供了一个将交互式的图表添加到您的网站或Web应用程序的简单方法。 Highcharts目前支持折线图,曲线图,块状图,块状-曲线图,柱形图,条形图,饼图和散点图类型。