Highcharts重绘不重绘数据

2024-04-12

我一直在玩Highcharts (v3.0.10)在网页上呆了一周,打印页面时无法重新绘制图表。问题是我在图表中使用深色背景颜色,但在打印时,我想将其更改为白色。为了实现这一点,我需要redraw()更改后我的图表backgroundColor财产。问题是,当我这样做时,打印预览的背景颜色会发生变化,但数据不见了,由于某种原因它不会被重绘。

Before尝试更改背景颜色,我一直在对容器 div 大小进行一些修改并调用reflow()让图表调整为 A4 页面,在预览打印页面时效果非常好:容器的大小正是我想要的,图表成功地回流到新的大小。

当我希望背景变白并添加redraw()当用户尝试打印页面时触发的回调方法。集装箱仍然reflow()正确并且背景变为白色,但是图表上缺少数据。

我创建了一个样本小提琴你可以在这里评论 https://jsfiddle.net/eae72xuw/7/。它适用于 Chrome 和 Firefox(我的意思是你可以重现这个问题)。为了预览我提供的这个小提琴,只需去尝试打印小提琴页与您的浏览器一起使用,因此会出现页面打印预览窗口。

添加了一些Firefox打印页面预览和数据消失的截图在这个链接上 https://i.stack.imgur.com/NFdEw.jpg.

另请注意Highcharts我正在使用的版本:3.0.10。它不是最新的,但使用我拥有的当前许可证无法获得更高的版本。


一些代码和东西

打印处理程序和用户尝试打印时执行的代码:

/** Chrome **/
        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');
            mediaQueryList.addListener(function (mql) {
                if (mql.matches) {
                    resize();
                } else {
                        unresize();
                }
            });
        }
    // Firefox
  if (window.onbeforeprint !== undefined && window.onafterprint !== undefined) {
            window.onbeforeprint = function() {
                resize();
            }
            window.onafterprint = function() {
                unresize();
            }
        }

  var originalBackground = '#333';
  function resize(){
      // Do some transformations to fit an A4 page that 
      //are not the matter of this question
      // ......
      //......
      // Loop through all containers (only two but anyways...)
      // and apply changes
      $('.graph-container').each(function(i,e){
        let chart = $(e).highcharts();
        chart.options.chart.backgroundColor = '#FFFFFF';
        // Create new chart with background color
        $(e).highcharts(chart.options);
        // Force redraw 
        $(e).highcharts().redraw();
    });
  }      
  function unresize(){
    $('.graph-container').each(function(i,e){
            let chart = $(e).highcharts();
      // Revert background to original color #333
      chart.options.chart.backgroundColor = originalBackground;
      $(e).highcharts(chart.options);
      $(e).highcharts().redraw();
    });
  }

