“如何在悬停时在条形图上显示数据并更改颜色?”

Azezur Ra​​hman |

我正在开发一个让孩子们在输入某些数据时显示图表的前端。
我想更改条形mouseover的颜色,更改条形的颜色并显示与此条形相关的数据。
只需要使用JQuery即可完成,不能使用任何插件。

<script id="hover">
    function draw(){
        var n = document.getElementById("num").value;
        var GV = n.split(",");
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var width = 40;
        var X = 50;
        ctx.fillStyle = "#003366";
        for(var i = 0; i<GV.length; i++){
            var h = GV[i];
            ctx.fillRect(X,canvas.height - h, width, h);
            X += width+15;
        }
    }
奇拉格(Chirag)
  • 首先,将图或任何代码添加到<div>元素中,因为给id脚本标签是不好的做法。

  • id='hover'您的div,请应用以下代码并进行检查!我希望这应该工作。

  • 您还可以根据需要操纵.css()对象并附加样式。

$('#hover').mouseover(function() {
  $(this).css({'font-size': '36px', 'color': 'red', 'background-color': 'blue'});
})

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在悬停的条形图上添加“阴影”?

python-如何在条形图上显示值

如何在条形图上的条形上方写文本(Python)?

悬停时Chartjs条形图显示旧数据

c3.js-如何在条形图悬停时显示手形光标

如何在Vega-lite条形图中更改条形的颜色?

Chartjs-使用条形图在悬停时显示所有数据集中的元素

在条形图上显示值

如何在条形图上显示数值计数

如何在所有条形图子图上显示x轴标签?

如何更改条形图中的颜色

将鼠标悬停在条形图上时如何注释X和Y的值

如何在堆叠的条形图上同时显示数据标签和总和

如何在条形图上正确放置条形图

如何在倒立柱图上显示与条形图相同的标签

如何在条形图上添加图例?

如何有条件地在条形图上的海洋条形图中显示数据框的不同列值?

如何在条形图上堆叠图标?

更改堆叠条形图上的字体颜色

如何在ggplotly中更改条形图的悬停背景颜色

Amchart 4:如何在条形图中单击条形/列时突出显示条形/列

如何更改此条形图上条形的顺序?

如何在单元格值悬停时通过Rshiny中的点图/条形图显示数据摘要

如何在Android Studio中从SQL数据库在条形图上显示数据

如何在悬停时更改href的颜色

如何更改Google Chart API条形图上的标签颜色?

如何在Excel中的简单堆积条形图上更改轴点

如何在鼠标悬停时更改离散的条形颜色-angular-nvd3

在C3js上,如何将工具提示悬停在条形图上时显示该条的数据?

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档