Javascript 需要帮助在angularjs中使用highcharts绘制图表吗
我有一些来自elasticsearch的数据，它有一个特定的代理的Javascript 需要帮助在angularjs中使用highcharts绘制图表吗,javascript,angularjs,highcharts,momentjs,Javascript,Angularjs,Highcharts,Momentjs,我有一些来自elasticsearch的数据，它有一个特定的代理的任务的开始时间和结束时间，需要水平绘制在图表上，指示该特定任务的开始和结束时间。我尝试使用columnrange图表类型，但无法从范围选择器获取到和 然后我再次尝试，我能够让它工作，但需要帮助在highcharts中绘制Elasticsearch数据 另一个问题是，我从服务器获取的日期是人类可读的日期格式（检查start\u time和end\u time），即EST时区，需要转换为highcharts可以使用的格式。请帮忙 我的
任务的开始时间和结束时间，需要水平绘制在图表上，指示该特定任务的开始和结束时间。我尝试使用columnrange
图表类型，但无法从范围选择器获取到和
然后我再次尝试，我能够让它工作，但需要帮助在highcharts中绘制Elasticsearch数据
另一个问题是，我从服务器获取的日期是人类可读的日期格式（检查start\u time
和end\u time
），即EST时区，需要转换为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>
部分完整的数据，这些数据需要通过Highchart使用，Highchart显示特定代理的任务开始和结束时间
{
"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"
}
}
]
}
}
}
]
}
}
]
}
}
}
这是我的
更新映射代码
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响应（如上所示），函数（getOperationReportChartSeriesData（））将以这样的方式准备数据，Highcharts将在水平条中显示单个任务及其运行历史，其中x轴是日期时间（包括小时和分钟）y轴是任务。与下面提供的屏幕截图类似
下面是预期结果的屏幕截图。
更新为JSFIDLE链接
但在这方面我也需要
@帕维尔·福斯：非常感谢你对我的容忍。这是任何面临类似问题的人的最终结果
如果我理解正确，您想解析Highchart可以使用的日期对象吗？你可以使用图书馆，它的工作方式很有魅力。我对你的要求有点困惑（仍然）
Highcharts，需要时间戳（毫秒）才能渲染。因此，您需要预处理日期，例如：新日期（“2014-11-20T11:03:55.000-08:00”）.getTime（）
以获取UTC时间戳。现在，当您有UTC时间时，您可以使用上面建议的moment.js
来呈现特定时区的数据
要将moment.js
与Highcharts一起使用，可以通过以下方式扩展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;
}
}
});
还有一个活生生的例子：
注意：您的第二个plunker不起作用
注2：以上测试用例使用github版本的Highcharts。这是Highcharts 4.1的候选版本。谢谢您的回答。我已经在使用momentjs转换我的日期var st=新日期（moment（start_temp）.valueOf（））.getTime（）在getOperationReportChartSeriesData
函数下。我甚至得到了一些酒吧，但看起来差距很小。。以秒为单位，因此该条几乎不可见。。现在正在尝试修复相同的问题。在我的本地系统中，我可以获取一些数据，但它不可见，因为有许多任务，并且它们的运行时间之间的差异非常小（以秒为单位），因此该条几乎不可见。我尝试将rangeSelectors的默认值设置为1小时，但仍然无法正确显示。另外，我的plunker可能有一些库问题，因此这不是我本地系统的确切结果。对不起，我不明白您想要实现什么。顺便说一句，您使用的是来自dateObject的getTime，您感兴趣的是什么？时间，分钟。？因为使用moment.js，您可以获得小时数或分钟数。例如：momentObj.get（“小时”），这将确保您获得小时数。看一下文档：很抱歉让人困惑，我用一张图片更新了我的问题，显示了我想要的东西。默认范围应为一小时。抱歉造成混淆。为了简化json响应（在我的问题中提到），函数（getOperationReportChartSeriesData（））将以这样的方式准备数据，Highcharts将在水平条中显示单个任务及其运行历史，其中x轴是日期时间，y轴是任务。与我的问题中提供的屏幕截图类似。那么您需要将解析器从数据写入Highcharts所需的格式？为什么您不能这样做？我准备了以下数据格式（请检查getOperationReportChartSeriesData（）
函数），但我没有获取用于显示数据的图表。我获取Error:attribute width=“-694737840”
和Highcharts Error\15:www.Highcharts.com/errors/15
errors的负值无效。不确定需要排序的内容以及负值从哪里来我在上一个示例中看到了6个任务。缺少导航的问题是，您使用的是Highcharts，而不是Highcharts（替换URL和在#71行中添加StockChart构造函数），请参阅修复演示：正如您所看到的，Highstock中无论如何都不支持反转选项，因此您不能使用columnrange系列。相反，请使用line series，就像您的一个演示：
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;
}
}
});