如何在第二次点击时取消点击 highcharts 中的事件

Question

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

$(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/

API参考：

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

如何在第二次点击时取消点击 highcharts 中的事件

How can I unclick an event in highcharts on the second click

graph

click

highcharts