程序员经验分享-hwhale

Chartjs 在鼠标悬停时非常快速地调整大小（闪烁）

2024-03-07

我在基于引导的页面中有一个图表，我试图在页面调整大小时调整它的大小，以遵循响应式设计的变化。所以我有这段代码：

function redrawChart() {
    var w = $("#chart_container").width();
    var c = document.getElementById("chart_canvas");
    c.width = w;
    c.height = w/2;
    $("#chart_canvas").css("width", w);
    $("#chart_canvas").css("height", w/2);

    var chart_canvas = document.getElementById("chart_canvas").getContext("2d");
    var line_chart= new Chart(chart_canvas).Line(data, options);
};

redrawChart();

var resizeTimer; 

$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(redrawChart, 250);
});

因此，redrawChart 在页面加载时调用一次，然后在每个页面调整大小时调用。

症状：加载页面后，只要不调整大小，一切都可以正常工作。调整大小后，图表会闪烁，当鼠标悬停在图表上时，图表会很快调整大小。

这里可能出了什么问题？


您需要先销毁图表，然后再在同一画布上重新创建它。所以你可以像这样编辑你的重画：

 //declare outside so it can be resued and checked
 var line_chart;

function redrawChart() {
    //if we already have a chart destroy it then carry on as normal
    if(line_chart)
    {
            line_chart.destroy();
    }
    var w = $("#chart_container").width();
    var c = document.getElementById("canvas");
    c.width = w;
    c.height = w/2;
    $("#chart_canvas").css("width", w);
    $("#chart_canvas").css("height", w/2);

    var chart_canvas = document.getElementById("canvas").getContext("2d");
    line_chart= new Chart(chart_canvas).Bar(barChartData);
};

这是一个小提琴，因此您实际上可以重新调整运行窗口的大小以查看其工作情况http://fiddle.jshell.net/leighking2/4apqqjL0/ http://fiddle.jshell.net/leighking2/4apqqjL0/

和你喜欢的一个片段

var randomScalingFactor = function () {
    return Math.round(Math.random() * 100)
};

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
        fillColor: "rgba(15,18,20,0.5)",
        strokeColor: "rgba(15,18,20,0.8)",
        highlightFill: "rgba(15,18,20,0.75)",
        highlightStroke: "rgba(15,18,20,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }]

}


 var line_chart;

function redrawChart() {
    if(line_chart)
    {
            line_chart.destroy();
    }
    var w = $("#chart_container").width();
    var c = document.getElementById("canvas");
    c.width = w;
    c.height = w/2;
    $("#chart_canvas").css("width", w);
    $("#chart_canvas").css("height", w/2);

    var chart_canvas = document.getElementById("canvas").getContext("2d");
    line_chart= new Chart(chart_canvas).Bar(barChartData);
};

redrawChart();

var resizeTimer; 

$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(redrawChart, 250);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.js"></script>
<div id="chart_container"style="width: 50%">
    <canvas id="canvas" height="450" width="600"></canvas>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

twitterbootstrap

chartjs

