`

Highcharts例子,X轴为不连续时间

阅读更多

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 动态指定 x y数据

    三、处理X轴时间轴数据 当X轴数据是时间戳时,我们需要设置`xAxis.type`为`datetime`,并使用Highcharts支持的时间格式。例如: ```javascript xAxis: { type: 'datetime', labels: { dateTimeLabelFormats: { ...

    折线、双Y轴、不交叉、highcharts、按照日期分割线

    总结来说,创建一个具有双Y轴、不交叉折线、按日期分割线的Highcharts图表,需要正确配置X轴、Y轴,设置series,以及处理兼容性问题。在实际项目中,根据具体需求调整配置项,以达到理想的效果。

    Highcharts例子.tar

    Highcharts例子,里面有各种各样报表形图例子

    easyUI,Highcharts,时间控件例子

    在IT领域,前端开发是构建用户界面的关键部分,而`easyUI`、`Highcharts`以及与时间控件相关的技术都是实现动态交互界面的重要工具。本文将深入探讨这些技术及其在实际应用中的作用。 首先,`easyUI`是一个基于...

    highcharts示例代码(官方例子)

    5. **自定义选项**:Highcharts提供了大量的配置选项,可以调整图表的颜色、样式、轴标签、标题、图例等,以满足个性化需求。例如,你可以改变数据标签的字体大小、颜色,或者设置图表背景为渐变色。 6. **高级特性...

    highcharts的例子和封装

    在"highcharts的例子和封装"这个主题中,我们可以深入探讨Highcharts的使用方法以及如何进行封装,以便在项目中更高效地应用。 首先,`test1.html`很可能是包含Highcharts图表展示的一个示例网页。在HTML文件中,...

    Highcharts-3.0.0 经典图表例子

    `exporting-server`可能包含用于图表导出服务的相关文件,Highcharts支持将图表导出为图片格式,如PNG、JPEG或PDF。这个部分可能涉及服务器端的配置和处理,以便于用户能保存和分享图表。 `graphics`可能包含一些...

    highcharts demo

    X轴通常设置为`datetime`类型,以便正确地处理和显示日期时间数据。同时,可以使用`xAxis.labels.formatter`函数来自定义X轴的标签格式,使其更易读。 总的来说,"highcharts demo"项目是一个学习和实践Highcharts...

    highcharts

    6. **图表类型**:Highcharts支持多种图表类型,包括但不限于: - 柱状图(Column):常用于比较类别间的数值。 - 折线图(Line):展示趋势或连续数据。 - 饼图(Pie):展示各部分占总体的比例。 - 散点图...

    Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载

    在这个例子中,HTML页面将加载Highcharts库,并设置图表的基本配置,如标题、X轴和Y轴的标签、数据系列等。然后,它会使用AJAX(Asynchronous JavaScript and XML)技术向服务器发送异步请求,请求的数据格式为JSON...

    highcharts加载多条曲线数据

    3. **配置对象**:创建一个JavaScript对象,包含图表的配置信息,如标题、类型、数据、X轴和Y轴的设置等。例如,加载多条曲线数据的配置可能如下: ```javascript var chartOptions = { chart: { renderTo: '...

    Highcharts-8.1.2.zip

    75% 的直角坐标系(包含 X轴 和 Y轴)图表中是时间轴图表,因为 Highcharts 对时间轴的处理非常智能。Highcharts 以毫秒为单位,可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。 exporting导出和打印 ...

    Highcharts

    - **折线图(Line Charts)**:用于展示连续的数据趋势,常用于时间序列数据。 - **柱状图(Column Charts)**:用于比较不同类别的数据量,直观易懂。 - **饼图(Pie Charts)**:展示各部分占整体的比例,适用...

    jquery Highcharts jquery Highcharts

    Highcharts是一款强大的JavaScript图表库,它能够为网页和应用程序提供丰富多样的数据可视化效果。基于jQuery库,Highcharts使得在Web页面上创建交互式图表变得简单易行。在这个压缩包中,很可能包含了Highcharts的...

    jquery+ajax+highcharts+mysql实战例子

    我们可以使用Highcharts的API来创建图表,设置各种属性如标题、轴标签、数据系列等,并根据Ajax获取的数据动态更新图表。 MySQL是流行的开源关系型数据库管理系统,用于存储和管理项目中的数据。在这个系统中,员工...

    网页图表Highcharts实践教程基础篇

    Highcharts是一款强大的JavaScript库,专为Web开发者设计,用于生成高质量的数据可视化图表。它支持多种图表类型,包括折线图、柱状图、饼图、散点图、热力图等,能够帮助用户直观地理解复杂数据。 一、Highcharts...

    highcharts中文帮助文档(API)

    5. X轴配置:X轴配置选项(xAxis)用于设置图表X轴的相关属性,如设置分类名称(categories)、轴名称(title)等。这对于数据的分类展示尤其重要。 由于文档是通过OCR技术扫描所得,其中的一些信息可能存在文字...

Global site tag (gtag.js) - Google Analytics