取消选择事件

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

这里是问题，选定的事件在取消选择事件之前触发因此，基本上，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>