None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Highcharts重绘不重绘数据 的相关文章

  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • 按搜索值过滤元素 - 多个单词

    我有一个由 DIV 和 INPUT 搜索框组成的列表
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • jQuery:处理 getJSON() 中的错误?

    使用 jQuery 时如何处理 500 错误getJSON http api jquery com jQuery getJSON 有几个关于错误处理的问题getJSON and https stackoverflow com questio
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • Javascript 假值(null、未定义、false、空字符串:“”或 '' 和 0)和比较(==)运算符 [重复]

    这个问题在这里已经有答案了 当我使用任何一个值时 null undefined false 0 in a if陈述 它总是被评估为谬误 false 另外 这些值的否定 null undefined false 0 in a if语句总是被评
  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 代码镜像错误:未捕获错误:扩展集中无法识别扩展值([对象对象])

    全部 我目前正在从事一个React Electron项目 该项目的目标是完成一个Markdown编辑器 当我配置codemirror 该程序报告错误说 Uncaught Error Unrecognized extension value
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • 如何在每个页面上多次使用具有相同类名的 Masonry?

    我需要每页有多个砌体网格 我使用 wordpress 循环生成代码 因此每个 div 容器都具有相同的类名 有没有办法在所有同名的 div 容器上调用 Masonry html div class print slider div clas
  • PHP:三元运算符

    这似乎是一个非常简单的问题 但我尝试的一切都给了我一个错误 if query results gt have posts count results query results gt found posts 问题 如何添加else这段代码的
  • Erlang停止gen_server

    我有 gen server start UserName gt case gen server start global UserName player of ok gt io format Player UserName started
  • 为什么我的 img 错误函数失败?

    我动态构建的一些 img 元素可能会失败 对于这些情况 我从这里得到了一些代码 有没有办法以编程方式确定图像链接是错误的 https stackoverflow com questions 17702123 is there a way t
  • PHP:类似 Youtube 的短 ID,带有盐

    我需要对数据库 ID 进行编码 加密并将其附加到我的 URL 中 安全性不是我想要解决的问题 但我正在寻找具有中等安全性的东西 主要目标是拥有唯一且 URL 安全的短 ID 下面的代码片段似乎可以满足我的需要 来自http programa
  • 推送通知未显示

    我开发了一个使用推送插件的phonegap应用程序 我创建了一个示例服务器 推送消息未显示在通知栏中 但消息正在应用程序中显示 请帮忙 我的代码是 var 推送通知 function onDeviceReady app status ul
  • 为什么这个 Parallel.ForEach 代码会冻结程序?

    更多新手问题 此代码从主窗口的列表中获取多个代理 我不知道如何使变量在不同函数之间可用 并对每个代理进行检查 简单httpwebrequest 然后将它们添加到名为的列表中finishedProxies 由于某种原因 当我按下开始按钮时 整
  • 如何在 linq 中对引用类型属性进行分组?

    我有一堂这样的课 public class Order public int Id public Person SalesPerson public class Person public int Id public string Name
  • 我在哪里可以找到 jpa orm.xml 使用示例[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在尝试查看 JPA orm xml 的一些使用示例 如果有人引导我访问链接 架构在这里 http java sun com xml n
  • 类变量、成员变量、局部变量、全局变量之间的区别[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 类变量 成员变量 局部变量和全局变量的分类 在类定义中定义为 static 的变量是类变量 public MyClass static
  • 如何通过 pip 安装 twilio 软件包?

    I have Python 2 7 12 64 位 安装在我的 Windows 计算机上 我安装的时候添加了pip和执行程序小路 现在当我尝试安装时Twilio with pip install twilio 我收到错误 pip is no
  • 为什么 std::string_view 在三元表达式中创建悬挂视图?

    考虑一个返回 a 的方法std string view要么来自返回 a 的方法const std string 或来自空字符串 令我惊讶的是 以这种方式编写方法会导致悬空字符串视图 const std string otherMethod
  • 推荐的博客数据库后端

    问候 我正在使用 php 构建我的个人网站 我的标准方法是使用 MySQL 作为数据库后端 我听说过很多关于面向文档的数据库 我想知道这些 couchDB mongoDB 是否对我来说是更好的选择 我知道像我的个人主页这样的低流量网站不会因
  • PHP:特定代码行的 sleep()

    是否可以使用 sleep 或其他函数 在执行之前等待 我有例如 div bla bla div some divs and html 如何在页面加载后 5 秒执行第一个 php 脚本 但在页面加载时显示其他所有内容 如果我在第一个 php
  • Golang调用CUDA库

    我正在尝试从 Go 代码中调用 CUDA 函数 我有以下三个文件 test h int test add void test cu global void add int a int b int c c a b int test add v
  • 如何在 angularjs 中进行基本身份验证?

    如何在 AngularJs 中进行基本身份验证 我用谷歌搜索过 但资源对我不起作用 我是veryAngularJS 新手 假设你的 html 定义如下 h2 Todo h2 div div
  • connect-redis - 如何保护会话对象免受竞争条件影响

    我使用 nodejs 和 connect redis 来存储会话数据 我将用户数据保存在会话中 并在会话生命周期中使用它 我注意到两个更改会话数据的请求之间可能存在竞争条件 我尝试过使用 redis lock 来锁定会话 但这对我来说有点问
  • 有人可以澄清 Celery 任务中任务优先级的用法吗?

    该文档很少提及priority属性 一份罕见的文档参考资料如下 priority int The task priority a number between 0 and 9 Defaults to the attr priority at
  • Qt GUI 编译后没有改变

    我使用 Qt Designer 编译并运行创建了一个 GUI 然后我在 GUI 中做了一些更改并再次重新编译 但 GUI 保持不变 即使我删除小部件并重新编译它们也会出现 I tried Clean All and Clean Projec
  • Highcharts重绘不重绘数据

    我一直在玩Highcharts v3 0 10 在网页上呆了一周 打印页面时无法重新绘制图表 问题是我在图表中使用深色背景颜色 但在打印时 我想将其更改为白色 为了实现这一点 我需要redraw 更改后我的图表backgroundColor