首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用Highcharts导出整个页面或html内容而不仅仅是图表?

可以使用Highcharts的exportFunction功能来导出整个页面或HTML内容。exportFunction允许您将需要导出的内容作为一个函数进行编写,然后将其传递给Highcharts的exportFunction。

以下是一个示例代码:

代码语言:javascript
复制
// 引入Highcharts库
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

// 创建一个图表
Highcharts.chart('chart', {
    // 示例数据
    chart: {
        type: 'line'
    },
    title: {
        text: '使用Highcharts导出整个页面或html内容'
    },
    xAxis: {
        categories: ['Category A', 'Category B', 'Category C', 'Category D'],
        tickmarkPlacement: 'on',
        lineWidth: 0
    },
    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0
    },
    tooltip: {
        shared: true,
        pointFormat: '<span>{series.name}: <b>{point.y:.1f}</b><br/>'
    },
    legend: {
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        x: -40,
        y: 80
    },
    series: [{
        name: 'Series 1',
        data: [43, 52, 67, 34],
        pointPlacement: 'on'
    },{
        name: 'Series 2',
        data: [34, 63, 56, 35],
        pointPlacement: 'on'
    }]
});

// 导出整个页面为PDF
Highcharts.chart('container', {
    chart: {
        polar: true,
        type: 'line'
    },
    title: {
        text: 'Chart with Polar Coordinates'
    },
    pane: {
        size: '80%'
    },
    xAxis: {
        categories: ['Category A', 'Category B', 'Category C', 'Category D'],
        tickmarkPlacement: 'on',
        lineWidth: 0,
        gridLineInterpolation: 'polygon',
        offset: 20
    },
    yAxis: {
        lineWidth: 0,
        gridLineInterpolation: 'polygon',
        min: 0,
        max: 100
    },
    tooltip: {
        shared: true,
        pointFormat: '<span>{series.name}: <b>{point.y:.1f}</b><br/>'
    },
    legend: {
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        x: -40,
        y: 80
    },
    series: [{
        name: 'Series 1',
        data: [43, 52, 67, 34],
        pointPlacement: 'on'
    },{
        name: 'Series 2',
        data: [34, 63, 56, 35],
        pointPlacement: 'on'
    }]
}, function(chart) {
    // 处理数据
    chart.exportChart({
        type: 'image/svg+xml',
        filename: 'mychart',
        width: 800,
        height: 600,
        chartOptions: {
            polar: true,
            rangeSelector: {
                enabled: true
            },
            title: {
                text: 'Chart with Polar Coordinates'
            }
        }
    });
});

在上面的代码中,我们首先创建了一个带有两个数据系列的图表,然后在exportChart方法中使用type: 'image/svg+xml'指定导出类型为SVG,并使用filenamewidthheight参数指定导出文件的名称、宽度和高度。最后,在chartOptions中设置导出选项,包括启用范围选择器和设置图表标题。

使用exportFunction方法,您可以将整个页面导出为SVG格式的文件,包括图表、标题、坐标轴和图例等元素。以下是一个示例代码:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

微信小程序1

WePY后的开发目录) | ├── components WePY组件目录(组件不属于完整页面,仅供完整页面其他组件引用) | | ├── com_a.wpy 可复用的...image.png lang:语言文字对象,所有Highcharts文字相关的设置 chart:图表区、图形区和通用图表配置选项 colors:图表数据列颜色配置,是一个颜色数组 credits:...版权信息,Highcharts图表的右下方放置的版权信息及链 drilldown:钻取,向下钻取数据,深入到其中的具体数据 exporting:导出模块,导出功能配置,导出即将图表下载为图片打印图表...导出模块按钮和菜单配置选项组 noData:没有数据,没有数据时显示的内容 pane:分块,针对仪表图和雷达图专用的配置,主要设置弧度及背景色 plotOptions:针对不同类型图表的配置 series...:数据列,图表上一个多个数据系列,比如图表中的一条曲线,一个柱形 title:标题,包括即标题和副标题,其中副标题为非必须的 tooltip:数据点提示框,当鼠标滑过某点时,以框的形式提示改点的数据

2.1K30

实现node端渲染图表的简单方案