Chartjs 在鼠标悬停时非常快速地调整大小（闪烁） 的相关文章

  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div

  • 发送 POST 请求时 JSON 原语无效

    我有以下 ajax 请求 其中我尝试将 JSON 对象发送到服务器 function sendData subscriptionJson ajax type POST url Url Action SubscribeSecurities S

  • 模态中的引导模态

    如何使用 Jquery 在另一个模态中构建引导模态 第一个模态应该在后台 当我参考引导文档时 发现一次显示多个模式需要自定义代码 任何想法 您可能想尝试 Bootstrap Modal 插件 此处演示 可堆叠 http jschr gith

  • 如何在Rails中使用jquery tokeninput？

    我正在尝试在我的应用程序的表单中添加 tokeninput jquery 字段 该字段允许用户发布状态更新 我希望用户能够将作品 单独的模型 附加到状态更新中 我正在使用 act as taggable on gem 并且我的查询指定标签上

  • 如何保留数组的重复项

    在 Javascript 中 我试图只将重复项保留在数组中 例如我的初始数组是 1 1 2 3 3 3 3 4 5 5 结果应该是 1 3 5 我尝试过使用 indexOf 和 inArray 但无法弄清楚 我知道如何删除重复项 但保留它们

  • 如何禁用“您是否只想查看安全传送的网页内容”警告？

    我的网站有完整的 https 及其使用外部 jquery 资源 即 http 在 IE 8 中 当我重定向网站时 它给了我 您只想查看安全传送的网页内容 警告 如何避免这种情况 有没有可用的脚本可以解决这个问题 提前致谢 似乎有两个可能的问

  • 使用 JavaScript 在日期中添加小时和分钟

    我正在根据世界各地的时区构建会议日历 我的问题是如何在 JavaScript 中从用户选择的日期中添加或减去时区 例如 在选择表单上 用户将从表单中选择日期 然后我将获取结果并转换为日期 如下所示 var ldSelectDate new

  • 在画布上绘制多个矩形

    我试图在鼠标移动时在画布上添加多个矩形 但是当我在图像上绘制矩形时 画布上的背面图像也会被清除 我不想删除它 我想要画布上有多个矩形而不清除画布图像 请检查下面的 JavaScript 代码 var canvas document getE

  • 仅当表单已提交时才触发 jQuery 表单验证？

    不引人注目的验证基于这样的想法 don t进行表单验证 直到用户提交表单 一旦发生这种情况 如果表单上的某些内容无效 那么一旦用户更改了每个字段 就会立即验证它 我想做的是 不显眼地 触发表单元素的验证 也就是说 only如果用户已尝试提交

  • 取消html5浏览器中的单图请求

    我正在动态加载 大 图像以绘制到 html5 画布中 如下所示 var t new Image t onload t src http myurl 但每隔一段时间就会想取消图片请求完全地 我想出的唯一方法是设置src to i e t sr

  • 无法将数据加载到 mvc 4 中的 jTable 中

    好的 我第一次尝试 jTable 我可以加载表 但这对我没有什么好处 因为它不会加载我的任何数据 当我调试程序时 我想要的表中的所有行都存储在我的列表中 因此我很困惑为什么当我运行应用程序时会弹出一个对话框 显示 与服务器通信时发生错误 H

  • 为什么点击内容后放大的ajax弹出框会关闭

    请帮助我 我一直在尝试让放大的弹出ajax框显示登录表单 似乎表单出现了 但是一旦我单击表单或ajax主体中的任意位置 它就会消失 下面是代码 document ready function ajax popup link magnific

  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中

  • jQuery 选择 # id 以单词为前缀，计数器为后缀

    有没有办法用 jQuery 选择所有带有前缀 my 和后缀 0 9 的 id 像这样的 my 1 4 还是可以用循环来实现 div div div div div div div div div div 第一个想法 似乎效果很好 div i

  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div

  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件

  • 使用流体网格系统在引导程序上对齐输入

    我正在创建一个表单 要求用户输入他们的姓名和电子邮件地址 表单的第一行对于姓名的每个部分都有两个并排的输入 第二行对于电子邮件地址有一个输入 其宽度应与第一行组合的宽度相同 我正在尝试使用流体网格系统 但无法将第二行与第一行对齐

  • 当用户单击链接时，如何记录 MixPanel 事件？

    当用户单击某种类型的链接时 我试图在 MixPanel 中记录一个事件 我正在使用 JQuery 不引人注意地完成此操作 据我所知 我需要添加一个回调函数 以便在记录事件后将用户带到 URL 这是我正在使用的代码 不幸的是

  • 如何在jquery中获取保存时间和当前时间的差异？

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201

  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di

