如何正确使用Highcharts中的时区选项
Highcharts是一款功能强大的JavaScript图表库，用于在网页中创建各种类型的交互式图表。时区选项是Highcharts中的一个重要功能，它允许我们在图表中正确显示不同时区的日期和时间。
要正确使用Highcharts中的时区选项，可以按照以下步骤进行操作：
- 引入Highcharts库：首先，在HTML文件中引入Highcharts库的JavaScript文件。可以通过下载Highcharts库并将其引入到项目中，或者使用CDN链接。
- 创建图表容器：在HTML文件中创建一个用于显示图表的容器元素，例如一个
<div>标签，并为其指定一个唯一的ID。 - 准备数据：准备要在图表中显示的数据。这可以是一个数组、对象或从服务器获取的数据。
- 配置图表选项：创建一个JavaScript对象，用于配置图表的各种选项。其中包括时区选项。
- 设置时区：在图表选项对象中，使用
time属性来设置时区选项。可以通过timezoneOffset属性设置时区偏移量，以分钟为单位。例如，对于东八区（北京时间），可以将timezoneOffset设置为-480（-8小时 * 60分钟）。 - 设置时间格式：可以使用
dateTimeLabelFormats属性来设置不同时间单位的显示格式。例如，hour表示小时，day表示天，week表示周，month表示月，year表示年。可以根据需要设置不同时间单位的格式。
- 设置时区：在图表选项对象中，使用
- 创建图表：使用Highcharts库提供的
chart()函数创建图表，并将图表选项对象作为参数传递给该函数。同时，指定要在哪个容器元素中显示图表，通过指定容器元素的ID来实现。 - 显示图表：调用图表对象的
series属性，将准备好的数据传递给该属性，以在图表中显示数据。
以下是一个示例代码，展示了如何正确使用Highcharts中的时区选项：
<!DOCTYPE html>
<html>
<head>
<title>Highcharts时区选项示例</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="chartContainer" style="width: 600px; height: 400px;"></div>
<script>
// 准备数据
var data = [
[Date.UTC(2022, 0, 1, 0, 0, 0), 10],
[Date.UTC(2022, 0, 2, 0, 0, 0), 20],
[Date.UTC(2022, 0, 3, 0, 0, 0), 15],
// 更多数据...
];
// 配置图表选项
var options = {
chart: {
renderTo: 'chartContainer'
},
time: {
timezoneOffset: -480 // 东八区（北京时间）
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y-%m-%d', // 日期格式为年-月-日
hour: '%Y-%m-%d %H:%M' // 日期时间格式为年-月-日 时:分
}
},
series: [{
data: data
}]
};
// 创建图表
var chart = new Highcharts.Chart(options);
</script>
</body>
</html>在上述示例代码中，我们首先引入了Highcharts库的JavaScript文件。然后，创建了一个<div>容器元素，并为其指定了一个唯一的ID（chartContainer）。接下来，准备了要在图表中显示的数据，并配置了图表选项对象。在图表选项对象中，设置了时区选项为东八区（北京时间），并设置了日期和日期时间的显示格式。最后，使用chart()函数创建了图表，并将数据传递给图表对象的series属性，以在图表中显示数据。
这样，我们就可以正确使用Highcharts中的时区选项来显示不同时区的日期和时间了。
腾讯云相关产品和产品介绍链接地址：
相关·内容
长话短说:我想基于我的客户时间显示x轴上的日期，该时间来自服务器，即'Asia/Calcutta‘..etc。我将useUTC设置为false，并提供如下时区： useUTC: false,}然而，我看到Highchart正在处理DST转换，我可以看到x轴缺少一个小时，因为我自己的时区是“欧洲/伦敦”。注意:在‘亚洲/加尔各答’时区</em
浏览 22提问于2021-03-05得票数 0
回答已采纳
2回答
我正试图在中设置时区。代码看起来像 time: { timezone高海图采取错误的时区，采取时区的当前位置。
Highcharts.setOption
浏览 0提问于2019-09-04得票数 1
回答已采纳
3回答
我们正在尝试在不同的区域显示时间。我们将utc设置为false，并将其从服务器转换为该特定时区。例如，从系统时间到EST。我们能够正确地看到警报，但在渲染图形时，它显示了完全不同的时间。
浏览 2提问于2012-10-10得票数 3
但是，我们发现，我的x轴值与对应的条形不对齐，存在轻微的失配。
而且，每个月的值和上个月的最后一次约会一样有第一个值，而我甚至没有这个值，而是从那个对应月份的第一个开始。以下是高图集的JSFiddle：
浏览 1提问于2019-03-09得票数 1
回答已采纳
我有一个默认情况下显示年度数据的图表。我也有3个按钮，让我放大/退出在特定的间隔(每年/每周/每天)。为此，我在setExtremes()函数上设置了一个特定的间隔。每周： var chart = $('.chart-stor').highcharts();
chart.xAxis但是，当我对每日视图做同样的操作时，它会显示大约5天的
浏览 7提问于2015-06-30得票数 0
($datestr, time())); series: [{ }但任何其他使用不同时区的人，时间都是错误的。因此，PDT中的某些人将看到一个扭曲了3个小时的图表，这是不<e
浏览 0提问于2016-06-26得票数 1
我现在有几天的库存，试图使用Angular2-HighCharts来更改面积图中的UTC时间。我的后端Api返回给我一些时间戳，然后我将它注入到图表中，每次它转换为“人的时间”时少了两个小时，我知道highcharts使用协调世界时，但我目前在GMT+2中作为奥斯陆时间。我尝试在SetOptions.global.timezoneOffset中实现"timezoneOffset“并更改其中
浏览 10提问于2017-07-18得票数 2
回答已采纳
我有简单的图表与x轴标签和工具提示，月的日期在工具提示是正确的，而月在x轴标签上是一个月后。当我将时区从GMT+2美国东部改为UTC-5时，问题解决了.我还添加了以下全局选项useUTC，但没有影响。 global: {
浏览 7提问于2014-06-08得票数 1
回答已采纳
我使用jaspersoft studio设计了一个highchart，然后将其部署到服务器。X轴上的时间值是本地时间，在jaspersoft studio中就可以了。如果我只是在网格(而不是图表)中显示值，那么这些值都是按本地时间显示的，所以一切都很好。但是随着高位图表的出现，问题就出现了。
你能帮我一下吗？
浏览 1提问于2015-05-05得票数 0
1回答
我正在尝试显示一个跨越60分钟的数据集，但由于某种原因，x轴总是偏离2小时。这可能是什么原因造成的，我如何才能让它显示正确的时间？
我已经设置了一个。
浏览 0提问于2013-07-03得票数 0
回答已采纳
1回答
正如标题中提到的，高图表显示的是下一个月，而不是我想要显示的正确月份。<script>
Highcharts.setOptions({ //timezoneOffset:3.30 * 60 });
xAxis: {
浏览 2提问于2016-02-20得票数 4
回答已采纳
4回答
我有一个似乎修不好的Highchart。xAxis上的日期是正确的，但标签上的日期相差了一天。无论我传递给我的图表的是什么数据，它总是偏离一天。我一直在绞尽脑汁想弄清楚这件事。任何建议都将不胜感激。你可以在这里看到我的代码：
浏览 4提问于2012-04-27得票数 10
回答已采纳
2回答
我和highstock.js有点问题之所以会出现这种情况，是因为日期25在图表中显示了两次，x轴上的第二个条目的值为0。没有数据支持此第二个错误的日期条目。我在这里做了一个jsfiddle：chart: {
renderTo: 'containerchart'1333580400000,3],[1333666800000,4],[
浏览 4提问于2012-10-26得票数 2
回答已采纳
我正在使用HighCharts (javascript图表插件)，并从来自欧洲/伦敦时区的一系列时间戳生成一个图表。当我将这些输入到HighCharts中时，它们将被转换为UTC。我试过使用： useUTC: false但这没有效果。我也试着用这样的瞬间： getTimezoneOffset: function (timestamp) {
var destZone
浏览 9提问于2015-09-16得票数 0
回答已采纳
我有一个图表，需要根据用户的本地时间显示服务器的正常运行时间。UTC是不可接受的，因为它需要显示用户的计算机时间。[UNIX_TIMESTAMP,1], [UNIX_TIMESTAMP, 2], ...如果在highcharts中不可能，我如何将协调时间中的上述转换为用户本地时间中的(例如，偏移UNIX_TIMESTAMP)？
浏览 0提问于2013-04-15得票数 10
回答已采纳
3回答
我在Highcharts中遇到这个问题已经有一段时间了。工具提示：在顶部，日期小时是UTC格式，我希望它采用与数据相同的格式(或本地时区，不应更改为UTC等，同时删除日期中的"T & Z“！)我需要知道如何在非UTC格式的工具提示中获取日期小时。更新：
好吧，不知何故，我无法从我的任何选项卡中删除UTC。但不知何故，它已经从一
浏览 6提问于2014-09-10得票数 4
1回答
我试图在我的高图表中显示csv文件的数据。plotOptions: { marker: { } }我的进口品是这样的);Data(Highcharts);
现在，我成功地尝试了使用这个
浏览 1提问于2019-09-05得票数 0
我有一种情况，我需要在Highchart中显示从服务器接收的确切时间。日期时间不应根据服务器时区或客户端时区而更改。我已将UTC设置为true： global: { timezoneOffset: 0Events', id: "Events"
//width:
浏览 0提问于2016-01-26得票数 0
6回答
高海图时区
、、
据我所知，高级图表的缺省值是UTC的。我试着按照这篇文章中的答案来做。如果我正确理解，这应该将时区设置为浏览器的时区。我已经在jsFiddle上测试过这一点，切换useUTC选项似乎没有任何效果。
问题：我上面做错了什么，你如何正确地设置时区？
浏览 3提问于2012-08-21得票数 11
回答已采纳
3回答
我正在使用highchart沿时间x轴显示数据。数据是相对于地球上的特定位置的，所以我需要让HightChart显示该位置的时间。它既不是UTC也不是本地浏览器时区。我已经看到了UTC设置，以利用UTC或浏览器的本地时间： global: { }并且我已经考虑在标签格式化工具中根据我的目标时区应用延迟
浏览 0提问于2013-06-17得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
