我有一组数据要绘制到highcharts中:
系列1:
0
:
{tbldate: "1665545400000", tbldata: 39.960960388183594}
1
:
{tbldate: "1665547200000", tbldata: 2.3699917793273926}
2
:
{tbldate: "1665550800000", tbldata: 55.46766662597656}
3
:
{tbldate: "1665554400000", tbldata: 90.57756042480469}
4
:
{tbldate: "1665558000000", tbldata: 53.59600067138672}
5
:
{tbldate: "1665561600000", tbldata: 60.070308685302734}
和系列2:
0
:
{tbldate: "1665631800000", tbldata: 18.298175811767578}
1
:
{tbldate: "1665633600000", tbldata: 90.40299224853516}
2
:
{tbldate: "1665637200000", tbldata: 9.714997291564941}
3
:
{tbldate: "1665640800000", tbldata: 13.358141899108887}
4
:
{tbldate: "1665644400000", tbldata: 39.14616012573242}
5
:
{tbldate: "1665648000000", tbldata: 76.88685607910156}
基本上,系列1包含日期为今天的数据,我想将其与系列2进行比较,后者包含日期为昨天的数据。
我似乎不能像这里的例子https://www.highcharts.com/demo/column-basic那样并排比较图表,因为我的数据对时间很敏感。
我试过使用linkedTo,但似乎不起作用
下面我包括我的图表选项:
chartOptions = {
chart: {
type: "column",
height: "500px",
zoomType: "x",
},
exporting: {
enabled: false,
},
title: {
text: "Energy Usage Comparison",
float: true,
style: { color: "#333333", fontSize: "12px" },
},
xAxis: {
type: "datetime",
title: {
text: null,
},
tickWidth: 0,
reversed: false,
labels: {
y: 15,
},
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
gridLineWidth: 0,
showLastLabel: true,
},
yAxis: {
min: 0,
title: {
text: "",
},
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat:
'<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.2f} mm</b></td></tr>',
footerFormat: "</table>",
shared: true,
useHTML: true,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
},
},
series: [{}],
};
这是我的chartoption.series的样子:
this.chartOptions.series = [
{
type: "column",
name: "Current",
color: "#72A2C0",
data: tempCurrent[0].data,
columnOffset: 0,
},
{
linkedTo: ":previous",
type: "column",
name: "Previous",
color: "#192E5B",
data: tempPrevious[0].data,
columnOffset: 1,
},
];
1条答案
按热度按时间gr8qqesn1#
最简单的解决方案是对数据进行预处理,以调整
x
值,并在工具提示中显示正确的值。例如:现场演示:http://jsfiddle.net/BlackLabel/e37b518u/
API引用:https://api.highcharts.com/highcharts/tooltip.formatter