`

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_强大的jQuery图表制作功能

    - `xAxis` 和 `yAxis`: 定义X轴和Y轴的属性,如分类、标题等。 - `tooltip`: 自定义鼠标悬停时的提示信息格式。 - `series`: 指定数据源,这里使用了Ajax获取数据的方式。 #### 四、总结 Highcharts因其强大的...

    曲线图例子

    4. 绘制数据:将数据绑定到图表上,设置x轴和y轴的刻度和标签,以及曲线的样式。 5. 更新和交互:如果数据是动态的,可以监听事件或定时器来更新图表,同时可能还需要添加交互功能,如鼠标悬停显示详细信息、点击...

    折线图实例

    这段代码将创建一个包含两个数据序列的折线图,每个序列对应不同的颜色和名称,x轴为月份,y轴为值。 接下来,我们讨论柱状图。柱状图用于比较不同类别的数值,每个类别由垂直或水平的矩形柱表示。在Highcharts中,...

    js曲线图类,用JS脚本实现的曲线图

    首先,曲线图是一种常见的数据可视化工具,它通过连接一系列数据点形成连续的曲线,以展示数据随时间或其他变量的变化趋势。在JavaScript中,我们通常借助库如Chart.js、D3.js或Highcharts等来快速构建曲线图。然而...

    HighChart曲线图

    4. **配置选项**:创建JavaScript对象来定义图表的各种属性,包括标题、X轴和Y轴的标签、数据系列、颜色、图例等。例如: ```javascript var options = { chart: { renderTo: 'container' }, title: { text: '...

    bootstrap线型图

    `labels`数组表示X轴的刻度,`datasets`包含了每个系列的数据和样式。`backgroundColor`和`borderColor`用于定义数据点的填充色和边框色,`borderWidth`则是线条的宽度。 对于更复杂的需求,如多系列线型图、添加...

Global site tag (gtag.js) - Google Analytics