Highcharts 支持将图片下载成各种格式

Highcharts官网:https://www.hcharts.cn/download

<div id="container" style="min-width:400px;height:400px"></div>
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
    $(function () {
        Highcharts.setOptions({
            credits:{
                enabled:false
            }
        });
        $('#container').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: '月会员注册展示'
            },
            subtitle: {
                text: '单位(位)'
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                title: {
                    text: ''
                }

            },

            plotOptions: {

                line: {

                    dataLabels: {

                        enabled: true          // 开启数据标签

                    },

                    enableMouseTracking: false // 关闭鼠标跟踪,对应的提示框、点击事件会失效

                }

            },

            series: [
                {
                    name: '东京',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25,26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: '伦敦',

                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }
            ]
        });

    });
</script>

效果图:

Highcharts 前端图表插件的更多相关文章

  1. Web前端图表绘制JQuery插件jqplot

    在此之前使用了Chart.js.Highcharts,首先了解一下这两款插件的优势与不足,然后再来了解jqplot. 1.Chart Chart中文官网:http://chartjs.cn/ 1.1优 ...

  2. 图表插件Highcharts的动态化赋值,实现图表数据的动态化设置显示

    在很早之前就介绍过图表插件Highcharts的使用了,在2014年的随笔<基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts>,这里基本上都介绍 ...

  3. HighCharts 图表插件 自定义绑定 时间轴数据

    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...

  4. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  5. 利用MVC Chart 打造后台图表、前端图表

    应用场景是这个样子的:要做导出数据到PDF的功能,涉及到文本.表格.图表等内容.在做图表功能时,发现之前用Highcharts做的图表根本就不能集成到PDF中.这里需要一个能在程序后台就生成图表的功能 ...

  6. JavaWeb图表插件的小研究

    背景 近期的一个项目中,对数据的统计分析有非常大的要求,这就要求有一款非常强大的报表.图表插件.因此,组长给分了任务.让我们各自去研究不同的图表插件.用了一两天的时间,对java这块的图表插件做了一个 ...

  7. WEB 前端开发插件整理

    下拉框插件 1.select http://select2.github.io/ 2.双 select http://loudev.com 3.selectbox http://aui.github. ...

  8. 数据图表插件echarts(二)

    前言 上一篇文章简单介绍了一下百度公司前端部门写的一个js插件echarts,这是一款很强大的图表插件,里面的地图控件也是很强大的,支持离线的使用,并且数据也是离线的,使用很方便.下面我就简单介绍一下 ...

  9. 实时更新数据的jQuery图表插件DEMO演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. VC++基于CXImage库实现缩略图

    一般的图像处理软件都对读入程序的图像文件建一个缩略图的列表,像ACDSee那样.笔者最近在做一个图像处理的项目,处理的原始数据就是图像文件.从项目一开始就想做一个缩略图,但一直苦于技术水平有限,且时间 ...

  2. JavaScript中Math常用方法

    title: JavaScript中Math常用方法 toc: false date: 2018-10-13 12:19:31 Math.E --2.718281828459045,算数常量e Mat ...

  3. Combobox下拉框两级联动

    下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...

  4. C#小代码

    1.创建随机ID: Id = Guid.NewGuid().ToString("N"); 2.创建随机时间: CreationTime = DateTime.Now: int st ...

  5. 常用css框架 Sass/Less

    Bootstrap less/sass Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量.嵌 ...

  6. Incomplete types-不完全类型

    另外:前向声明中引入的类型为不完全类型(incomplete type),不完全类型只能以有限方式使用,只能用于定义指向该对象的指针和引用,只能用于声明使用该类型作为形参或返回类型的函数. Incom ...

  7. 3ds Max实例教程:制作雪的材质

    导言: 本教程为大家讲解使用3ds MAX制作真实的雪材质制作过程,非常简单的教程,但个人觉得讲解的非常好,希望这套比较老的教程能给你带来帮助. 下面教程开始 雪的材质看似简单,其实它的制做并不是想像 ...

  8. nf_conntrack: table full, dropping packet. 问题

    查出目前 ip_conntrack 记录最多的前十名 IP: # cat /proc/net/nf_conntrack|awk '{print $8}'|cut -d'=' -f 2|sort |un ...

  9. 企业微信H5支付返回不到自己指定的结果页面

    项目:vue做的H5项目,嵌入到企业微信里 发现的问题:支付完成后的跳转页面 跳转不到自己指定的页面 问题在于:调支付接口时,redirectUrl: document.location.protoc ...

  10. 链表<新>

    class Node: ''' 节点类 链表节点结构 data next data: 节点保存的数据 _next: 保存下一个节点对象 ''' def __init__(self, data, pne ...