我正在使用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

09-25 20:07
查看更多