高图表区域:以小时为单位的 x 轴,但每小时显示多个点
Highcharts area: x-axis in hours but showing multiple points in each hour
我正在使用Highcharts的这个例子,但我需要调整它如下:
- 让 x 轴显示从当前小时开始的当前 24 小时
(我能够绘制 24 小时,但不能从当前小时绘制)
xAxis: { type: 'datetime', tickInterval: 3600 * 1000, min: Date.UTC(2013,4,22), max: Date.UTC(2013,4,23), },
显示连续 2 小时之间的多个点
有什么想法吗?
以下是 jsfiddle 的完整代码:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]
});
});
您可以使用一些javascript和对highcharts全局选项的更改来执行此操作。以下是获取当前时间的代码:
var now = new Date();
var utc_timestamp = now.getTime();
var startTime = utc_timestamp;
var endTime = utc_timestamp + 86400000; // add 24 hours (in millis).
console.log(startTime);
console.log(endTime);
这将返回 UTC 时间。现在,要使图表使用用户的本地时间,请将useUTC
参数设置为:
Highcharts.setOptions({
global: {
useUTC: false
}
});
因此,您的xAxis
如下所示:
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000,
min: startTime,
max: endTime
},
这是功能性但基本的演示。请注意,您还必须更改plotOptions.series.pointStart
和.pointInterval
。请注意,该系列有超过 24 分。
相关文章:
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 每小时倒计时一次,但以30分钟为单位
- MVC中关于表的自定义工具提示-每行显示数据
- jQuery每6小时倒计时一次
- Highcharts tick每小时间隔一次
- 元素维度正在DOM中更新,但更改并没有发生;t在调整大小时显示
- 在nodeJS中每小时运行一次调度作业
- 如何每10分钟运行一次函数,在10分钟标记上,每小时运行6次
- 简单的javascript时间/金钱每小时计算器
- 设置javascript cookie每小时过期一次
- 完整日历提前 1 小时显示事件
- 每 3 小时显示一次对话框
- 如何每小时调用一次函数
- 从天气 API 获取每小时信息
- 高度自动 - 调整浏览器大小时显示隐藏内容
- 每小时自动运行一次PHP页面 - 无需使用Cron作业
- 高图表区域:以小时为单位的 x 轴,但每小时显示多个点
- 每小时显示另一个内容
- 在表中以AM/PM格式显示小时的另一种方式:在angular JS中,每小时从上午12点到晚上11点
- 每X小时显示两个图像,Javascript