我正在使用Highcharts API,并且正在使用列范围图来表示事件时间表。纵轴表示事件ID,横轴表示时间。
用户应该能够通过单击图表来添加单个事件。
添加后,用户应该可以单击新添加的事件将其删除。
删除后,用户应能够再次单击该图表以将新事件重新添加到另一个位置。
在大多数情况下,这一切都很好-See JS Fiddle Demo
在演示中,首先单击图表以添加红色条。然后单击红色条将其删除。这完全是应该的。问题是,如果您尝试在删除红色条之后再次添加它,则垂直轴上的类别会增加。
如何添加一个点,然后将其删除,然后再次添加它,而不会在垂直轴上“重新生成”额外的类别?
这是代码(上面链接了工作的JS小提琴)。我试图尽可能简化它,以便专注于手头的问题。
$(function () {
var flag = false;
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
events: {
click: function (e) {
if (!flag) {
var y = e.yAxis[0].value;
this.series[0].addPoint({
name: 'New',
low: y,
high: (y + 10),
color: 'red',
events: {
click: function () {
this.remove();
flag = false;
}
}
});
flag = true;
}
}
}
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
tooltip: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[3.2, 8.5]
]
}]
});
});
我通读了Highcharts API并尝试了所有我能想到的但无济于事的方法。任何帮助表示赞赏。谢谢。
最佳答案
OP和我之间的协作努力...
重新注入原始的x轴类别和序列数据:
events: {
click: function () {
this.remove();
chart.xAxis[0].update({
categories: xAxisCategories
});
chart.series[0].update({
data: seriesData
});
flag = false;
}
}
哪里:
chart = $('#container').highcharts()
xAxisCategories = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
seriesData = [....]
(原始系列数据)updated fiddle