gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 19:25:05 25 4
gpt4 key购买 nike

如标题所示,我有一个带有图例的 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 在我没有调用任何东西的情况下被记录,但是 filter 从未被记录。此外,由于我返回 false,图例根本不应该出现,但它仍然出现。

重现问题的 fiddle :http://jsfiddle.net/7bxdwfc0/1/

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

最佳答案

可能应该更多的是评论而不是答案,但我正在玩你的 fiddle ,并从 fiddle 中删除了你的 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>

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

关于javascript - 永远不会调用 chart.js 图例标签的“过滤器”功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56997598/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com