取消选择和选择事件

Question

I am using this fiddle - https://jsfiddle.net/BlackLabel/3tqkjLoh/6/

Here the issue - When I select other point from the previous point of the pie (without unselecting the previous one). It shows the status of unselect event of the previous point. I want the status of both 'selected the current one and unselected the previous one'

const content = document.getElementById('content');
const chart = Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      point: {   
        events: {
          select: function(event) {
            const selected = this;      
            if (selected) {
              content.textContent = selected.options.name
              /* do something */
              // fetch(`/api?id=${ selected.options.id }`)
            } else {
              content.textContent = 'nothing'
            }
          },
          unselect: function () {
            content.textContent = 'unselect event: ' + this.options.name
          }
        }
      }
    },
  },

  series: [{
    data: [{
      y: 20,
      "name": "click me",
    }, {
      y: 60,
      "name": "click me foo",
      selected: true,
      sliced: true,
    }, {
      y: 100,
      "name": "click me bar",
    }, {
      y: 100,
      "name": "click me baz",
    }, ]
  }]
});

Answer 1

Here's the problem, selected event triggers before unselect event So basically, content.textContent is first set to selected.options.name , and then again sets to 'unselect event: ' + this.options.name and then the latest value is appeared onto the DOM.

https://jsfiddle.net/devatquarxps/5yb0wehd/7/

 const content = document.getElementById('content'); const chart = Highcharts.chart('container', { chart: { type: 'pie' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', point: { events: { select: function(event) { const selected = this; selected ? content.textContent ='select event: ' + selected.options.name + ' | ' : content.textContent = '' }, unselect: function () { content.textContent =content.textContent + ' unselect event: ' + this.options.name } } } }, }, series: [{ data: [{ y: 20, "name": "click me", }, { y: 60, "name": "click me foo", selected: true, sliced: true, }, { y: 100, "name": "click me bar", }, { y: 100, "name": "click me baz", }, ] }] });

 <script src="https://code.highcharts.com/highcharts.js"></script> <h3 style="color: red">open console panel</h3> <p> After clicking, [selected and sliced] status is not synchronized update； </p> <div> <h5>Show to users</h5> <h6>You have chosen :</h6> <p id="content"></p> </div> <div id="container" style="height: 400px"></div>