时间戳

首页 > 解决方案 > chart.js 图例标签的“过滤器”功能永远不会被调用

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

问题描述

正如标题所说，我有一个带有图例的 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 被记录，而我没有调用任何东西，但过滤器从未被记录。另外，由于我返回的是假的，所以传说根本不应该出现，但它仍然会出现。

重现问题的小提琴：http: //jsfiddle.net/7bxdwfc0/1/

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

标签： javascriptfilterchart.jslegend

解决方案

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

我从这里抓了一个： Chart.js CDN's

我可以多玩一点 Fiddle 并保存它，只是为了向您展示我在说什么。

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>

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

推荐阅读