在 angularjs 中使用 highcharts 绘制图表时需要帮助
Need help in plotting a chart using highcharts in angularjs
我有一些数据来自 elasticsearch，它具有 任务的开始时间 & 结束时间 对于特定的 代理 task 需要水平绘制在图表上，指示该特定任务的开始和结束时间。我尝试使用 columnrange 图表类型，但无法获得 to 和 from 范围选择器 see here an example.
然后我再次尝试 this 并且我能够让它工作，但是在绘制 highcharts 中的 Elasticsearch 数据时需要帮助。
另一个问题是我从服务器获得的日期是人类可读的日期格式（检查 start_time 和 end_time），EST 时区，需要转换成一种格式可以被 highcharts 消耗掉。请帮忙。
我的 highcharts 指令
angular.module('myApp').directive('operationalhighstackstock', function() {
return {
restrict : 'E',
scope : true,
link : function postLink(scope, element, attrs) {
scope.$watch('operationHighChartsData', function(values){
new Highcharts.StockChart(values);
});
}
};
});
我的模板
<div style="width: 100%;">
<operationalhighstackstock></operationalhighstackstock>
<div id="container" style="width: 100%; height: 500px;"></div>
</div>
我的控制器
angular.module('myApp').controller('OperationReportChartController', function($scope, $filter, $location, $transition, MyService, $timeout) {
$scope.init = function() {
$scope.isOperationalReport = true;
$scope.initOperationalReport();
}
$scope.initOperationalReport = function() {
$scope.loading = true;
$scope.isChartDataAvailable = true;
$scope.operationReportDefaultQuery = operationReportDefaultQuery;
$scope.operationHighChartsData = {
chart : {
renderTo : 'container',
alignTicks : false
}
};
$scope.operationalReportDefaultServiceRequests();
}
$scope.serviceRequests = function() {
//Common service requests if any
}
$scope.operationalReportDefaultServiceRequests = function() {
$scope.isOperationalReport = true;
MyService.getOperationalReportChartData($scope.operationReportDefaultQuery).then(function(result) {
renderOperationalHighCharts(result);
});
}
function renderOperationalHighCharts(result) {
//var xAxisCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
//var series = getOperationReportChartSeriesData(result);
var chart_options = {
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 1,
labels: {
formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
minPadding: 1,
maxPadding: 1
},
legend: {
enabled: false
},
plotOptions: {
line: {
lineWidth: 9,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
};
$scope.operationHighChartsData = chart_options;
}
$scope.init();
});
Highcharts 需要使用的部分完整数据，显示特定代理的任务开始和结束时间。
{
"took": 43,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"failed": 0
},
"hits": {
"total": 29,
"max_score": 1
},
"aggregations": {
"agent_names": {
"buckets": [
{
"key": "LUME - US AGG",
"doc_count": 4,
"top-sites": {
"buckets": [
{
"key": "000AAA0I00000000007W",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216934321",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:12:49.000-08:00",
"start_time": "2014-11-20T11:12:41.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234218016",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:12:49.000-08:00",
"start_time": "2014-11-20T11:12:41.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007X",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216556106",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:04:33.000-08:00",
"start_time": "2014-11-20T11:04:28.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234218026",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:04:33.000-08:00",
"start_time": "2014-11-20T11:04:28.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007Y",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "235761199",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:59:44.000-08:00",
"start_time": "2014-11-20T10:59:43.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "217265041",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:59:44.000-08:00",
"start_time": "2014-11-20T10:59:43.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006K",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234732452",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:52:59.000-08:00",
"start_time": "2014-11-20T10:52:59.000-08:00"
}
}
]
}
}
}
]
}
},
{
"key": "USWF - 01D",
"doc_count": 8,
"top-sites": {
"buckets": [
{
"key": "000AAA0I00000000007T",
"doc_count": 3,
"top_tags_hits": {
"hits": {
"total": 3,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216603056",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:03:01.000-08:00",
"start_time": "2014-11-20T11:02:41.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216957850",
"_score": 1,
"_source": {
"end_time": "2014-11-20T07:52:12.000-08:00",
"start_time": "2014-11-20T07:52:01.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216839441",
"_score": 1,
"_source": {
"end_time": "2014-11-20T08:08:10.000-08:00",
"start_time": "2014-11-20T08:08:02.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006M",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216839440",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:01:12.000-08:00",
"start_time": "2014-11-20T11:01:08.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216603055",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:55:23.000-08:00",
"start_time": "2014-11-20T10:55:22.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006K",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216981636",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:52:59.000-08:00",
"start_time": "2014-11-20T10:52:59.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006L",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216650284",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:49:06.000-08:00",
"start_time": "2014-11-20T10:49:06.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006N",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216768388",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:05:03.000-08:00",
"start_time": "2014-11-20T11:05:02.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007N",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216981635",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:03:55.000-08:00",
"start_time": "2014-11-20T11:03:43.000-08:00"
}
}
]
}
}
}
]
}
}
]
}
}
}
这是我的 plunker link with angularjs
Updating in progress plunker link with data mapping with Highcharts
正在更新映射代码
var getOperationReportChartSeriesData = function(result) {
var series = {};
if (result != null && result != undefined) {
var bucket = result.aggregations[AGENT_NAMES].buckets;
bucket.forEach(function(item) {
var agentSeries = [], agentData = {}, opTaskIdBucket = item["top-sites"].buckets;
opTaskIdBucket.forEach(function(taskidEntry) {
var intervalBucket = taskidEntry["top_tags_hits"]["hits"]["hits"],
intervalArr = [], opTaskidObj = {};
opTaskidObj["name"] = taskidEntry["key"];
intervalBucket.forEach(function(intervalEntry) {
var intervalObj = {}, start_temp = intervalEntry["_source"].start_time, end_temp = intervalEntry["_source"].end_time;
var st = new Date(moment(start_temp).valueOf()).getTime();
var et = new Date(moment(end_temp).valueOf()).getTime();
intervalObj["to"] = et;
intervalObj["from"] = st;
intervalObj["x"] = st;
intervalObj["y"] = 1;
intervalArr.push(intervalObj);
})
opTaskidObj["data"] = intervalArr;
agentSeries.push(opTaskidObj);
})
series[item["key"]] = agentSeries;
})
} else
console.log("Result is "+result);
console.log(JSON.stringify(series));
console.log(series);
//console.log(JSON.stringify(series[0]["LUME - US AGG"]));
return series;
}
更新
对于所有的混乱，我们深表歉意。为了简单起见，给定 json response（如上所示），function (getOperationReportChartSeriesData()) 将以这种方式准备数据Highcharts 将显示单个任务，它是水平条中的 运行 历史记录，其中 x 轴是 日期时间 （包括小时和分钟），y 轴是 任务。类似于下面提供的屏幕截图。
以下是预期结果的屏幕截图。
click here for the jsfiddle link
用 jsfiddle 更新了 link here
但在此我还需要 StockChart navigation & range selectors.
@Pawel Fus：非常感谢您的耐心等待。这是任何面临类似问题的人的最终结果。
如果我没理解错的话，你想解析你的日期对象，Highchart 可以使用？您可以使用库 moment.js，效果很好。
我对您的要求有点困惑（仍然）。
Highcharts，需要时间戳（以毫秒为单位）才能呈现。因此，您需要对日期进行预处理，例如：new Date("2014-11-20T11:03:55.000-08:00").getTime() 以获得 UTC 时间戳。现在，当您有 UTC 时间时，您可以按照上面的建议使用 moment.js 来呈现特定时区的数据。
要在 Highcharts 中使用 moment.js，您可以扩展 getTimezoneOffset 选项（实验性），这样：
Highcharts.setOptions({
global: {
/**
* Use moment-timezone.js to return the timezone offset for individual
* timestamps, used in the X axis labels and the tooltip header.
*/
getTimezoneOffset: function (timestamp) {
var zone = 'Europe/Oslo',
timezoneOffset = moment.tz.zone(zone).parse(timestamp);
return timezoneOffset;
}
}
});
以及实例：http://jsfiddle.net/k96t1dy7/3/
注意：你的第二个 plunker 不起作用..
注2：以上测试用例使用github版本的Highcharts。它是 Highcharts 4.1 的候选版本。
我有一些数据来自 elasticsearch，它具有 任务的开始时间 & 结束时间 对于特定的 代理 task 需要水平绘制在图表上，指示该特定任务的开始和结束时间。我尝试使用 columnrange 图表类型，但无法获得 to 和 from 范围选择器 see here an example.
然后我再次尝试 this 并且我能够让它工作，但是在绘制 highcharts 中的 Elasticsearch 数据时需要帮助。
另一个问题是我从服务器获得的日期是人类可读的日期格式（检查 start_time 和 end_time），EST 时区，需要转换成一种格式可以被 highcharts 消耗掉。请帮忙。
我的 highcharts 指令
angular.module('myApp').directive('operationalhighstackstock', function() {
return {
restrict : 'E',
scope : true,
link : function postLink(scope, element, attrs) {
scope.$watch('operationHighChartsData', function(values){
new Highcharts.StockChart(values);
});
}
};
});
我的模板
<div style="width: 100%;">
<operationalhighstackstock></operationalhighstackstock>
<div id="container" style="width: 100%; height: 500px;"></div>
</div>
我的控制器
angular.module('myApp').controller('OperationReportChartController', function($scope, $filter, $location, $transition, MyService, $timeout) {
$scope.init = function() {
$scope.isOperationalReport = true;
$scope.initOperationalReport();
}
$scope.initOperationalReport = function() {
$scope.loading = true;
$scope.isChartDataAvailable = true;
$scope.operationReportDefaultQuery = operationReportDefaultQuery;
$scope.operationHighChartsData = {
chart : {
renderTo : 'container',
alignTicks : false
}
};
$scope.operationalReportDefaultServiceRequests();
}
$scope.serviceRequests = function() {
//Common service requests if any
}
$scope.operationalReportDefaultServiceRequests = function() {
$scope.isOperationalReport = true;
MyService.getOperationalReportChartData($scope.operationReportDefaultQuery).then(function(result) {
renderOperationalHighCharts(result);
});
}
function renderOperationalHighCharts(result) {
//var xAxisCategories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
//var series = getOperationReportChartSeriesData(result);
var chart_options = {
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 1,
labels: {
formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
minPadding: 1,
maxPadding: 1
},
legend: {
enabled: false
},
plotOptions: {
line: {
lineWidth: 9,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
};
$scope.operationHighChartsData = chart_options;
}
$scope.init();
});
Highcharts 需要使用的部分完整数据，显示特定代理的任务开始和结束时间。
{
"took": 43,
"timed_out": false,
"_shards": {
"total": 5,
"successful": 5,
"failed": 0
},
"hits": {
"total": 29,
"max_score": 1
},
"aggregations": {
"agent_names": {
"buckets": [
{
"key": "LUME - US AGG",
"doc_count": 4,
"top-sites": {
"buckets": [
{
"key": "000AAA0I00000000007W",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216934321",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:12:49.000-08:00",
"start_time": "2014-11-20T11:12:41.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234218016",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:12:49.000-08:00",
"start_time": "2014-11-20T11:12:41.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007X",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216556106",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:04:33.000-08:00",
"start_time": "2014-11-20T11:04:28.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234218026",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:04:33.000-08:00",
"start_time": "2014-11-20T11:04:28.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007Y",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "235761199",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:59:44.000-08:00",
"start_time": "2014-11-20T10:59:43.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "217265041",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:59:44.000-08:00",
"start_time": "2014-11-20T10:59:43.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006K",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "234732452",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:52:59.000-08:00",
"start_time": "2014-11-20T10:52:59.000-08:00"
}
}
]
}
}
}
]
}
},
{
"key": "USWF - 01D",
"doc_count": 8,
"top-sites": {
"buckets": [
{
"key": "000AAA0I00000000007T",
"doc_count": 3,
"top_tags_hits": {
"hits": {
"total": 3,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216603056",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:03:01.000-08:00",
"start_time": "2014-11-20T11:02:41.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216957850",
"_score": 1,
"_source": {
"end_time": "2014-11-20T07:52:12.000-08:00",
"start_time": "2014-11-20T07:52:01.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216839441",
"_score": 1,
"_source": {
"end_time": "2014-11-20T08:08:10.000-08:00",
"start_time": "2014-11-20T08:08:02.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006M",
"doc_count": 2,
"top_tags_hits": {
"hits": {
"total": 2,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216839440",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:01:12.000-08:00",
"start_time": "2014-11-20T11:01:08.000-08:00"
}
},
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216603055",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:55:23.000-08:00",
"start_time": "2014-11-20T10:55:22.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006K",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216981636",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:52:59.000-08:00",
"start_time": "2014-11-20T10:52:59.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006L",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216650284",
"_score": 1,
"_source": {
"end_time": "2014-11-20T10:49:06.000-08:00",
"start_time": "2014-11-20T10:49:06.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0G00000000006N",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216768388",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:05:03.000-08:00",
"start_time": "2014-11-20T11:05:02.000-08:00"
}
}
]
}
}
},
{
"key": "000AAA0I00000000007N",
"doc_count": 1,
"top_tags_hits": {
"hits": {
"total": 1,
"max_score": 1,
"hits": [
{
"_index": "asta_sync",
"_type": "tasks_run_history",
"_id": "216981635",
"_score": 1,
"_source": {
"end_time": "2014-11-20T11:03:55.000-08:00",
"start_time": "2014-11-20T11:03:43.000-08:00"
}
}
]
}
}
}
]
}
}
]
}
}
}
这是我的 plunker link with angularjs
Updating in progress plunker link with data mapping with Highcharts
正在更新映射代码
var getOperationReportChartSeriesData = function(result) {
var series = {};
if (result != null && result != undefined) {
var bucket = result.aggregations[AGENT_NAMES].buckets;
bucket.forEach(function(item) {
var agentSeries = [], agentData = {}, opTaskIdBucket = item["top-sites"].buckets;
opTaskIdBucket.forEach(function(taskidEntry) {
var intervalBucket = taskidEntry["top_tags_hits"]["hits"]["hits"],
intervalArr = [], opTaskidObj = {};
opTaskidObj["name"] = taskidEntry["key"];
intervalBucket.forEach(function(intervalEntry) {
var intervalObj = {}, start_temp = intervalEntry["_source"].start_time, end_temp = intervalEntry["_source"].end_time;
var st = new Date(moment(start_temp).valueOf()).getTime();
var et = new Date(moment(end_temp).valueOf()).getTime();
intervalObj["to"] = et;
intervalObj["from"] = st;
intervalObj["x"] = st;
intervalObj["y"] = 1;
intervalArr.push(intervalObj);
})
opTaskidObj["data"] = intervalArr;
agentSeries.push(opTaskidObj);
})
series[item["key"]] = agentSeries;
})
} else
console.log("Result is "+result);
console.log(JSON.stringify(series));
console.log(series);
//console.log(JSON.stringify(series[0]["LUME - US AGG"]));
return series;
}
更新
对于所有的混乱，我们深表歉意。为了简单起见，给定 json response（如上所示），function (getOperationReportChartSeriesData()) 将以这种方式准备数据Highcharts 将显示单个任务，它是水平条中的 运行 历史记录，其中 x 轴是 日期时间 （包括小时和分钟），y 轴是 任务。类似于下面提供的屏幕截图。
以下是预期结果的屏幕截图。
click here for the jsfiddle link
用 jsfiddle 更新了 link here 但在此我还需要 StockChart navigation & range selectors.
@Pawel Fus：非常感谢您的耐心等待。这是任何面临类似问题的人的最终结果。
如果我没理解错的话，你想解析你的日期对象，Highchart 可以使用？您可以使用库 moment.js，效果很好。
我对您的要求有点困惑（仍然）。
Highcharts，需要时间戳（以毫秒为单位）才能呈现。因此，您需要对日期进行预处理，例如：new Date("2014-11-20T11:03:55.000-08:00").getTime() 以获得 UTC 时间戳。现在，当您有 UTC 时间时，您可以按照上面的建议使用 moment.js 来呈现特定时区的数据。
要在 Highcharts 中使用 moment.js，您可以扩展 getTimezoneOffset 选项（实验性），这样：
Highcharts.setOptions({
global: {
/**
* Use moment-timezone.js to return the timezone offset for individual
* timestamps, used in the X axis labels and the tooltip header.
*/
getTimezoneOffset: function (timestamp) {
var zone = 'Europe/Oslo',
timezoneOffset = moment.tz.zone(zone).parse(timestamp);
return timezoneOffset;
}
}
});
以及实例：http://jsfiddle.net/k96t1dy7/3/
注意：你的第二个 plunker 不起作用..
注2：以上测试用例使用github版本的Highcharts。它是 Highcharts 4.1 的候选版本。