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. ubuntu 搜狗输入法的安装

    本文主要解决的是,通过安装搜狗网站提供的*.deb安装文件,使用ctrl+shift/space无法切换搜狗输入法的问题. 搜狗输入法 for linux:搜狗输入法 for linux,这还不算完: ...

  2. vue 组件之间的传值

    父向子传值父组件 <v-footer :projectdat="dat"></v-footer> export default { data() { ret ...

  3. ios上有时候提交按钮点击两次才可以取消输入框软键盘

    ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...

  4. Devexpress控件使用二:barManager

    1.拖放控件 2.两种按钮显示形式 1)上面是大图标,下面是说明 a.Add → Largebutton 注:勾选 Show DesignTime enancements 才会出现Add b.添加图片 ...

  5. Net Core链接数据库

    原文 在Windows下,相信大家分分钟都可以搞定.而初次接触.net core + mysql可能需要注意些细节.首先打开vs2017新建一个asp.net core项目(选Web应用程序), 然后 ...

  6. LCD段码驱动

    假如要第3个数码关显示“8.”,则3A-3D均得为1,即Seg3和Seg4均得为1.假设模具Seg和驱动芯片Seg对应,则只需往HT1621的地址Seg3和Seg4分半发送0xF. 注意:HT1621 ...

  7. javascript----三目运算符

    flag ? $('body').addClass('hover') : $('body').removeClass('hover') ; (expr1) ? (expr2) : (expr3): 与 ...

  8. MVC 设计模式

    MVC 设计模式: 最早由 Trygve Teenskaug 在 1978 年提出,上世纪 80 年代是程序语言 Smalltalk 的一种内部架构.后来 MVC 被其他领域借鉴,成为了软件工程中的一 ...

  9. [ZJOI2006]物流运输 最短路 动态规划

    Code: 定义状态 $dp[i]$ 为前 $i$ 天的最小代价. 状态转移为:$dp[i]=min(dp[i],dp[j]+spfa(j+1,i)$ 这里 $spfa(i,j)$ 是指 $(i,j) ...

  10. “.”开头,以"}"结尾,中间是任意字符的正则

    "."开头,以"}"结尾,中间是任意字符的正则 /^\..+\{$/