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();在从新创建新的曲线
相关推荐
三、处理X轴时间轴数据 当X轴数据是时间戳时,我们需要设置`xAxis.type`为`datetime`,并使用Highcharts支持的时间格式。例如: ```javascript xAxis: { type: 'datetime', labels: { dateTimeLabelFormats: { ...
总结来说,创建一个具有双Y轴、不交叉折线、按日期分割线的Highcharts图表,需要正确配置X轴、Y轴,设置series,以及处理兼容性问题。在实际项目中,根据具体需求调整配置项,以达到理想的效果。
Highcharts例子,里面有各种各样报表形图例子
在IT领域,前端开发是构建用户界面的关键部分,而`easyUI`、`Highcharts`以及与时间控件相关的技术都是实现动态交互界面的重要工具。本文将深入探讨这些技术及其在实际应用中的作用。 首先,`easyUI`是一个基于...
5. **自定义选项**:Highcharts提供了大量的配置选项,可以调整图表的颜色、样式、轴标签、标题、图例等,以满足个性化需求。例如,你可以改变数据标签的字体大小、颜色,或者设置图表背景为渐变色。 6. **高级特性...
在"highcharts的例子和封装"这个主题中,我们可以深入探讨Highcharts的使用方法以及如何进行封装,以便在项目中更高效地应用。 首先,`test1.html`很可能是包含Highcharts图表展示的一个示例网页。在HTML文件中,...
`exporting-server`可能包含用于图表导出服务的相关文件,Highcharts支持将图表导出为图片格式,如PNG、JPEG或PDF。这个部分可能涉及服务器端的配置和处理,以便于用户能保存和分享图表。 `graphics`可能包含一些...
X轴通常设置为`datetime`类型,以便正确地处理和显示日期时间数据。同时,可以使用`xAxis.labels.formatter`函数来自定义X轴的标签格式,使其更易读。 总的来说,"highcharts demo"项目是一个学习和实践Highcharts...
6. **图表类型**:Highcharts支持多种图表类型,包括但不限于: - 柱状图(Column):常用于比较类别间的数值。 - 折线图(Line):展示趋势或连续数据。 - 饼图(Pie):展示各部分占总体的比例。 - 散点图...
在这个例子中,HTML页面将加载Highcharts库,并设置图表的基本配置,如标题、X轴和Y轴的标签、数据系列等。然后,它会使用AJAX(Asynchronous JavaScript and XML)技术向服务器发送异步请求,请求的数据格式为JSON...
3. **配置对象**:创建一个JavaScript对象,包含图表的配置信息,如标题、类型、数据、X轴和Y轴的设置等。例如,加载多条曲线数据的配置可能如下: ```javascript var chartOptions = { chart: { renderTo: '...
75% 的直角坐标系(包含 X轴 和 Y轴)图表中是时间轴图表,因为 Highcharts 对时间轴的处理非常智能。Highcharts 以毫秒为单位,可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。 exporting导出和打印 ...
- **折线图(Line Charts)**:用于展示连续的数据趋势,常用于时间序列数据。 - **柱状图(Column Charts)**:用于比较不同类别的数据量,直观易懂。 - **饼图(Pie Charts)**:展示各部分占整体的比例,适用...
Highcharts是一款强大的JavaScript图表库,它能够为网页和应用程序提供丰富多样的数据可视化效果。基于jQuery库,Highcharts使得在Web页面上创建交互式图表变得简单易行。在这个压缩包中,很可能包含了Highcharts的...
我们可以使用Highcharts的API来创建图表,设置各种属性如标题、轴标签、数据系列等,并根据Ajax获取的数据动态更新图表。 MySQL是流行的开源关系型数据库管理系统,用于存储和管理项目中的数据。在这个系统中,员工...
Highcharts是一款强大的JavaScript库,专为Web开发者设计,用于生成高质量的数据可视化图表。它支持多种图表类型,包括折线图、柱状图、饼图、散点图、热力图等,能够帮助用户直观地理解复杂数据。 一、Highcharts...
5. X轴配置:X轴配置选项(xAxis)用于设置图表X轴的相关属性,如设置分类名称(categories)、轴名称(title)等。这对于数据的分类展示尤其重要。 由于文档是通过OCR技术扫描所得,其中的一些信息可能存在文字...