Highcharts版本7.1.1如何使用amd模块离线导出PDF

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Highcharts版本7.1.1如何使用amd模块离线导出PDF相关的知识,希望对你有一定的参考价值。

如何使用amd模块导出离线导出到pdf的图表(Highcharts)?需要jsPDF模块“sometime”抛出requirejs不匹配的错误或搞砸其他需要的回调引用。

问题Highcharts论坛:https://www.highcharts.com/forum/viewtopic.php?f=9&t=41929&sid=5178a78a6547d8fb14769a85392b276c

var chart;
require(['highcharts', 'highcharts/modules/exporting', 'highcharts/modules/offline-exporting', 'jsPDF', 'svg2pdf'], function(Highcharts, a, b, jsPDF, svg2pdf) {
    window.jsPDF = jsPDF.default;
    window.svg2pdf = svg2pdf;
    chart = Highcharts.chart('container', {

    exporting: {
      libURL: 'https://code.highcharts.com/7.1.1/lib'
    },

    series: [{
      data: [3, 4, 5, 3, 2]
    }]

  });
});
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>

    <script>
      require.config({
        packages: [{
          name: 'highcharts',
          main: 'highcharts',
          location: 'https://code.highcharts.com/7.1.1'
        }],
        paths: {
          'jsPDF': 'https://code.highcharts.com/7.1.1/lib/jspdf',
          'svg2pdf': 'https://code.highcharts.com/7.1.1/lib/svg2pdf'
        }
      });

    </script>

  </head>

  <body>
    <div id="container"></div>
  </body>

</html>

的jsfiddle:https://jsfiddle.net/zbc149wh/2/

谢谢

答案

问题来自jsPDF:https://github.com/yWorks/jsPDF

我为所有define语句设置了一个名称,因此不再有匿名模块定义。现在它正在运作。

示例第3行

之前:

typeof define === 'function' && define.amd ? define(['exports'], factory) :

后:

typeof define === 'function' && define.amd ? define('jsPDF', ['exports'], factory) :
另一答案

您可以像这样设置离线导出

exporting: {
        chartOptions: {
            plotOptions: {
                series: {
                    dataLabels: {
                        enabled: true
                    }
                }
            }
        },
        fallbackToExportServer: false
    }

你的代码分叉:https://jsfiddle.net/viethien/fs03ou4k/7/

API参考:https://api.highcharts.com/highcharts/exporting.fallbackToExportServer

文件:https://www.highcharts.com/docs/export-module/client-side-export

以上是关于Highcharts版本7.1.1如何使用amd模块离线导出PDF的主要内容,如果未能解决你的问题,请参考以下文章

如何用highcharts制作3d图

该如何理解AMD ,CMD,CommonJS规范--javascript模块化加载学习总结

Highcharts 在低版本 IE 上使用注意事项及个人总结

Highcharts 导出功能

HighCharts终极版本

如何将遗留的 Dojo Toolkit 代码转换为 AMD?