Question

我正在使用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并尝试了我能想到的一切，但无济于事。任何帮助表示赞赏。感谢。

Answer 1

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

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

1 个答案: