Graph 如何在第二次单击时取消选中highcharts中的事件

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

---

因此，解决方案非常简单。可以使用一个标志来检查是否单击了相同的点，并在发生时使用

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();
    }
  }
});

演示：

$(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();
    }
  }
});

API参考：

$(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();
    }
  }
});

---

你能说得更准确些吗？你说“第二次点击时在highcharts中取消点击事件”是什么意思？你想隐藏第二个图表吗？嘿，Wojciech，抱歉，我所说的取消点击是指当点击其中一列并显示下图时，在第二次点击同一列时，下图“隐藏”回初始状态（第一次点击“取消隐藏”，第二次点击“返回隐藏”）。我希望这是有道理的。谢谢