Диаграмма js отключить легенду щелчок не работает, если условие не оценивается - PullRequest
Новая
       11

Диаграмма js отключить легенду щелчок не работает, если условие не оценивается

0 голосов
/ 10 июля 2020

Я использую диаграмму js, и у меня есть случай, когда я не хочу выполнять какие-либо действия при щелчке по элементу легенды. Мне удалось добиться этого, используя приведенный ниже код: 

legend: {
    position: 'right',
    onClick: (e) => {
      if (!this.isFilterView)
        e.stopPropagation();
},

Однако, когда это фильтр, я все еще хочу, чтобы элементы легенды работали нормально при нажатии. В приведенном выше коде этого не происходит. Как заставить его работать?

1 Ответ

0 голосов
/ 12 июля 2020

Я считаю, что ваша собственная legend.onClick функция заменяет функцию по умолчанию. Поэтому остановка распространения события не имеет никакого эффекта.

Согласно фрагментам кода в разделе «Пользовательские действия при щелчке» из документации Chart. js, вы должны явно вызвать значение по умолчанию onClick, чтобы получить поведение по умолчанию. Ваш код необходимо изменить следующим образом: 

var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
...
legend: {
  position: 'right',
  onClick: (event, legendItem) => {
    if (this.isFilterView) {
      defaultLegendClickHandler(event, legendItem);
    }
  },

Однако я не смог заставить это работать. В качестве альтернативы вы можете самостоятельно переключать скрытое состояние наборов данных в зависимости от значения isFilterView. 

legend: {      
  onClick: (event, legendItem) => {
    if (this.isFilterView) {
      myChart.getDatasetMeta(legendItem.datasetIndex).hidden = !legendItem.hidden;
      myChart.update();
    }
  }
},

Пожалуйста, посмотрите на приведенный ниже фрагмент исполняемого кода, который иллюстрирует, как это работает. Переменную isFilterView можно переключать с помощью флажка, который появляется в верхнем левом углу холста. 

var isFilterView = false;

var myChart = new Chart('chart', {
  type: 'bar',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    datasets: [{
        label: 'John Doe',
        data: [1, 2, 3, 4, 5],
        backgroundColor: 'red'
      },
      {
        label: 'Jane Clark',
        data: [5, 4, 3, 2, 1],
        backgroundColor: 'blue'
      },
      {
        label: 'Michael Smith',
        data: [3, 4, 2, 1, 5],
        backgroundColor: 'green'
      }
    ]
  },
  options: {
    legend: {      
      onClick: (event, legendItem) => {
        if (isFilterView) {
          myChart.getDatasetMeta(legendItem.datasetIndex).hidden = !legendItem.hidden;
          myChart.update();
        }
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 1
        }
      }],
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<input id="filterToggle" type="checkbox" onclick='isFilterView = !isFilterView;'>Filter View
<canvas id="chart" height="80"></canvas>
...