highcharts本地导出

2022-11-21 10:13:15 浏览数 (2)

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

代码语言：javascript复制
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

代码语言：javascript复制
    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、在图表中设置一个宽度

代码语言：javascript复制
        chart: {
          zoomType: "x",
          type: "spline",
          width:null
        },
代码语言：javascript复制
  mounted() {
    this.chartOptions.chart.width = this.$refs.chartOptions.offsetWidth
    this.chartOptions.exporting.printMaxWidth = this.$refs.chartOptions.offsetWidth
  },
highcharts javascript

0 人点赞