highcharts - 将 wkhtmltopdf 与 highcharts 结合使用显示空白图表-6ren

highcharts - 将 wkhtmltopdf 与 highcharts 结合使用显示空白图表

转载作者：行者123 更新时间：2023-12-02 21:48:31

25

4

我正在尝试通过 Rotativa 使用 wkhtmltopdf 来转换基本 html 页面，该页面使用 jquery 和 highcharts 来呈现演示图表。在浏览器中显示时，图表可以正确呈现。谁能告诉我我做错了什么？此代码会生成空白 PDF。

我的看法:

<!DOCTYPE html>

<html>
  <head>
    <title>Highcharts Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        #chart { float:left; width:300px; height:300px; }
    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script>
        $(function() {
            $('#chart').highcharts({
                chart: {
                    backgroundColor: "red"  
                },
                title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: WorldClimate.com',
                    x: -20
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '°C'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: 'Tokyo',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: 'New York',
                    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                }, {
                    name: 'Berlin',
                    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                }, {
                    name: 'London',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }]
            });
        });
    </script>
</head>

<body>
    <div id="chart"></div>
</body>
</html>

这是我的 Controller :

using System.Web.Mvc;
using Rotativa;

namespace Completions.MvcApplication.Controllers.Pages
{
public class ReportsController : BasePageController
{
    public ActionResult Systems()
    {
        return new ViewAsPdf();
    } 
}
}

谢谢!
克里斯

最佳答案

我遇到了这个问题，原因是 JavaScript 错误。您可以通过使用 --debug-javascript 标志运行 wkhtmltopdf 来确认这一点。要进行更详细的调试(例如行号)，您必须下载 QtWeb browser .

具体而言，就我而言，两个问题是 Object.values(obj) 是未定义的函数，而 $('a:not(.ignore)') 是语法错误(当 jQuery 3.1.1 尝试使用选择器时)。修复方法是使用 Object.keys(obj).map(function (key) { return obj[key] }) 和 $('a').not('.ignore' )。

关于highcharts - 将 wkhtmltopdf 与 highcharts 结合使用显示空白图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19106434/

25

4

0

文章推荐： vba - 选择/分配多个列和行到数组

文章推荐： java - 配置对象时链映射器错误

文章推荐： amazon-s3 - Amazon S3 Cloudfront 部署最佳实践

文章推荐： c - 为什么C程序会输出这样的结果

Excel - 结合 SUMPRODUCT
我有一张 Excel 表格，用于更新玩家评分。播放器配售初始化 1 2 3 4 金融评级一个 1 2.0 1.000 0.018 0.016 0.014 2.007 D 2 -2.0 54.5
qt - 结合 QAbstractItemModels
我有一个 map = std::map ，其中 myItemModel继承QAbstractItemModel . 我现在要合并所有 myItemModel合一myItemModel (其他所有元素模
r - do.call 结合 "::"
我大量使用“do.call”来生成函数调用。例如: myfun <- "rnorm"; myargs <- list(n=10, mean=5); do.call(myfun, myargs); 但是
Scala future 结合
想象一下 InputStream 的以下变体: trait FutureInputStream { //read bytes asynchronously. Empty array means E
结合 C 和汇编代码
这是我的 C 代码: #include void sum(); int newAlphabet; int main(void) { sum();
Jquery:结合 "each"函数选择类后的所有内容
我只是想选择类“.last”之后的每个元素。 HTML: 1 2 Jquery
C# ？？结合？ : question
我正在为一个项目构建一个 XML 反序列化器，我经常遇到这种类型的代码情况: var myVariable = ParseNDecimal(xml.Element("myElement")) == n
SQLite:结合 OR 和 AND
这是来自 Selecting the highest salary 的继续问题假设有一个表 'wagetable' name lowhours highhours wage pri
c - 结合 if 语句来设置值限制
我正在为我的程序创建一个战舰程序；该程序运行良好，但我试图确保当用户将坐标超出范围时，程序会说他们输入的坐标不正确。这是代码: #include #include void
结合 GetLastError 的值和自定义错误消息
我有一个函数，它为每种情况返回不同的 DWORD 值，如果出现错误。所以我有以下定义: #define ERR_NO_DB_CONNECTION 0x90000 #define ERR_DB_N
结合.net框架在C#派生类中触发基类事件及实现接口事件
在派生类中引发基类事件以下简单示例演示了在基类中声明可从派生类引发的事件的标准方法。此模式广泛应用于 .NET Framework 类库中的 Windows 窗体类。在创建可用作其他类的基类的类时，应
perl 结合 map 和每个
我只是想知道这是否可能: use Modern::Perl; my @list = ('a' .. 'j'); map { func($_) } each(@list); sub func { m
excel - 结合 IF 函数和 OR 函数以允许多个条件
我一直在使用 =IF(L2="","Active",IF(K2I2,"Late"))) 有效，但现在我需要检查 F 上的多个条件专栏我试过了 OR 函数 =IF(OR(F2="Scheduled"
FFmpeg - 结合 2 个命令
我有 2 个命令，如下所示。在视频中添加介绍图片 ffmpeg -y -loop 1 -framerate 10 -t 3 -i intro.png -i video.mp4 -filter_com
vba - 结合 VBA 和公式来检查独特的输出
好的，我有这个公式可以根据名字和姓氏列表生成用户名。现在，虽然这可行，但我希望单元格改为引用我自己的 VBA 函数。但是，由于代码少得多，我仍然想使用原始公式。我有这个公式: =SUBSTITUTE
haproxy - 结合 HAProxy 统计数据？
我有两个 HAProxy 实例。两个实例都启用了统计信息并且工作正常。我正在尝试将两个实例的统计信息合并为一个，以便我可以使用单个 HAProxy 来查看前端/后端统计信息。我试图让两个 hapro
typescript - switchMap 结合 mergeMap
我有一个 Observable，其中每个新值都应该引起一个 HTTP 请求。在客户端，我只关心最新的响应值；但是，我希望每个请求都能完成以进行监控/等。目的。我目前拥有的是这样的: function
javascript - 如何将延迟加载与 TinyMCE 结合？
我的网站上有 TinyMCE 插件。在 TinyMCE 插件的 textarea 中添加图像时，我希望这些图像包含延迟加载。我网站的缩略图具有特定类型的延迟加载，其中 src 图像是灰色背景。根据用户
r - 将重叠间隔与 lubridate 结合
我希望合并润滑间隔，以便如果它们重叠，则从内部第一个时间获取最小值和从内部最后一个时间获取最大值并总结以创建一个跨越整个时间段的新间隔。这是一个reprex: library(lubridate, w
html - 结合 flex 和绝对定位时的混淆
我有一个应用程序，它本质上是一个页眉、主要内容和一个始终可见的页脚。页脚可以改变大小，我想在页脚上方的主内容面板上放置一些工具。主要布局是用 flex 完成的，我阅读文档的理解是绝对定位通过相对于最近

首页

博学

6Ren·AI

商城

highcharts - 将 wkhtmltopdf 与 highcharts 结合使用显示空白图表