我有以下图表:https://jsfiddle.net/w7jm2n6u/
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'x'
},
exporting: {
enabled: false
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
title: {
enabled: false
},
min: Date.UTC(2018, 10, 1)
},
yAxis: {
title: {
enabled: false
},
labels: {
formatter: function() {
return this.value / 1000;
}
},
max: 2000
},
tooltip: {
split: false,
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
},
series: {
trackByArea: true,
stickyTracking: false,
}
},
series: [{
name: 'Exceeds',
color: '#0000FF',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 2000
},{
x: Date.UTC(2019, 0, 1),
y: 2000
}, {
x: Date.UTC(2019, 1, 1),
y: 2000
}, {
x: Date.UTC(2019, 2, 1),
y: 2000
}],
}, {
name: 'Meets',
color: '#00FF00',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 700
},{
x: Date.UTC(2019, 0, 1),
y: 800
}, {
x: Date.UTC(2019, 1, 1),
y: 700
}, {
x: Date.UTC(2019, 2, 1),
y: 800
}],
}, {
name: 'Minimum',
color: '#FFFF00',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 400
},{
x: Date.UTC(2019, 0, 1),
y: 400
}, {
x: Date.UTC(2019, 1, 1),
y: 400
}, {
x: Date.UTC(2019, 2, 1),
y: 400
}],
}, {
name: 'Below Minimum',
color: '#FF0000',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 100
},{
x: Date.UTC(2019, 0, 1),
y: 200
}, {
x: Date.UTC(2019, 1, 1),
y: 300
}, {
x: Date.UTC(2019, 2, 1),
y: 320
}],
},
{
name: 'Data',
color: '#000000',
type: 'line',
data: [{
x: Date.UTC(2019, 0, 3),
y: 50
},
{
x: Date.UTC(2019, 0, 15),
y: 500
},
{
x: Date.UTC(2019, 1, 4),
y: 1000
},
{
x: Date.UTC(2019, 1, 15),
y: 1400
},
{
x: Date.UTC(2019, 1, 28),
y: 1900
},
]
},
]
});
理想情况下,我希望能够将鼠标悬停在每个区域上,并看到一个工具提示,其中包含4个区域中每个时间点的值。例如,在1月1日到2月1日之间,“最低(红色)”值的范围是200到300。如果我将鼠标放在这些日期的中间,我会希望看到“最低:250”。有没有办法做到这一点?
如果没有,我至少希望当前的工具提示始终显示先前的点值,而不是最接近的点。如果我将鼠标悬停在12/2018左右,那么我想查看的是2018年9月1日开始的时间,而不是2019年1月1日。本质上,这些是这些值的开始日期,并且仅在该日期或之后有效。
答案 0 :(得分:1)
您需要增加点的密度。在下面,您可以找到一个如何以编程方式进行操作的示例:
chart: {
type: 'area',
events: {
load: function() {
var series = this.series,
iterations = 2,
i = 0,
newData = [];
for (; i < iterations; i++) {
series.forEach(function(s) {
newData = [];
s.points.forEach(function(p, j) {
if (j) {
newData.push(
[
s.points[j - 1].x +
(p.x - s.points[j - 1].x) / 2,
s.points[j - 1].y +
(p.y - s.points[j - 1].y) / 2
],
[p.x, p.y]
);
} else {
newData.push([p.x, p.y]);
}
});
s.setData(newData, false);
});
this.redraw(false);
}
}
}
},
实时演示:https://jsfiddle.net/BlackLabel/d8jq9bvh/
API参考:https://api.highcharts.com/highcharts/chart.events.load