Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >highcharts本地导出

highcharts本地导出

作者头像
tianyawhl
发布于 2022-11-21 02:13:15
发布于 2022-11-21 02:13:15
1.1K00
代码可运行
举报
文章被收录于专栏:前端之攻略前端之攻略
运行总次数:0
代码可运行

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
    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
代码运行次数:0
运行
AI代码解释
复制
        chart: {
          zoomType: "x",
          type: "spline",
          width:null
        },
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  mounted() {
    this.chartOptions.chart.width = this.$refs.chartOptions.offsetWidth
    this.chartOptions.exporting.printMaxWidth = this.$refs.chartOptions.offsetWidth
  },
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-11-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【HighCharts系列教程】七、导出属性——exporting
默认情况下,HighCharts支持将图表导出为图片或打印功能的。也就是在图表的右上角有两个按钮。打击即可进行相应的操作。
全栈程序员站长
2022/09/20
1.6K0
強大的jQuery Chart组件-Highcharts
Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库; 提
张善友
2018/01/22
2.4K0
強大的jQuery Chart组件-Highcharts
三分钟上手Highcharts简易甘特图
根据业务需求,找到了这个很少使用的图形,话不多说,看看该如何使用。首先要引入支持文件:可根据链接下载。 exporting.js:https://img.hcharts.cn/highcharts/modules/exporting.js xrange.js:https://img.hcharts.cn/highcharts/modules/xrange.js
王小婷
2018/08/22
1.7K0
三分钟上手Highcharts简易甘特图
highcharts 极地图的应用
引入 highcharts import HighCharts from "highcharts";
tianyawhl
2020/10/23
1.9K0
Highcharts-6-柱状图汇总
本文重点介绍的是可视化库Highcharts的相关基础知识,以及如何利用Highcharts来绘制不同场景和需求下的精美柱状图,主要内容包含:
皮大大
2021/03/01
3.7K0
Highcharts-6-柱状图汇总
django Highcharts制作图表--显示CPU使用率
Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表
py3study
2018/08/03
2.2K0
Highcharts-7-下钻图制作
下钻表示的是通过层级的方式来展示数据,比如我们想查看国内人口数的占比情况,我们可以先看各个省份的情况,接着我们想看具体某个省中各个地级市的占比,这就是通过下钻方式实现。
皮大大
2021/03/04
1.8K0
Highcharts-7-下钻图制作
微信小程序1
小程序组件化开发框架 https://tencent.github.io/wepy/
达达前端
2019/07/03
2.5K0
微信小程序1
hightchart导出图片
通常在使用highchart导出图片pdf等文件时,我们一般直接引入exporting.js即可
Jerremy
2022/05/09
7160
Highcharts快速入门及绘制柱状图
本文重点介绍的是可视化库Highcharts的相关基础知识,以及如何利用Highcharts来绘制不同场景和需求下的精美柱状图,主要内容包含:
皮大大
2021/02/21
3.8K0
Highcharts快速入门及绘制柱状图
Highcharts导出图片
Highcharts是在做项目涉及到统计图的时候大家的首选,同时也会用到highcharts的export功能,将统计图导出为图片,刚好,最近也遇到了这样的事情,总结出来,以备后用。
牛老师讲GIS
2018/10/23
3.1K0
Highcharts导出图片
新手学HighCharts(一)----基本使用
最近做的项目需要用到数据分析,图表显示,之前做项目的时候用到过highcharts,不过也只是简单的会用而已,然后再网上查了查highcharts的优点:
令仔很忙
2018/09/14
2.6K0
新手学HighCharts(一)----基本使用
ASP.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图
  今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看。
追逐时光者
2022/02/15
2.1K0
ASP.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图
Highcharts-5-属性倾斜、区间变化、多轴柱状图
Highcharts-5-柱状图3 本文中介绍的是3种柱状图相关设置: x轴属性倾斜设置 区间变化柱状图(温度为例) 多轴图形 highcharts保存文件 H.save_file('highchar
皮大大
2021/03/01
2.6K0
Highcharts-5-属性倾斜、区间变化、多轴柱状图
【原创】说好的暴雨呢,搁哪呢?还能不能 雨~露~均~沾?
不是说下大雨吗?玩儿呐?搁哪呢?大雨搁哪呢?下丢啦?哗啦到海里去啦?让五娃给吞啦?南方整的那老大,看不起副中心咋的?还能不能 雨~露~均~沾~?你说我小船儿都买好了,搁哪划,搁哪划!!给我一个完美的解释! 北京气象局通知: 原约定于昨天和今早来的暴雨,因办进京证,耽误了点儿时间,或许今天夜间赶到。这场雨如果下大了肯定不小,如果下小了也肯定不会大,请市民再耐心等待!具体情况等下完后气象台会报给市民。气象台温馨提醒:今天如果不下雨,明天不下雨的话,这两天就没有雨了,就看后天的了。 气象台郑重劝告
码神联盟
2018/04/02
3K0
【原创】说好的暴雨呢,搁哪呢?还能不能 雨~露~均~沾?
vue h5 highcharts可滑动折线面积图
使用示例 代码github地址:https://github.com/Miofly/mio <template> <view class="bg-black" style="width: 100%"> <scroll-view scroll-x> <chart :xData="xDataOne" :yData="yDataOne" backgroundColor="red"></chart> </scroll-view> <scroll-view scroll-x>
用户10106350
2022/10/28
3K0
Highcharts-2-配置项
参考信息来自官网,仅供学习使用:https://api.highcharts.com.cn/highcharts
皮大大
2021/03/01
2.2K0
Highcharts-2-配置项
vue组件另一种传值
如果有2个动态组件,一个是视图一个是参数配置,修改参数配置视图更新,这种情况可以使用父组件触发子组件事件,把对象数据传过去
tianyawhl
2021/05/27
4600
想成为可视化高手?这篇合集就够了 | Vue
在生活中"可视化"对我们来说其实并不陌生,网站上各大图表频频而出,给我们的视觉也带来很直观的感受。下面我们就"可视化"而言,讨论一下,echarts和highcharts在vue里怎么灵活使用,如何解决出现的问题和难点。
小丑同学
2020/09/21
1.6K0
想成为可视化高手?这篇合集就够了 | Vue
highcharts移动端使用-支持vue-支持横向滚动-代码封装
代码已上传至github github代码地址:https://github.com/Miofly/mio.git <template> <view> <highcharts :options="chartOptions"></highcharts> </view> </template> bar类型 <script> // #ifdef H5 import {Chart} from 'highcharts-vue' export default {
用户10106350
2022/10/28
3.2K0
相关推荐
【HighCharts系列教程】七、导出属性——exporting
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验