JavaScript 基于计数器的函数

Question

我有一个 chartJS 图表。我想要做的是在饼图的一部分被 selected 时放大我的图表部分。然后在 selected 另一个部分时减少它。我可以通过以下方式增加部分（有效）：

onClick: (evt, item) => {
    item[0].element.outerRadius += 10;
},

如果你想象一个饼图，我想 select 一个段并放大它，那么当我 select 一个不同的段时，我希望原始段缩小并增加新 [= =30=]编辑段。我正在尝试使用一个在 1 和 0 之间切换的计数器，并根据计数器值放大/减小段的大小：所以下面的代码有效，但前提是我点击同一部分两次。第一次单击该段时它会放大，第二次单击同一段时它会缩小。

问题是，当我 select 一个片段放大，然后当我单击另一个片段时，它缩小第二个片段。我该如何解决这个问题？

Var global_enlarging_toggle = 0;

onClick: (evt, item) => {

    if (global_enlarging_toggle == 0){
        global_enlarging_toggle = 1;
        item[0].element.outerRadius += 10;
    } else {
        item[0].element.outerRadius -= 10;
        global_enlarging_toggle = 0;
    }

    console.log(global_enlarging_toggle)
    console.log(item[0].element.outerRadius);
}

,

我一直在尝试什么：

我一直在尝试以某种方式利用第一次点击的内容和第二次点击的内容，并检查它们是否相同。但我想不通。我通过设置 2 个新变量来完成此操作：

var first_segment;
var second_segment;




onClick: (evt, item) => {
    
        if (global_enlarging_toggle == 0){
            global_enlarging_toggle = 1;
            item[0].element.outerRadius += 10;
            first_segment = chart.data.labels[activeEls[0].index];
        } else if (first_segment != second_segment) {
            item[0].element.outerRadius -= 10;
            global_enlarging_toggle = 0;
            second_segment = first_segment;
        }
    
        console.log(global_enlarging_toggle)
        console.log(item[0].element.outerRadius);
    }

但是没用

Answer 1

这是因为您有一个单一的全局切换。如果您改为创建一个对象，您可以在其中跟踪它们的每个元素已被单击并因此展开，您将不会有这种行为：

const enlarged = {};
const expandAmount = 10;

const options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    onClick: (evt, activeEls, chart) => {
      const key = `${activeEls[0].datasetIndex}${activeEls[0].index}`;

      if (enlarged[key] || enlarged[key] === undefined) {
        activeEls[0].element.outerRadius += expandAmount;
        enlarged[key] = false;
      } else {
        activeEls[0].element.outerRadius -= expandAmount;
        enlarged[key] = true;
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.js"></script>
</body>

编辑：

更新所需的行为，保留一个跟踪当前数据集和数据索引的全局变量，如果设置，首先将其设置回去，然后扩大当前切片，如果密钥与旧密钥相同，则不要做任何事情

let enlarged = '';
const expandAmount = 10;

const options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    onClick: (evt, activeEls, chart) => {
      const key = `${activeEls[0].datasetIndex}-${activeEls[0].index}`;
      const keys = enlarged.split('-');

      if (keys.length == 2) {
        chart.getDatasetMeta(keys[0]).data[keys[1]].outerRadius -= expandAmount
      }

      if (key !== enlarged) {
        activeEls[0].element.outerRadius += expandAmount;
        enlarged = key;
      } else {
        enlarged = ''
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.js"></script>
</body>

JavaScript 基于计数器的函数

JavaScript function based on counter

javascript

chart.js