如何在第二次点击时取消点击高图表中的事件

Question

在这个

例子中，我试图在柱形图下显示图表时取消单击图表。在我的示例中，下面的图表只能更改为其他柱形图图形，但我无法恢复到初始状态。有没有办法直接解决这个问题？还是我必须包含一些 jquery？

http://jsfiddle.net/Yrygy/150/

$(function () {
    var data = {
        test: [0, 1, 2],
        click: [13, 15, 14],
        other: [100,200 ,100]
    };
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        plotOptions: {
            bar: {
                point: {
                    events: {
                        click: renderSecond
                    }
                }
            }
        },
        series: [{
            data: [{
                y: 100,
                name: 'test'
            }, {
                y: 34,
                name: 'click'
            }, {
                y: 67,
                name: 'other'
            }]
        }]
    });

    function renderSecond(e) {
        var point = this;
        console.log(point);
        $("#detail").highcharts({
            title: {
                text: point.name + ':' + point.y
            },
            series: [{
                data: data[point.name]
            }]
        });
    }
});

Answer 1

所以解决方案非常简单。可以使用标志来检查是否单击了相同的点，并在发生时chart.destroy()删除图表来实现。

法典：

$(function() {
  var secondChart,
    clickedPointId,
    data = {
      test: [0, 1, 2],
      click: [13, 15, 14],
      other: [100, 200, 100]
    },
    chart;
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'bar'
    },
    plotOptions: {
      bar: {
        point: {
          events: {
            click: renderSecond
          }
        }
      }
    },
    series: [{
      data: [{
        y: 100,
        name: 'test'
      }, {
        y: 34,
        name: 'click'
      }, {
        y: 67,
        name: 'other'
      }]
    }]
  });

  function renderSecond(e) {
    var point = this;
    if (clickedPointId !== point.id) {
      clickedPointId = point.id;
      secondChart = Highcharts.chart('detail', {
        title: {
          text: point.name + ':' + point.y
        },
        series: [{
          data: data[point.name]
        }]
      });
    } else {
      clickedPointId = null;
      secondChart.destroy();
    }
  }
});

演示：

• http://jsfiddle.net/BlackLabel/m5ns84xy/

接口参考：

• https://api.highcharts.com/class-reference/Highcharts.Chart#destroy