我有一个包含3个系列的图形，每个系列有4个点。这些点中的每个点对应于4个不同的天（每天一个点）。就是说，由于它们是3个系列，因此每天总共有3分。但是这3点在小时，分钟和秒上有所不同。
我要做的是将此数据保留在X轴上以在工具提示中显示，但3个点已对齐。
让我们通过示例进行展示。
这是我目前拥有的：
chart = new Highcharts.StockChart({
chart: {
renderTo: "container",
type: 'spline'
},
colors: ['#3131F8', '#FB1C1C', '#008000', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
yAxis: {
opposite: false,
showLastLabel: true,
labels: {
enabled: true,
align: "right"
},
title: {
text: 'Tensión'
}
},
rangeSelector: {
enabled: true
},
tooltip: {
pointFormatter: function () {
var n = this.series.name;
var s = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>';
return s + Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
}
},
legend: {
enabled: true
},
navigation: {
buttonOptions: {
enabled: true
}
},
series: [{"name":"Minima","pointInterval":86400000,"data":[[1538467200000,215.9],[1538581500000,217.6],[1538651700000,218],[1538728200000,218.5]]},{"name":"Maxima","pointInterval":86400000,"data":[[1538506800000,228.8],[1538530200000,228.4],[1538676000000,229.3],[1538779500000,228.8]]},{"name":"Promedio","pointInterval":86400000,"data":[[1538438400000,223.9365],[1538524800000,224.0667],[1538611200000,224.4135],[1538697600000,224.45]]}]
});
http://jsfiddle.net/ZottoSL/8vedjxLs/5/
这就是我想要的（我修改了数据中的X点以实现视觉效果，但实际上我想保留它）：
chart = new Highcharts.StockChart({
chart: {
renderTo: "container",
type: 'spline'
},
colors: ['#3131F8', '#FB1C1C', '#008000', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
yAxis: {
opposite: false,
showLastLabel: true,
labels: {
enabled: true,
align: "right"
},
title: {
text: 'Tensión'
}
},
rangeSelector: {
enabled: true
},
tooltip: {
pointFormatter: function () {
var n = this.series.name;
var s = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>';
return s + Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
}
},
legend: {
enabled: true
},
navigation: {
buttonOptions: {
enabled: true
}
},
series: [{"name":"Minima","pointInterval":86400000,"data":[[1538438400000,215.9],[1538524800000,217.6],[1538611200000,218],[1538697600000,218.5]]},{"name":"Maxima","pointInterval":86400000,"data":[[1538438400000,228.8],[1538524800000,228.4],[1538611200000,229.3],[1538697600000,228.8]]},{"name":"Promedio","pointInterval":86400000,"data":[[1538438400000,223.9365],[1538524800000,224.0667],[1538611200000,224.4135],[1538697600000,224.45]]}]
});
http://jsfiddle.net/ZottoSL/9bk8hq3n/1/
也就是说，在X轴上绘制图形时，只考虑年，月和日，区分小时，分钟和秒。
谢谢！
答案 0 :(得分：1)
您可以使用dataGrouping获得所需的外观。这样，您无需进行任何额外的处理。您需要做的就是给出以下定义：
@Bean
public PlatformTransactionManager transactionManager() {
...
}
要在工具提示中获取该点的实际时间，您可以执行以下操作：
DefaultDatasourceConfiguration DefaultDatasourceConfiguration获取该点的实际时间。
工作中的JSFiddle示例： http://jsfiddle.net/ewolden/omfdy8nc/
关于dataGrouping的API： https://api.highcharts.com/highstock/series.line.dataGrouping
要消除每天进行dataGrouping时可能在序列之前或之后的额外时间，我们需要设置一个最小值和最大值。之所以会有这样的空格，是因为原始数据的值并非每天午夜都准确设置。
添加以下plotOptions: {
series: {
dataGrouping: {
forced: true,
units: [
['day', [1]]
]
}
}
},
事件将找到最小/最大全天，并将tooltip: {
pointFormatter: function() {
var n = this.series.name;
var s = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>';
return Highcharts.dateFormat('%m/%d - %H:%M', this.series.xData[this.index]) + s + Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
}
},
和导航器Highcharts.dateFormat('%m/%d - %H:%M', this.series.xData[this.index])设置为以下值：
load工作示例： http://jsfiddle.net/ewolden/omfdy8nc/32/
关于加载事件的API： https://api.highcharts.com/highstock/chart.events.load
图表上的API。更新： https://api.highcharts.com/class-reference/Highcharts.Chart#update
答案 1 :(得分：0)
您可以在同一天对每个点使用相同的时间戳记作为x属性，并将实际时间戳记保存在标记点对象中，例如作为realX。然后在tooltip.pointFormatter中使用实时时间戳创建显示每个点的真实日期。请查看下面发布的示例。
HTML：
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JS：
var data = [{
name: "Minima",
pointInterval: 86400000,
data: [
[1538467200000, 215.9],
[1538581500000, 217.6],
[1538651700000, 218],
[1538728200000, 218.5]
]
}, {
name: "Maxima",
pointInterval: 86400000,
data: [
[1538506800000, 228.8],
[1538530200000, 228.4],
[1538676000000, 229.3],
[1538779500000, 228.8]
]
}, {
name: "Promedio",
pointInterval: 86400000,
data: [
[1538438400000, 223.9365],
[1538524800000, 224.0667],
[1538611200000, 224.4135],
[1538697600000, 224.45]
]
}],
finalData = [],
i,
j,
series,
point;
for (i = 0; i < data.length; i++) {
series = data[i];
finalData[i] = {
name: series.name,
pointInterval: series.pointInterval,
data: []
};
for (j = 0; j < series.data.length; j++) {
point = series.data[j];
finalData[i].data.push({
x: data[0].data[j][0],
y: point[1],
realX: point[0]
});
}
}
chart = new Highcharts.StockChart({
chart: {
renderTo: "container",
type: 'spline'
},
colors: ['#3131F8', '#FB1C1C', '#008000', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'
],
yAxis: {
opposite: false,
showLastLabel: true,
labels: {
enabled: true,
align: "right"
},
title: {
text: 'Tensión'
}
},
rangeSelector: {
enabled: true
},
tooltip: {
pointFormatter: function() {
var n = this.series.name,
s = '<span style="color:' + this.series.color + '">' + n + '</span>: <b>',
date = 'Date: ' + Highcharts.dateFormat('%e. %b %H:%M', this.realX),
number = Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
return s + number + date;
}
},
legend: {
enabled: true
},
navigation: {
buttonOptions: {
enabled: true
}
},
series: finalData
});