javascript - 取消选择并选择事件

Question

我正在使用这个小提琴 - https://jsfiddle.net/BlackLabel/3tqkjLoh/6/

这里的问题 - 当我从饼图的前一个点中选择其他点时（没有取消选择前一个点）。它显示了前一点的取消选择事件的状态。我想要'选择当前的和未选择的前一个'的状态

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

这就是问题所在，selected event 在 unselect event 之前触发 所以基本上，content.textContent首先设置为selected.options.name，然后再次设置为'unselect event: ' + this.options.name，然后最新的值出现在 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>