使用 .keypress() 不工作更新chartjs饼图

LENide300_KK

我正在尝试创建一个动态 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 Haan

HTML 已经存在。但是,您的建议奏效了。但我不明白为什么?我想$(document).on('keypress', '.kkTable #dataTable_filter > label input', function() {'是一样的$('.kkTable #dataTable_filter > label').keypress(function() {吗?你知道这是为什么吗?LENide300_KK

不同之处在于,所有事件都会在 DOM 树上冒泡(传播)并最终出现在文档上。我提供的侦听器侦听文档上的按键事件,然后检查该事件是否来自根据过滤器的内容。因此,即使 HTML 在设置侦听器后发生更改,它仍然可以工作,您所拥有的 HTML 仅适用于既使用过滤器检查又在调用时存在的元素。杜威·德·哈恩

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS-$ index未使用keyPress更新

来自分类Dev

使用Keypress旋转消息-Jquery

来自分类Dev

addEventListener keyPress不注册按键

来自分类Dev

在 R 中使用 chartjs 包创建饼图

来自分类Dev

在画布元素上使用ng-keypress

来自分类Dev

Unity:使用不同的KeyPress跳过GameObjects

来自分类Dev

attachBrowserEvent KeyPress,在Chrome中无法使用Backspace

来自分类Dev

使用 KeyPress 事件“键入时搜索”

来自分类Dev

ng-keypress不触发功能

来自分类Dev

AngularJS:ng-keypress无法正常工作

来自分类Dev

使用Pandas Excel工作簿从1列创建饼图

来自分类Dev

如何使用javaFX中的KeyPress事件获得平滑的动画?

来自分类Dev

尝试使用ng-keypress跟踪文本区域的行

来自分类Dev

使用xlib将假的keypress事件发送到窗口

来自分类Dev

Unity:使用KeyPress依次打开一个GameObject

来自分类Dev

使用Keyup而不是CodeMirror中的keypress进行高级键映射

来自分类Dev

使用dojo keypress事件时无法避免最后输入的字符

来自分类Dev

使用SVG的饼图

来自分类Dev

使用chartjs问题在甜甜圈中间绘制饼图段百分比

来自分类Dev

我如何放置一个keyPress处理程序,该处理程序可以在按钮不聚焦的情况下使用?

来自分类Dev

EmberView的'keydown'和'keypress'事件不渲染吗?

来自分类Dev

ajax调用后jQuery keypress事件不持续

来自分类Dev

angular.js keypress指令事件神秘地不触发

来自分类Dev

KeyPress事件在Ember中无法按预期工作

来自分类Dev

AngularJs Ng-Keypress事件工作不正确?

来自分类Dev

Kendo UI:在TextBox中的KeyPress上强制更新ViewModel

来自分类Dev

使用matplotlib的多个饼图

来自分类Dev

如何在角度2/8中使用chartjs-plugin-labels(饼图)显示百分比(%)

来自分类Dev

使用事件侦听器在不使用jquery的情况下触发keypress事件

Related 相关文章

  1. 1

    AngularJS-$ index未使用keyPress更新

  2. 2

    使用Keypress旋转消息-Jquery

  3. 3

    addEventListener keyPress不注册按键

  4. 4

    在 R 中使用 chartjs 包创建饼图

  5. 5

    在画布元素上使用ng-keypress

  6. 6

    Unity:使用不同的KeyPress跳过GameObjects

  7. 7

    attachBrowserEvent KeyPress,在Chrome中无法使用Backspace

  8. 8

    使用 KeyPress 事件“键入时搜索”

  9. 9

    ng-keypress不触发功能

  10. 10

    AngularJS:ng-keypress无法正常工作

  11. 11

    使用Pandas Excel工作簿从1列创建饼图

  12. 12

    如何使用javaFX中的KeyPress事件获得平滑的动画?

  13. 13

    尝试使用ng-keypress跟踪文本区域的行

  14. 14

    使用xlib将假的keypress事件发送到窗口

  15. 15

    Unity:使用KeyPress依次打开一个GameObject

  16. 16

    使用Keyup而不是CodeMirror中的keypress进行高级键映射

  17. 17

    使用dojo keypress事件时无法避免最后输入的字符

  18. 18

    使用SVG的饼图

  19. 19

    使用chartjs问题在甜甜圈中间绘制饼图段百分比

  20. 20

    我如何放置一个keyPress处理程序,该处理程序可以在按钮不聚焦的情况下使用?

  21. 21

    EmberView的'keydown'和'keypress'事件不渲染吗?

  22. 22

    ajax调用后jQuery keypress事件不持续

  23. 23

    angular.js keypress指令事件神秘地不触发

  24. 24

    KeyPress事件在Ember中无法按预期工作

  25. 25

    AngularJs Ng-Keypress事件工作不正确?

  26. 26

    Kendo UI:在TextBox中的KeyPress上强制更新ViewModel

  27. 27

    使用matplotlib的多个饼图

  28. 28

    如何在角度2/8中使用chartjs-plugin-labels(饼图)显示百分比(%)

  29. 29

    使用事件侦听器在不使用jquery的情况下触发keypress事件

热门标签

归档