高图表:将点添加到图表，然后删除，然后再次添加.然后重复

Highcharts: Add point to chart, then remove, then add it again... then repeat

本文关键字：然后 添加 删除 高图表      更新时间：2023-09-26

我正在使用Highcharts API，并且正在使用列范围图表来表示事件计划。纵轴表示事件 ID，横轴表示时间。

  • 用户应该能够通过单击图表来添加单个事件。
    • 添加
  • 后，用户应该能够单击新添加的事件将其删除。
  • 删除后，用户应该能够再次单击图表以在其他位置重新添加新事件。

在大多数情况下，这一切都工作正常 - 参见JS小提琴演示

在演示中，首先单击图表以添加红色条。然后单击红色条将其删除。这完全是它应该工作的样子。问题是，如果您在删除红色条后尝试再次添加红色条，则垂直轴上的类别会增加。

如何添加一个点，然后删除它，然后再次添加它，而不在垂直轴上"重新生成"额外的类别？

这是代码(工作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 = [....](原始系列数据(

更新的小提琴

相关文章：