chart.js 图例标签的“过滤器”功能永远不会被调用答案

【问题标题】：'filter' function for chart.js legend labels never being calledchart.js 图例标签的“过滤器”功能永远不会被调用
【发布时间】：2019-11-21 16:02:38
【问题描述】：

正如标题所说，我有一个带有图例的 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/

我不知道为什么这个函数没有被自动调用，因为其他标签函数是。

【问题讨论】：

标签： javascript filter chart.js legend

【解决方案1】：

可能应该更多的是评论而不是答案，但我正在玩你的小提琴，并从小提琴中删除了你的 chart.js 的 cdn，并在 HTML 中添加了 cdn (2.8.0) 的脚本标记。这实际上使过滤器函数执行并且它似乎以这种方式工作，尽管连接散点图中的点的线随之消失。如果您只是使用 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>

把它放在一个sn-p中。奇怪的是，即使你有一个数据集，过滤器也会运行两次。您的小提琴与您的示例 BTW 不同。

【讨论】：

如果您选择他们内置的库而不是过滤器执行的包。
抱歉回复晚了。奇怪的是，就是这样！我不只是在小提琴中开发，而且我的项目使用的是旧版本的图表 js，导致数小时的挫败感。谢谢！