функция 'filter' для ярлыков легенды chart.js никогда не вызывается - PullRequest
Новая
       20

функция 'filter' для ярлыков легенды chart.js никогда не вызывается

1 голос
/ 12 июля 2019

Как видно из названия, у меня есть диаграмма chart.js с легендой. Мне нужно отфильтровать отдельные элементы, но функция фильтра никогда не вызывается. Мой код выглядит следующим образом: 

    var theChart = new Chart(canvas, {
      type: 'scatter',
      data: {
        labels: labels,
        datasets: datasets
      },
      options: {
        legend: {
          display: true,
          labels: {
            generateLabels: function(a) {
              console.log("generateLabels");
            },
            filter: function(item, chart) {
                console.log("filter");
                return false;
            }
          }
        }
      }
    });

generateLabels регистрируется без моего вызова, но фильтр никогда не регистрируется. Кроме того, так как я возвращаю false, легенда вообще не должна появляться, но все равно остается.

Скрипка, воспроизводящая проблему: http://jsfiddle.net/7bxdwfc0/1/

Я понятия не имею, почему эта функция не вызывается автоматически, поскольку функция других меток.

1 Ответ

1 голос
/ 12 июля 2019

Вероятно, должен быть больше комментарий, чем ответ, но я играл с вашей скрипкой и удалил ваш cdn для chart.js из скрипки и добавил тег HTML для cdn (2.8.0) в HTML. Это фактически заставляет функцию фильтра выполняться, и, похоже, она работает таким образом, хотя линия, соединяющая точки на диаграмме рассеяния, исчезает вместе с этим. Если вы просто используете Fiddle для разработки, вы можете проверить это или проверить версию файла chart.js, который вы используете.

Я взял один отсюда: Chart.js CDN's

Я могу еще немного поиграть на скрипке и сохранить ее, чтобы показать вам, о чем я говорю. 

var ctx = document.getElementById("myChart").getContext("2d");

var config = {
   type: 'scatter',
   data: {
      labels: ["Test","Test","Test"],
      datasets: [{
         label: 'Dataset1',
         type: "scatter",
         borderColor: "red",
         backgroundColor: "red",
         data: [{x: 50, y:10}, {x: 70, y:20}, {x: 80, y:90}],
         fill: false, 
         showLine: true
      }]
   },
   options: {
      responsive: true,
      maintainAspectRatio: false,
      legend : { display: true, position: 'bottom', 
      	labels: {
					filter: function(item, data) {
             // console.log(item.text);
             alert(item.text);
						return false;
          }
        }
      }
   }
}; // end of var config

var myLiveChart = new Chart(ctx, config);
html {
  overflow: hidden;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
<body style="height: 100%; width: 100%; overflow: hidden; margin: 0;">
<div id="canvas-wrapper" style="height: 100%; width: 100%; overflow-x: scroll; overflow-y: hidden;">
<div id="canvas-holder" style="height: 100%; width: 500px;" oncontextmenu="return false;">
<canvas id="myChart"></canvas>
</div>
</div>
</body>

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

...