我正在尝试创建一个动态 chartjs 饼图。到目前为止,我只能通过使用 jQuery .click 函数成功添加“更新”函数。但是,我还希望能够使用 jQuery .keypress() 函数更新图表。因此,我尝试将此函数插入创建饼图的 。然而,出于某种原因,这似乎不起作用。
我曾尝试更改函数的顺序,但是,似乎没有任何作用。我知道代码是正确的,因为如果我将它复制并粘贴到控制台中,它就可以工作。所以我怀疑它与在页面加载后触发函数有关,我尝试通过将 .keypress() 函数包装到 window.ready() 函数中来做到这一点,但是,这也没有解决问题.
这是我用来插入饼图的代码:
$(document).ready(function(chartData) {
var childText = $('.noDisplay tbody').text();
//Number of positives
var positiveCount = (childText.match(/Positiv/g) || []).length;
//Number of negatives
var negativeCount = (childText.match(/Negativ/g) || []).length;
//Find total number of tests
var totalTests = positiveCount + negativeCount;
//Calculate into %
var positiveProcent = positiveCount / totalTests * 100;
var negativeProcent = negativeCount / totalTests * 100;
//With 2 decimals
var positiveProcent2 = positiveProcent.toFixed(2);
var negativeProcent2 = negativeProcent.toFixed(2);
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Positive tests i %", "Negative tests i %", ],
datasets: [{
label: 'Positiv vs negativ',
data: [positiveProcent2, negativeProcent2],
backgroundColor: ['rgba(39, 174, 96, 0.5)', 'rgba(231, 76, 60, 0.5)', ],
borderColor: ['rgba(39, 174, 96, 1)', 'rgba(231, 76, 60, 1)', ],
borderWidth: 1
}]
},
options: {}
});
function updateChart() {
var childText = $('.col-sm-12 #dataTable_wrapper').text();
//Number of positives
var positiveCount = (childText.match(/Positiv/g) || []).length;
//Number of negatives
var negativeCount = (childText.match(/Negativ/g) || []).length;
//Find total number of tests
var totalTests = positiveCount + negativeCount;
//Calculate into %
var positiveProcent = positiveCount / totalTests * 100;
var negativeProcent = negativeCount / totalTests * 100;
//With 2 decimals
var positiveProcent2 = positiveProcent.toFixed(2);
var negativeProcent2 = negativeProcent.toFixed(2);
myChart.data.datasets[0].data = [positiveProcent2, negativeProcent2];
myChart.update();
}
$('.kkTable #dataTable_filter > label').keypress(function() {
console.log('1');
updateChart();
});
$('button').click(function() {
updateChart();
});
});
我怎样才能使 keypress() 函数工作?
提前致谢 :-)
通过将侦听器从一组非常具体的元素切换到使用前一个选择器作为on
方法选择器的文档来解决该问题。附上完整的讨论:
据我所知,标签元素不会发出按键事件。你确定你不是故意的
.kkTable #dataTable_filter > label input
?—杜威·德·哈恩是啊,我做了。只是尝试将其更改为那个,但仍然不起作用:/ – LENide300_KK
它记录 1 吗?因为如果没有,肯定有其他问题。您还可以将您的 HTML 附加到问题中吗?—杜威·德·哈恩
不,它没有,这也让我感到困惑。我会这样做,但问题是我从通过 PHP 生成的表中提取数据,然后使用 datatables.net 将一些排序 + 搜索功能应用于该表。所以我不能完全发布 HTML 而不是它太长了。– LENide300_KK
当您设置侦听器(按键部分)时,HTML 是否已经存在?还是稍后生成 HTML?因为那将解释为什么它不起作用。尝试将您的功能更改为以下内容:
$(document).on('keypress', '.kkTable #dataTable_filter > label input', function() {
– Douwe de HaanHTML 已经存在。但是,您的建议奏效了。但我不明白为什么?我想
$(document).on('keypress', '.kkTable #dataTable_filter > label input', function() {
'是一样的$('.kkTable #dataTable_filter > label').keypress(function() {
吗?你知道这是为什么吗?– LENide300_KK不同之处在于,所有事件都会在 DOM 树上冒泡(传播)并最终出现在文档上。我提供的侦听器侦听文档上的按键事件,然后检查该事件是否来自根据过滤器的内容。因此,即使 HTML 在设置侦听器后发生更改,它仍然可以工作,您所拥有的 HTML 仅适用于既使用过滤器检查又在调用时存在的元素。—杜威·德·哈恩
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句