随机推荐

  • AFNetworking (AFHttpClient) 离线模式不适用于 NSURLRequestReturnCacheDataDontLoad 策略

    我在我的应用程序中使用 AFNetworking 并尝试通过使用缓存数据 如果可用 使其在离线模式下工作 我预计在将请求缓存策略设置为 NSURLRequestReturnCacheDataDontLoad 后 getPath parame

  • Java线程生产者消费者算法无法正常工作

    我正在尝试学习线程 因此我编写了一个示例生产者消费者问题 其中生产者生成从 1 到 10 的数字 而消费者必须显示它们 但只有消费者显示数字 1 并停止 正如我所说 该程序写得不好 可能很荒谬 但我仍然想弄清楚为什么从 1 到 10 的所有

  • 有条件地调用 React hook

    从react官方文档我们知道 React 依赖于 Hook 的调用顺序 https reactjs org docs hooks rules html explanation 那么 如果我想有条件地调用它 那么为钩子 保留 一个位置有什么问

  • jQuery 对话框第二次未打开

    I found 这个线程 https stackoverflow com questions 366696 jquery dialog box这基本上和我有同样的问题 但他们的解决方案对我不起作用 我第一次单击提交按钮时会出现该对话框 但第

  • 如何让子菜单浮动在div上？

    大家好 我有一个带有下拉菜单的子菜单 但是当菜单下降时 它会将下面的 div 向下推 知道如何修复它以便它加载到 div 上吗 还有一个是水平的 一个是垂直的 如何解决这个问题 谢谢 JSFiddle http jsfiddle net p

  • 将 .obj 转换为 .h 时无法使用“已定义（@array）”警告

    我正在尝试将我的 obj 文件转换为 h 头文件 但我收到 Can t use define array 也许您应该忽略 Defined 警告 并且没有 h 文件已创建 我尝试过更换 center to center或省略defined 但

  • 如何摧毁Fancybox？

    我正试图摧毁Fancybox http fancyapps com fancybox 我还没有找到任何方法来做到这一点文档 http fancyapps com fancybox docs 初始化后如何销毁呢 这不起作用 a unbind

  • 即使PODS不受升级影响，“helm升级”是否会重新启动PODS？

    我的舵图有大约 12 个 PODS 当我这样做的时候helm upgrade更改某些值后 除一个 POD 外 所有 POD 都会重新启动 我的问题是 Will helm upgrade即使 PODS 不受升级影响 也要重新启动吗 换句话说

  • mLab 上的 MongoDB 身份验证失败

    按照此处的步骤创建了一个新的 mLab 帐户并创建了一个数据库http docs mlab com create sub http docs mlab com create sub 尝试使用 mongo shell 和 mongoose N

  • 在WPF中，当由于空引用而绑定失败时，是否使用FallbackValue？

    我的视图模型公开了一个名为的列表MyList可能为空或null 我有一个想要根据这种状态隐藏的元素 如果MyList为空或null 那么该元素应该折叠 如果它有元素 那么应该显示它 这是我的DataTrigger

  • 如何console.log Moment.js版本？

    有没有办法查出是什么版本Moment js正在被使用 Moment js http momentjs com 只需使用moment version 文档页面中似乎没有提到这个属性 但是查看库很容易得到它github上的代码 https gi

  • ASP.NET 中的BackgroundWorker 线程

    是否可以使用 BackGroundWorker 线程ASP NET http en wikipedia org wiki ASP NET2 0适合以下场景 让浏览器端的用户不用等待很长时间 Scenario 浏览器请求一个页面 例如 Sen

  • GitPython 列出受某个提交影响的所有文件

    我正在使用这个 for 循环来循环所有提交 repo Repo C Users shiro Desktop lucene solr for commit in list repo iter commits print commit file

  • Android：使用第三方应用程序打开私人文件

    我正在制作一个从互联网下载文件并允许用户使用第三方应用程序打开这些文件的应用程序 我使用以下命令将这些文件存储在我的私人应用程序目录中getFilesDir http developer android com reference andr

  • 使用Python3.x创建贝叶斯网络并学习参数[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在为 Windows 上的 python3 x 寻找最合适的工具来创建贝叶斯网络 从数据中学习其参

  • 在 Python 中解析 CSS

    我正在合并 100 个 HTML 页面 所有页面的头部都嵌入了样式元素 使用 BeautifulSoup 提取 style 的内容 但现在只剩下将字符串解析为字典 selector str properties str 的任务 查看tiny

  • 如何自动下载每周导出服务文件

    在 SalesForce 中 您可以在此处安排最多每周一次的数据 备份 转储 设置 gt 管理设置 gt 数据管理 gt 数据导出 如果您有一个大型 Salesforce 数据库 则可能需要手动下载大量文件 有没有人有最佳实践 工具 批处理

  • CorePlot iPhone 错误：CorePlot-CocoaTouch.h：没有这样的文件或目录

    我正在尝试引导某人将 CorePlot 添加到他们的 iPhone 应用程序中 我的电脑上可以运行 但他总是收到 CorePlot CocoaTouch h no such file or directory 错误 如果我弄乱了构建设置中的

  • 在 Swift 中从 sockaddr_in 结构体获取 IP 地址和端口号？

    经过多次尝试和错误 但没有取得任何成功 看来我可能需要一些帮助 在最新版本的 Swift 中 如何从 sockaddr in 获取 IP 地址和端口号 我看到了一些相关的问题 但似乎无法在任何地方找到合适的例子 另外 我似乎并没有真正掌握如

  • Chartjs 在鼠标悬停时非常快速地调整大小（闪烁）

    我在基于引导的页面中有一个图表 我试图在页面调整大小时调整它的大小 以遵循响应式设计的变化 所以我有这段代码 function redrawChart var w chart container width var c document g

热门标签