Блог

У меня есть график ChartJS. То, что я пытаюсь сделать, — это увеличить раздел моего графика, когда выбран сегмент круговой диаграммы. Затем уменьшите его, когда будет выбран другой раздел. Я могу увеличить раздел следующим образом (это работает):

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

если вы представляете круговую диаграмму, я хочу выбрать сегмент и увеличить его, затем, когда я выбираю другой сегмент, я хочу, чтобы исходный сегмент уменьшился и увеличил размер вновь выбранного сегмента. Я пытаюсь использовать счетчик, который переключается между 1 и 0 и увеличивает / уменьшает размер сегмента в зависимости от значения счетчика: Таким образом, приведенный ниже код работает, но только если я дважды нажму на один и тот же раздел. при первом нажатии на сегмент он увеличится, а при втором нажатии на тот же сегмент он уменьшится в размере.

Проблема в том, что когда я выбираю один сегмент, он увеличивается, а затем, когда я нажимаю на другой сегмент, он уменьшает второй сегмент. Как я могу это исправить?

 Var global_enlarging_toggle = 0;  onClick: (evt, item) =gt; {   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) =gt; {    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);  }  

But it doesnt work

Это связано с тем, что у вас есть глобальный переключатель singel. Если вместо этого вы создадите объект, в котором вы отслеживаете каждый элемент, по которому они были нажаты, и, таким образом, расширены, у вас не будет такого поведения:

 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) =gt; {  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); 

 lt;bodygt;  lt;canvas id="chartJSContainer" width="600" height="400"gt;lt;/canvasgt;  lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.js"gt;lt;/scriptgt; lt;/bodygt; 

Редактировать:

Обновите с желаемым поведением, сохраните глобальную переменную, которая отслеживает текущий набор данных и индекс данных, если она установлена, сначала установите ее обратно, а затем увеличьте текущий срез, если ключ такой же, как у старого ключа, ничего не делайте

 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) =gt; {  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); 

 lt;bodygt;  lt;canvas id="chartJSContainer" width="600" height="400"gt;lt;/canvasgt;  lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.js"gt;lt;/scriptgt; lt;/bodygt;