highcharts本地导出

tianyawhl

发布于 2022-11-21 10:13:15

9280

发布于 2022-11-21 10:13:15

文章被收录于专栏：前端之攻略

highcharts有自动导出的模块，以vue中使用为例，只要在main.js中引入导出模块并注册

import Exporting from 'highcharts/modules/exporting.js'
Exporting(Highchart)

但是这样会调用highcarts在线的接口地址，但是要不能上外网就需要本地导出，本地导出只要额外引入离线导出模块并注册

import OfflineExporting from 'highcharts/modules/offline-exporting.js' OfflineExporting(Highchart)

需要配置libURL,否则依然调用的在线highcharts接口地址，具体操作把node_modules》highcharts>lib文件夹复制到我们项目的public>static目录下,并配置libURL

    exporting:{
        buttons:{
            contextButton:{
                menuItems: ["viewFullscreen", "printChart", "separator", "downloadPNG", "downloadJPEG", "downloadPDF"],
                // symbol: 'download',
                // symbol: "url(static/mass0.png)",
                // x:10,
                x:0,
                y:0
            }
        },
        libURL: "/static/lib/",
        pdfFont:{
            normal: require('@/assets/fonts/simhei.ttf')
        },
        // scale:1,  //默认2，设置图表尺寸使用
        // sourceWidth:1090,
        // printMaxWidth:1100,
        // width:1090 // 没有效果
    },

但是配置好之后遇到导出pdf文字会出现乱码，查资料发现需要升级highcharts高版本10.0以上，并下载字体文件(ttf格式的字体)，并配置pdfFont（如上）,

这种导出的图片或者pdf文件往往比较小，如果导出的内容跟显示的一样，需要额外设置如下，并按上面把scale设为1

1、在图表中设置一个宽度

        chart: {
          zoomType: "x",
          type: "spline",
          width:null
        },

  mounted() {
    this.chartOptions.chart.width = this.$refs.chartOptions.offsetWidth
    this.chartOptions.exporting.printMaxWidth = this.$refs.chartOptions.offsetWidth
  },

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-11-20，如有侵权请联系 cloudcommunity@tencent.com 删除

highcharts