elasticsearch,Highcharts" />
elasticsearch,highcharts,Javascript,Javascript 适用于分组日期时间数据图表的工具提示
我有大量数据，日期时间在x轴上，计数在y轴上。以前，数据分组是由前端的highcharts完成的。我将数据分组转移到服务器端。以前，当数据分组时，工具提示是适当的，这意味着它将告诉数据从何处分组，例如从周二14:00-16:00。现在我有了时间间隔，但工具提示只显示了一个点，即周二14:00Javascript 适用于分组日期时间数据图表的工具提示,javascript,
elasticsearch,highcharts,Javascript,
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--===============================================================================================-->
<!--===============================================================================================-->
<body>
<div id="container">
<div id="container1" style="width: 500px; height: 400px; margin: 0 " align="left"></div>
</div>
<script src="{% static 'js/highstock.js'%}"></script>
<script src="{% static 'vendor/jquery/jquery-3.2.1.min.js' %}"></script>
<script>
function afterSetExtremes(e) {
var chart = Highcharts.charts[0];
chart.showLoading('Loading data from server...');
$.getJSON(src, function (data){
chart.series[0].setData(data);
chart.hideLoading();
});
}
var country='{{country|safe}}'
src=window.location.toString()
src=src.replace("timeline","timeline_data")
$.getJSON(src, function (data) {
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
data = [].concat(data, [[tomorrow, null, null, null, null]]);
var chart = Highcharts.stockChart('container', {
chart: {
height: 400
},
title: {
text: 'Tweets Timeline'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: data
}
},
scrollbar: {
liveRedraw: false
},
xAxis: {
gapGridLineWidth: 0,
events: {
afterSetExtremes:afterSetExtremes
},
},
yAxis:{
text:'Tweets Count',
min:0,
minRange: 0
}
,
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1H'
}, {
type: 'day',
count: 1,
text: '1D'
},
{
type: 'month',
count: 1,
text: '1M'
},
{
type: 'year',
count: 1,
text: '1Y'
},
{
type: 'all',
count: 1,
text: 'All'
}],
selected:4,
inputEnabled: false
},
series: [{
name: 'Tweets Count',
data: data,
dataGrouping: {
enabled: false
},
type:'area',
gapSize: 5,
tooltip: {
valueDecimals: 0
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 300
},
subtitle: {
text: null
},
navigator: {
enabled: false
}
}
}]
}
});
});
</script>
</body>
</html>
{%load staticfiles%}
函数后极值（e）{
var图表=高位图表。图表[0]；
showLoading（'loadingdatafromserver…'）；
$.getJSON（src，函数（数据）{
chart.series[0].setData（数据）；
chart.hideLoading（）；
});
}
var country='{country | safe}}'
src=window.location.toString（）
src=src.replace（“时间线”、“时间线\数据”）
$.getJSON（src，函数（数据）{
var明天=新日期（）；
明天.setDate（明天.getDate（）+1）；
data=[].concat（数据，[[tomory，null，null，null]]）；
var chart=Highcharts.stockChart（'容器'{
图表：{
身高：400
},
标题：{
文字：“推特时间线”
},
导航器：{
AdaptToUpdateData:错误，
系列：{
数据：数据
}
},
滚动条：{
利维德劳：错
},
xAxis：{
gapGridLineWidth:0，
活动：{
余弦：余弦
},
},
亚克斯：{
文字：'Tweets Count'，
分:0,，
最小范围：0
}
,
范围选择器：{
按钮：[{
键入：“小时”，
计数：1，
文本：“1H”
}, {
键入：'天'，
计数：1，
文本：“1D”
},
{
键入：“月”，
计数：1，
文字：“1M”
},
{
类型：'年'，
计数：1，
文本：“1Y”
},
{
键入：“全部”，
计数：1，
文字：“全部”
}],
选定：4，
输入：假
},
系列：[{
名称：“推特计数”，
数据：数据，
数据分组：{
已启用：false
},
类型：'区域'，
昏睡：5，
工具提示：{
数值小数：0
},
填充颜色：{
线性梯度：{
x1:0，
y1:0，
x2:0，
y2:1
},
停止：[
[0，Highcharts.getOptions（）.Color[0]]，
[1，Highcharts.Color（Highcharts.getOptions（）.colors[0]）。setOpacity（0）。get（'rgba'）]
]
},
阈值：空
}],
响应：{
规则：[{
条件：{
最大宽度：500
},
图表选项：{
图表：{
身高：300
},
副标题:{
文本：空
},
导航器：{
已启用：false
}
}
}]
}
});
});
我还想知道数据分组是否正确。我使用了elasticsearch的auto_date_直方图对数据进行分组。它是否合适？Hi@samiullah ilyas，您可以在数据中添加一些关于时间的附加信息，并在工具提示中显示。在您的情况下，数据是作为常规点处理的，而不是作为分组点处理的。我如何向时间添加其他信息？是否将其添加到序列数据中？i、 例如[timestamp interval，count]这可能吗？我不知道您的数据格式，但可以-您可以通过
键映射自定义属性。例子：