Highchart热图 - DateTime Y轴对齐
我正在尝试使用Highcharts创建热图，日期时间为x轴和y轴。
除了y轴的对齐外，一切看起来都很好。
“00:00”应位于图表的最底部，但它偏移/居中于第一个框。
我环顾四周，但无法弄清楚我需要摆弄什么样的设置。任何帮助表示赞赏。
请参阅下面的jsFiddle示例。数据数组包含[EpochTicksForStartOfDay, TicksForTimeOfDay, Value]
https://jsfiddle.net/h2zb2tos/5/
更新：我希望y轴线和标签与热图框的底部对齐。第一个（最低）方框在00:00“开始”，第二个在01:00开始，第三个在02:00开始。所以我希望这些线路排成一行。
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 800px; min-width: 600px; margin: 0 auto"></div>
的JavaScript
$(function() {
var json = {
"Data": [
[1453075200000, 0, 45.0000],
[1453075200000, 3600000, 46.0000],
[1453075200000, 7200000, 47.0000],
[1453075200000, 10800000, 48.0000],
[1453075200000, 14400000, 47.0000],
[1453075200000, 18000000, 46.0000],
[1453075200000, 21600000, 45.0000],
[1453075200000, 25200000, 46.0000],
[1453075200000, 28800000, 42.0000],
[1453075200000, 32400000, 43.0000],
[1453075200000, 36000000, 49.0000],
[1453075200000, 39600000, 42.0000],
[1453075200000, 43200000, 43.0000],
[1453075200000, 46800000, 46.0000],
[1453075200000, 50400000, 44.0000],
[1453075200000, 54000000, 44.0000],
[1453075200000, 57600000, 43.0000],
[1453075200000, 61200000, 41.0000],
[1453075200000, 64800000, 41.0000],
[1453075200000, 68400000, 40.0000],
[1453075200000, 72000000, 45.0000],
[1453075200000, 75600000, 43.0000],
[1453075200000, 79200000, 43.0000],
[1453075200000, 82800000, 45.0000],
[1453161600000, 0, 41.0000],
[1453161600000, 3600000, 42.0000],
[1453161600000, 7200000, 43.0000],
[1453161600000, 10800000, 44.0000],
[1453161600000, 14400000, 44.0000],
[1453161600000, 18000000, 43.0000],
[1453161600000, 21600000, 40.0000],
[1453161600000, 25200000, 39.0000],
[1453161600000, 28800000, 37.0000],
[1453161600000, 32400000, 36.0000],
[1453161600000, 36000000, 39.0000],
[1453161600000, 39600000, 35.0000],
[1453161600000, 43200000, 36.0000],
[1453161600000, 46800000, 37.0000],
[1453161600000, 50400000, 36.0000],
[1453161600000, 54000000, 36.0000],
[1453161600000, 57600000, 35.0000],
[1453161600000, 61200000, 35.0000],
[1453161600000, 64800000, 36.0000],
[1453161600000, 68400000, 35.0000],
[1453161600000, 72000000, 42.0000],
[1453161600000, 75600000, 42.0000],
[1453161600000, 79200000, 40.0000],
[1453161600000, 82800000, 36.0000],
[1453248000000, 0, 34.0000],
[1453248000000, 3600000, 34.0000],
[1453248000000, 7200000, 37.0000],
[1453248000000, 10800000, 37.0000],
[1453248000000, 14400000, 39.0000],
[1453248000000, 18000000, 38.0000],
[1453248000000, 21600000, 35.0000],
[1453248000000, 25200000, 36.0000],
[1453248000000, 28800000, 33.0000],
[1453248000000, 32400000, 33.0000],
[1453248000000, 36000000, 33.0000],
[1453248000000, 39600000, 34.0000],
[1453248000000, 43200000, 38.0000],
[1453248000000, 46800000, 36.0000],
[1453248000000, 50400000, 36.0000],
[1453248000000, 54000000, 36.0000],
[1453248000000, 57600000, 36.0000],
[1453248000000, 61200000, 36.0000],
[1453248000000, 64800000, 36.0000],
[1453248000000, 68400000, 37.0000],
[1453248000000, 72000000, 40.0000],
[1453248000000, 75600000, 41.0000],
[1453248000000, 79200000, 36.0000],
[1453248000000, 82800000, 48.0000],
[1453334400000, 0, 47.0000],
[1453334400000, 3600000, 45.0000],
[1453334400000, 7200000, 45.0000],
[1453334400000, 10800000, 45.0000],
[1453334400000, 14400000, 45.0000],
[1453334400000, 18000000, 43.0000],
[1453334400000, 21600000, 43.0000],
[1453334400000, 25200000, 41.0000],
[1453334400000, 28800000, 40.0000],
[1453334400000, 32400000, 49.0000],
[1453334400000, 36000000, 43.0000],
[1453334400000, 39600000, 40.0000],
[1453334400000, 43200000, 39.0000],
[1453334400000, 46800000, 39.0000],
[1453334400000, 50400000, 38.0000],
[1453334400000, 54000000, 38.0000],
[1453334400000, 57600000, 40.0000],
[1453334400000, 61200000, 40.0000],
[1453334400000, 64800000, 38.0000],
[1453334400000, 68400000, 38.0000],
[1453334400000, 72000000, 40.0000],
[1453334400000, 75600000, 42.0000],
[1453334400000, 79200000, 49.0000],
[1453334400000, 82800000, 52.0000],
[1453420800000, 0, 41.0000],
[1453420800000, 3600000, 40.0000],
[1453420800000, 7200000, 44.0000],
[1453420800000, 10800000, 46.0000],
[1453420800000, 14400000, 45.0000],
[1453420800000, 18000000, 46.0000],
[1453420800000, 21600000, 47.0000],
[1453420800000, 25200000, 47.0000],
[1453420800000, 28800000, 45.0000],
[1453420800000, 32400000, 48.0000],
[1453420800000, 36000000, 47.0000],
[1453420800000, 39600000, 46.0000],
[1453420800000, 43200000, 47.0000],
[1453420800000, 46800000, 58.0000],
[1453420800000, 50400000, 58.0000],
[1453420800000, 54000000, 58.0000],
[1453420800000, 57600000, 66.0000],
[1453420800000, 61200000, 60.0000],
[1453420800000, 64800000, 60.0000],
[1453420800000, 68400000, 54.0000],
[1453420800000, 72000000, 56.0000],
[1453420800000, 75600000, 55.0000],
[1453420800000, 79200000, 65.0000],
[1453420800000, 82800000, 63.0000],
[1453507200000, 0, 54.0000],
[1453507200000, 3600000, 61.0000],
[1453507200000, 7200000, 61.0000],
[1453507200000, 10800000, 61.0000],
[1453507200000, 14400000, 60.0000],
[1453507200000, 18000000, 60.0000],
[1453507200000, 21600000, 56.0000],
[1453507200000, 25200000, 57.0000],
[1453507200000, 28800000, 53.0000],
[1453507200000, 32400000, 54.0000],
[1453507200000, 36000000, 56.0000],
[1453507200000, 39600000, 56.0000],
[1453507200000, 43200000, 60.0000],
[1453507200000, 46800000, 63.0000],
[1453507200000, 50400000, 59.0000],
[1453507200000, 54000000, 58.0000],
[1453507200000, 57600000, 57.0000],
[1453507200000, 61200000, 59.0000],
[1453507200000, 64800000, 58.0000],
[1453507200000, 68400000, 58.0000],
[1453507200000, 72000000, 54.0000],
[1453507200000, 75600000, 54.0000],
[1453507200000, 79200000, 57.0000],
[1453507200000, 82800000, 53.0000],
[1453593600000, 0, 54.0000],
[1453593600000, 3600000, 54.0000],
[1453593600000, 7200000, 56.0000],
[1453593600000, 10800000, 57.0000],
[1453593600000, 14400000, 57.0000],
[1453593600000, 18000000, 55.0000],
[1453593600000, 21600000, 56.0000],
[1453593600000, 25200000, 57.0000],
[1453593600000, 28800000, 55.0000],
[1453593600000, 32400000, 55.0000],
[1453593600000, 36000000, 58.0000],
[1453593600000, 39600000, 61.0000],
[1453593600000, 43200000, 61.0000],
[1453593600000, 46800000, 61.0000],
[1453593600000, 50400000, 61.0000],
[1453593600000, 54000000, 59.0000],
[1453593600000, 57600000, 60.0000],
[1453593600000, 61200000, 62.0000],
[1453593600000, 64800000, 63.0000],
[1453593600000, 68400000, 67.0000],
[1453593600000, 72000000, 62.0000],
[1453593600000, 75600000, 63.0000],
[1453593600000, 79200000, 65.0000],
[1453593600000, 82800000, 65.0000]
]
};
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'My Title'
},
xAxis: {
type: 'datetime'
},
yAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M', this.value);
}
}
},
colorAxis: {
min: 0,
stops: [
[0, '#04006D'],
[0.33, '#119E00'],
[0.67, '#FFBF00'],
[1, '#F20011']
]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function() {
return '<b>' + this.point.value + '</b>';
}
},
series: [{
colsize: 86400000,
rowsize: 3600000,
borderWidth: 1,
data: json.Data
}]
});
});
1 个答案:
答案 0 :(得分：0)
尝试在y标签中添加yAxis值，如下所示：
yAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%H:%M', this.value);
},
y: 20
}
},
这将导致您的标签发生以下变化：
以下是一个经过修改的小提琴供您参考：https://jsfiddle.net/brightmatrix/h2zb2tos/4/
如果这对你的问题有帮助，请告诉我！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？