highcharts等等,对于做数据可视化方向的同学可能自己都做过此类chart的研发,无论从零构建还是使用已有的轮子,基本上都是基于js在做,因为大部分数据可视化产品都是to B的产品。...但是有些场景下,我们还是会需要服务端的渲染结果的,比如,需要给用户发送订阅邮件,邮件中包含了图表类展示,我们知道邮件内容可以支持html,但是只能支持最基本的html图表内容只能以图片资源的方式嵌入进去...,由于图表是动态内容,所以需要我们在发送邮件之前根据用户特性内容去动态生成,这种情况下就会有对应的需要了;另外如果你的产品需要和类似slack这样的app 集成,做dashboard展示,也同样需要在服务端生成图表...借用浏览器渲染 在highcharts的官网可以看到不同平台的服务端导出实现,highcharts渲染后支持导出图片(svg、png、jpeg)以及pdf;默认情况下,点击导出的时候客户端会向highcharts...如果把上述两个变化点能封装起来,其实我们是理论上可以兼容所有charts的node端渲染的,只要提供了第三方库脚本和自定义的初始化脚本,不仅仅是chart,其它的任何内容都可以做到,只是需要写得初始化脚本是否复杂而已

2.9K20

強大的jQuery Chart组件-Highcharts

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型...:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图; 跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js...导出的图片格式 ? 可以做到页面展示和导出的图片一致了。...参考文章: highcharts javascript区域打印代码 Highcharts用Asp.Net导出jpg,png图片 http://www.highcharts.com/ref/#exporting...強大的jQuery圖表套件-Highcharts http://www.helloweba.com/tag.html?

2.1K50

实战干货:从零快速搭建自己的爬虫系统

目前, 大家使用爬虫的目的除搜索引擎属于无差别爬取外,其他多用于垂直领域特定网站内容的爬取,本文以特定网站内容爬取作为切入点,当然,也可以应用于垂直领域。...(5)数据展示 这是额外的说明,爬取到数据后,进行数据统计分析之后,是要用来辅助决策的,要展示给老板产品看的,如何直观地将成果展示出来呢?...github 上有 Highcharts 的 python 封装,但使用起来比较麻烦,学习还需要耗费不少时间,这里封装了几个常用图表形式的简易 python 接口,如果需要其他类型的图,按照 highcharts...但是该工具限制无法直接发送图片,通过将邮件做成 html 格式,将图片转为 base64 内嵌进 html 即可。 那么如何将 **highcharts 生成的报表导出图片**呢?...新版本的 highcharts 有提供接口,但并不是很好用,因为你的报表也不仅仅是一个图,多个图还要手工拼装,根据邮件客户端的不同,有可能展示的样式也会有变化。

11.3K41

HighCharts系列教程】七、导出属性——exporting

