草庐IT

javascript - 删除 "display:none"表单 div 后调整 c3.js 图表的大小

coder 2024-12-31 原文

所以我有一个功能来预加载元素并使用“display:none”来隐藏图表

<div class="col-sm-9 topTenWebCus" ></div>

脚本:

$(document).ready(function() {
    window.setTimeout(function(){
        $(".topTenWebCus").css("display","none");
        },200);
});

然后我得到了另一个 onclick 函数来删除 "display:none" css

$("#buttonFire").click(function(){
                        $(".topTenWeb30d").css("display","none");
                        $(".topTenWebCus").css("display","block");  
                    });

它工作正常。但即使我已将 Bootstrap 插入网站，它也不会自行调整大小。

我正在考虑使用内部函数来执行 .resize() 但它不起作用，是否有更好的方法来解决调整大小问题？

更新 1:

如果用户更改缩放比例，图表会自行调整大小。

我只是弄清楚一件重要的事情，如果缩放率为 100%，图表会正确显示，但如果用户更改缩放率，图表将不会调整到合适的大小。

更新2 我尝试使用 .show() 和 .hide() 但没有成功

示例解决方案

$("#buttonFire").click(function(){
                        $(".topTenWeb30d").css("display","none");
                        $(".topTenWebCus").css("display","block");  
                          chart.flush() // chart depends on your chart's name it could be anything like charrt112.flush()
                    });

最佳答案

您的问题似乎与 boorstrap 无关。检查这个jsFiddle ，您的确切代码可以很好地显示返回后显示正确的列宽。

在没有关于您使用的图表库的更多信息的情况下，我的猜测与大多数图表库一样，您的图表库在首次呈现时就确定了它的大小。当 div 大小发生变化时，您将不得不根据图表库在图表对象上手动调用 resize 、 redraw 或 referesh 等操作.

如果您可以指出您的图表库，或者更好地更新我的 jsFiddle 示例以显示您的图表，那么您将更容易弄清楚如何调整图表。

c3.js 更新

重新显示您的 div 后，尝试调用 chart.flush(); 并查看它是否正确调整大小。 

$("#buttonFire").click(function(){
    $(".topTenWeb30d").css("display","none");
    $(".topTenWebCus").css("display","block");
    chart.flush(); // use reference to your chart object
});

如果 chart.flush() 不起作用，作为最后一个选项，您可以根据您的 div 尺寸动态设置图表的宽度和高度。

chart.resize({
  height: $(".topTenWebCus").innerHeight(),
  width: $(".topTenWebCus").innerWidth()
});

关于javascript - 删除 "display:none"表单 div 后调整 c3.js 图表的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36275906/

javascriptamp34codestrongjquery

有关javascript - 删除 "display:none"表单 div 后调整 c3.js 图表的大小的更多相关文章

  1. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  2. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  3. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  4. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  5. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  6. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  7. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  8. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  9. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  10. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

随机推荐