我需要在上面绘制带有工具提示的plotLine。 api无法提供绘图线的工具提示。 我可以画一条线,一条垂直线并为其制作工具提示,因此由于某种原因,只显示了一个工具提示点,即使我在行中也有多个点,因此我希望在用户移动鼠标时能够有多个不同的工具提示在它上面。
以下代码可显示仅显示一个点/标记-https://jsfiddle.net/Lftwjymc/
代码副本:
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 0, 1), 71.5],
[Date.UTC(2010, 0, 1), 75.5],
[Date.UTC(2010, 0, 1), 80.5],
[Date.UTC(2010, 0, 1), 106.4]
]
}]
});
我的代码是api-https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/data-array-of-arrays-datetime/的示例的微小修改(仅使行垂直)
如何用工具提示在图表中显示所有点(系列中的点)? 它适用于非垂直系列,但一个系列变为垂直时仅显示一个点。
或者,如何在绘图线上制作工具提示?
答案 0 :(得分:1)
您可以通过以下方法之一轻松实现它:
plotLine
显示直线,并使用scatter
系列分别绘制每个点:代码:
Highcharts.chart('container', {
xAxis: {
type: 'datetime',
plotLines: [{
color: '#FF0000',
value: Date.UTC(2010, 0, 1),
width: 1
}]
},
series: [{
type: 'scatter',
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 0, 1), 71.5],
[Date.UTC(2010, 0, 1), 75.5],
[Date.UTC(2010, 0, 1), 80.5],
[Date.UTC(2010, 0, 1), 106.4]
]
}]
});
演示:
API:
line
和scatter
:代码:
const data = [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 0, 1), 71.5],
[Date.UTC(2010, 0, 1), 75.5],
[Date.UTC(2010, 0, 1), 80.5],
[Date.UTC(2010, 0, 1), 106.4]
];
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
series: [{
linkedTo: 'main',
data: data
}, {
type: 'scatter',
id: 'main',
name: 'Series',
data: data
}]
});
演示:
答案 1 :(得分:0)
基于Wojciech Chmiel的回答-https://stackoverflow.com/a/56124122/1015848
我能够使用工具提示制作垂直线: 这是示例-https://jsfiddle.net/05bwkzma/
关键项目: 使用散点图; 使用链接到散点图的线图; 散点图应具有marker.enabled = false和status.hover.enabled = false [example]。
代码:
const data = [
[Date.UTC(2010, 0, 1), 29],
[Date.UTC(2010, 0, 1), 30],
[Date.UTC(2010, 0, 1), 31],
[Date.UTC(2010, 0, 1), 32],
[Date.UTC(2010, 0, 1), 33]
];
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
series: [{
linkedTo: 'main',
data: data
}, {
type: 'scatter',
id: 'main',
name: 'Series',
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
data: data
}]
});