Highcharts 中样条图上的重叠数据
Overlap data on spline chart in Highcharts
我在 Highcharts 中有一个样条图表。它有 24 小时的数据,即 24 点。现在,在这 24 小时内,发生了某些事件,我需要将其显示为样条图上的点。这些点需要有一个工具提示。我如何在样条图上重叠这些点,包括它们的工具提示?并且这些重叠点也需要在 x 轴上映射到它们对应的时间。有什么想法可以做到吗?
这是我想在 JSfiddle 中执行的操作的示例:-
http://jsfiddle.net/ttyc5dod/
$(function () {
$('#container').highcharts({
title: {
text: 'Test Graph',
x: -20 //center
},
xAxis: {
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
},
yAxis: {
title: {
text: 'Availability(%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Data',
data: [7.0, 6.9, 9.5, 10, 11.2, 12.5, 15.2, 16.5, 13.3, 18.3, 13.9, 9.6, 12, 13, 12, 11.2, 9, 8, 5, 12, 14, 12, 12, 12.5, 10]
}]
});
});
例如,在下面的示例中,在时间 23:00 和 24:00 小时之间,我们假设发生了必须在此图表上显示的事件(问题)。有什么方法可以在 23:00 和 24:00 之间的图表上绘制一个点,它显示了事件并且还应该有工具提示告诉这里 incident.enter 代码的详细信息
任何帮助将不胜感激。
如果事件发生,您应该能够添加新系列(我认为最好的是散点系列)并在数据点之间添加散点。
如果您想在第一个系列的线上添加散点,计算这些点的正确 y 位置应该很容易。
在这里您可以看到在两点之间的直线中添加散点的非常简单的示例:
function(chart) {
var value1 = chart.series[1].data[23].y,
value2 = chart.series[1].data[24].y;
chart.series[0].addPoint({
x: 23.5,
y: (value1 + value2) / 2,
details: 'this is an accident'
});
}
您可以在此处查看其工作原理示例:
http://jsfiddle.net/ttyc5dod/3/
我在 Highcharts 中有一个样条图表。它有 24 小时的数据,即 24 点。现在,在这 24 小时内,发生了某些事件,我需要将其显示为样条图上的点。这些点需要有一个工具提示。我如何在样条图上重叠这些点,包括它们的工具提示?并且这些重叠点也需要在 x 轴上映射到它们对应的时间。有什么想法可以做到吗?
这是我想在 JSfiddle 中执行的操作的示例:- http://jsfiddle.net/ttyc5dod/
$(function () {
$('#container').highcharts({
title: {
text: 'Test Graph',
x: -20 //center
},
xAxis: {
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
},
yAxis: {
title: {
text: 'Availability(%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Data',
data: [7.0, 6.9, 9.5, 10, 11.2, 12.5, 15.2, 16.5, 13.3, 18.3, 13.9, 9.6, 12, 13, 12, 11.2, 9, 8, 5, 12, 14, 12, 12, 12.5, 10]
}]
});
});
例如,在下面的示例中,在时间 23:00 和 24:00 小时之间,我们假设发生了必须在此图表上显示的事件(问题)。有什么方法可以在 23:00 和 24:00 之间的图表上绘制一个点,它显示了事件并且还应该有工具提示告诉这里 incident.enter 代码的详细信息
任何帮助将不胜感激。
如果事件发生,您应该能够添加新系列(我认为最好的是散点系列)并在数据点之间添加散点。
如果您想在第一个系列的线上添加散点,计算这些点的正确 y 位置应该很容易。
在这里您可以看到在两点之间的直线中添加散点的非常简单的示例:
function(chart) {
var value1 = chart.series[1].data[23].y,
value2 = chart.series[1].data[24].y;
chart.series[0].addPoint({
x: 23.5,
y: (value1 + value2) / 2,
details: 'this is an accident'
});
}
您可以在此处查看其工作原理示例: http://jsfiddle.net/ttyc5dod/3/