一、exporting属性说明 默认情况下,HighCharts支持将图表导出为图片打印功能的。也就是在图表的右上角有两个按钮。打击即可进行相应的操作。...一般情况下,我们基本用不上该功能(不引入exporting.js即可去掉该功能),即使是使用该功能,也不用配置,默认的配置就可以。...可配置相应按钮中具体的属性来改变按钮的大小、样式等 enabled 是否使用该功能,当我false时,则图表没有导出及打印功能 true filename 导出图片文件的文件名,不包含后缀 chart...exporting: { //enabled:true,默认为可用,当设置为false时,图表的打印及导出功能失效 buttons:{ //配置按钮选项 printButton:{ //配置打印按钮...> 四、在线演示 演示地址: http://www.52wulian.org/test/HighCharts/highcharts_2_5_exporting.html 五、资源下载 下载地址:

1.2K10

Highcharts使用指南

摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。...通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表。...它主要包括两个部分:Highcharts和Highstock。 Highcharts可以为您的网站Web应用程序提供直观,互动式的图表。...因此,在使用Highcharts之前,需要在页面头部引用这些脚本文件。如果你使用jQuery作为基本框架,那么你需要在页面头部同时引用jQuery和Hightcharts两个文件。...当您初始化使用Highcharts.Chart的图表,options对象将作为第一个参数传递。 如果你想在同一个页面使用一组参数,可以定义一个选项对象(options object)来设置选项。

3.1K50

Highcharts-2-配置项

参考信息来自官网,仅供学习使用:https://api.highcharts.com.cn/highcharts Highcharts基本组成 一个图标通常是由图表区、标题、绘图区、坐标轴、图例/数据列等不同部分组成的...在图表的右下方放置的版权信息及链 drilldown:钻取,向下钻取数据,深入到其中的具体数据 exporting:导出模块,导出功能配置,导出即将图表下载为图片打印图表 legend:图例,用不同形状...:没有数据,没有数据时显示的内容 pane:分块,针对仪表图和雷达图专用的配置,主要设置弧度及背景色 plotOptions:针对不同类型图表的配置 series:数据列,图表上一个多个数据系列,比如图表中的一条曲线...多个不同的数据列可共用同一个X轴Y轴,当然,还可以有两个X轴Y轴,分别显示在图表的上下左右 配置选项 全局配置 ?...会默认使用 lang.weekdays 中对应的前三个字母。

1.9K20

精选6种制作竞赛动图的方法,收藏!

,其中动图图表尤为强大 有大量的例子供我们选择 还有如下条形竞赛图例子,是不是很惊艳 条形竞赛图也是完全支持的,下图就是制作页面,我们可以上传数据,并自由的设置图表的各项参数 唯一美中不足的就是导出动图需要付费...VIP 才可以使用。...,而且还有一个优势就是可以直接展示在 Web 页面Highcharts 这里我选择的是 Highcharts,这是一个开源的 JS 库,可以绘制众多漂亮的图表,动图也不在话下 Highcharts...系列软件包含 Highcharts JS,Highstock JS,Highmaps JS 共三款软件,均为纯 JavaScript 编写的 HTML5 图表库,是一个非常完善的图表库。...我们可能对于 ECharts 比较熟悉, Highcharts 则是一个可以与之比肩的项目 其绘制的效果如下 动态曲线图:http://mpvideo.qpic.cn/0b78siaamaaawaappb3ajnpfbewda2jaabqa.f10002

1.2K20

【学习】15款经典图表软件推荐 创建最漂亮的图表

FusionCharts支持 PHP, ASP.NET, JSP, ColdFusion, Python, RoR, 简单的HTML页面,甚至是PowerPoint演示。 6....J powered PHP图形脚本可非常简单的嵌入动态生成图形和图表到PHP应用HTML页面中。该图形软件使用简便,可几分钟内制作专业水准的实时图形。...7. jQuery Visualize Plugin jQuery Visualize Plugin 是一个根据HTML表格的内容生成图表的 jQuery 插件。 8....Highcharts Highcharts是纯粹的JavaScript写的图表库,提供简单的方式添加交互图表到站点web应用,支持各种图表类型。 9....Sparklines 这个jQuery插件,可通过HTMLJavaScript,直接生成Sparklines内嵌图表。该插件兼容大多数浏览器。授权协议BSD。

1.9K30

2018年全球最受欢迎的30款数据可视化工具

与RAWGraphs不同的是,您可以通过ChartBlocks一键在社交媒体上分享自己的图表。您还可以将图表导出为可编辑的矢量图形图表嵌入到网站上。...Chart.js最独特的品质就是可以用HTML5 Canvas来绘制响应性很强的图表。Chart.js允许你混合不同的图表类型,然后绘图日期,对数定制规模的数据。...谷歌本身使用相同的图表工具,并提供给开发人员完全免费的三年的向后兼容性保证。通过将简单的JavaScript嵌入到web页面中,您可以从各种图表模板中进行选择,并定制它们以创建您自己的交互式图表。...22) Highcharts ? Highcharts是一个用JavaScript编写的开源图表库,可以轻松地将交互式图表添加到网站应用程序中,可以免费用于个人学习、个人网站和非商业用途。...但是如果想在商业政府网站、内网项目上运行Highcharts,你需要购买许可证和额外支持。 23) FusionCharts ?

4.3K20

推荐 9 款数据可视化工具,设计变得so easy

PowerBI 微软推出的ExcelBI产品,可以与Excel无缝连接,可以在Web端移动端使用,每个人都可以创建个性化的数据看板,使用拖放形式的图形和数据组合,没有编程,丰富的图例,非常适合分析师使用...您可以导出各种格式的图形,如巴布亚新几内亚、JPG、SVG和PDF。Highcharts可以免费用于个人和非商业目的。如果用于商业目的,您需要购买许可证。...它支持最新的浏览器、JSON和XML数据格式,并提供以PNG、JPEG、SVGPDF格式导出图形的功能。...Google Charts Google有自己的HTML5/SVG交互数据可视化库,叫做Google Charts。...它支持多种设备和浏览器,提供从基本的饼图和条形图到更复杂的图表(如气泡图、树形图、时间轴甚至甘特图)的功能。它的主要特点之一是创建动画图形的简单性,动画图形会随着时间变化。

2K30

Highcharts导出图片

