1.引入 js文件
<script type="text/javascript" src="${ctx}/static/comp/highcharts/highcharts.js" ></script>
2.代码:
Highcharts.setOptions({ global: { useUTC: false } }); var chart; /* containerId为容器id,data为时间点数据格式为: [{name:'333',data:[[1431288610000,9],[1431292210000,40],[1431295810000,9],[1431375010000,20],[1431378610000,30],[1431382210000,10]]},{name:'12312312',data:[[1431385810000,20],[1431389410000,30],[1431457810000,90],[1431461410000,90],[1431465010000,50],[1431468610000,10],[1431479410000,40]]}]解释:数据为时间点数据,没一点的x轴为时间毫秒数,y轴为数据值 */ function createHighcharts(containerId,data){ chart = new Highcharts.Chart({ chart: { renderTo:containerId, type: 'spline', zoomType: 'x' }, title: { text: '剂量数据及变化曲线' }, /*subtitle: { text: 'Irregular time data in Highcharts JS' }, */ xAxis: { type: 'datetime', /* dateTimeLabelFormats: { hour: '%H:%M' } */ labels: { step: 2, formatter: function () { return Highcharts.dateFormat('%Y-%m-%d', this.value); } } }, yAxis: { title: { text: '剂量值(uSv/h)' }, min: 0 }, tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br>'+ Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y +' (uSv/h)'; } }, exporting : { enabled : false }, plotOptions: { series: { pointInterval: 3600 * 1000 } }, series:data }); }
注意事项:
1.Highcharts.setOptions({ global: { useUTC: false } }); 这句为 设置highcharts时间格式 不为UTC时间,如果不设置 会出现 前台显示时间和后台 时间差8小时的状况。
2.后台的数据时间点要升序排序,否则在鼠标移动时 HighCharts Tooltip是只能显示第一和最后一点的提示信息
3.在前端如果曲线多的时候或者重复画曲线的时候,要调用chart.destroy();在从新创建新的曲线
相关推荐
Highcharts例子,里面有各种各样报表形图例子
折线、双Y轴、不交叉、highcharts、按照日期分割线 折线、双Y轴、不交叉、highcharts、按照日期分割线
是一些例子,其中使用到了js动态的生成下拉列表,input等技术手段。 使用了easyUI的时间控件及时间格式化方法和Highcharts
highcharts 动态指定 x y数据
1111111JavaScript封装的highcharts的例子、一定要下的例子
所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调。 下面一起来学习学习Highcharts的...
报表显示 highcharts 报表显示 highcharts 报表显示 highcharts
jquery Highcharts jquery Highcharts jquery Highcharts
highcharts示例代码,用来实现各种图表展现,数据组合快,对应图表种类多。
highcharts 导出图片 .net c#Demo例子
75% 的直角坐标系(包含 X轴 和 Y轴)图表中是时间轴图表,因为 Highcharts 对时间轴的处理非常智能。Highcharts 以毫秒为单位,可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。 exporting导出和打印 ...
jquery+ajax+highcharts+mysql实战例子,需要配套视频请留言
HighCharts导出图片是发现请求的是官网,于是找了一下,整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...
HighCharts导出图片是发现请求的是官网,于是找了一下,整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
Highcharts-3.0,内含丰富的曲线,棒图和饼图等等几十个例子。
这是highcharts的一个简单demo,主要是以时间作为X轴来实现的
Highcharts-2.3.5 是一个用纯...HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外HighCharts还有很好的兼容性,能够完美支持当前大多数浏览器。
Highcharts 例子。HighChart API。