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

时间:2014-12-17 00:33:37

标签: javascript jquery highcharts

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

1 个答案:

答案 0 :(得分: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