概述: Highcharts是在做项目涉及到统计图的时候大家的首选,同时也会用到highcharts的export功能,将统计图导出为图片,刚好,最近也遇到了这样的事情,总结出来,以备后用。...导出方式: highcharts导出图片实现有三种:highcharts服务器导出、局域网服务器导出、本地后台导出。...首先,highcharts服务器导出是默认的导出方式,不需要任何操作,只需在chart中配置export参数即可,但是这种导出方式需要联网; 其次,局域网服务器导出,需要在局域网内配置导出的服务器,可参考...servlet即可,是本文讲解的重点内容。...导出原理: Highcharts图表导出下载)本质上是将SVG代码转换为不同文件格式的过程,用到的工具是batik,所以所谓导出服务器,只不过是调用batik,将SVG代码转换并下载。

2.9K20

【学习】15个最棒的JavaScript图形图表

ZingChart 是一款提供了灵活、快速、可扩展创建图表的产品。苹果、微软、波音、沃尔玛这些公司都通过它使用Ajax、JSON、HTML5创建好看的图表。 回到顶部 Highcharts JS ?...使用Highcharts JS最大的优势是它兼容像IE6这样的旧版本浏览器。标准的浏览器使用SVG渲染,旧版本的IE浏览器则使用VML。 个人免费使用商业用户则需要购买许可证。...Fusioncharts 是最老的图表库之一。使用HTML5/SVG和VML来确保兼容性和可移植性。...跟其他大部分图表库不同,它同时支持JSON和XML格式的数据,并且可以导出下面三种格式的数据:PNG、JPG、PDF。 兼容IE6。个人用户和商业用户都可以免费使用有水印的版本。...uvCharts 是一款声称有100+可定制选项的开源图表库。有12种标准的图表类型。基于D3.js,使用HTML+SVG+CSS渲染。

4.2K40

全球20个最佳大数据可视化工具,高级PPTers的法宝

ChartBlocks是一个易于使用在线工具,它无需编码,便能从电子表格,数据库中构建可视化图表整个过程可以在图表向导的指导下完成。...您的图表将在HTML5的框架下使用强大的JavaScript库D3.js创建图表。你的图表是响应式的,并且可以和任何的屏幕尺寸及设备兼容。...Highcharts是一个JavaScript API与jQuery的集成,全球最大的100家公司中有61家正在使用它。图表使用SVG格式,并使用VML支持旧版浏览器。...它提供了两个专门的图表类型:Highstock和Highmaps,并且还配备了一系列的插件。你可以免费使用它,如果你想建立付费的应用,只须支付少量牌照费用。...此外,你还可以使用Highcharts云服务。 14. Chart.js ? 对于一个小项目的图表,chart.js是一个很好的选择。

5.4K40

Highcharts-6-柱状图汇总

Highcharts快速入门及绘制柱状图 本文重点介绍的是可视化库Highcharts的相关基础知识,以及如何利用Highcharts来绘制不同场景和需求下的精美柱状图,主要内容包含: Highcharts...、Android等) 多设备:支持多种设备,如手持设备、平板等 免费使用:能够供个人免费学习使用 配置简单:Highcharts中的数据全部配置成json格式 动态多维图表Highcharts中生成的图表能够修改...,同时支持多维图表 导出格式多样:能够导出PDF/PNG/JPG/SVG等多种格式 可变焦:选中图表部分放大,能够近距离观察图表 上面仅仅是列出了Highcharts的部分特性,它还有时间轴上的时间精确到毫秒...Highcharts Maps 非常优秀的HTML5地图组件,支持下钻、触摸、手势等操作。 Highmaps 继承了 Highcharts 简单易用的特性。...python-highcharts使用 安装python-highcharts 开头笔者提到过:Highcharts是基于JavaScript编写的图表库。

3.1K10

九大数据可视化利器,你有在使用吗?

可视化信息以易于阅读的视觉化内容正在被越来越多的人所青睐。可视化形式呈现信息的需求也随之增加,因此近年来涌现出了许多数据可视化工具。...使用 SVG 时,无论放大多少倍,图像看起来都不会出现明显的像素点。D3 允许创建各种高级图形,如网状图、树状图、地图气泡图,以及常用图形(如条形图散布图)。...它支持多种设备和浏览器,提供的功能范围从最基本的饼图和条形图到更复杂的图表(如气泡图、树状图、时间轴甚至是甘特图)。其主要特点之一是创建动画图形的简单性,这些动画图形随时间推移变化。...您可以导出各种格式的图形,比如 PNG、JPG、SVG 和 PDF。Highcharts 可免费供个人和非商业目的使用,如用于商业目的,您需要购买许可。您可以在这里看到各种类型的图表示例。 ? 6....它支持最新版本的浏览器、JSON 和 XML 数据格式,并提供以 PNG、JPEG、SVG PDF 等格式导出图形的功能。 ? 7.

3.8K60
领券