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. [JZOJ 5437] [NOIP2017提高A组集训10.31] Sequence 解题报告 (KMP)

    题目链接: http://172.16.0.132/senior/#main/show/5437 题目: 题解: 发现满足上述性质并且仅当A序列的子序列的差分序列与B序列的差分序列相同 于是我们把A变 ...

  2. Charles抓取微信小程序数据 以及 其它应用网站数据

    为了抓取小程序数据所以使用Charles来抓取,下面介绍下使用方法(mac环境下使用).使用Charles可以非常方便的抓取Http/Https请求.官方dmg下载地址:点击此处下载 Charles抓 ...

  3. Creating a New Master Page in SharePoint 2013

    Creating a New Master Page in SharePoint 2013 This article explains how to create a Master Page in S ...

  4. Android TextView加下划线的几种方式

    如果是在资源文件里: <resources> <</u></string> <string name="app_name">M ...

  5. 51nod 2020 排序相减(暴力解法)

    题目: 代码: #include <bits\stdc++.h> using namespace std; int trim(int x){ ]; ;i < ; i++){ a[i] ...

  6. php 生成 guid

    function guid( $opt = true ){ // Set to true/false as your default way to do this. if( function_exis ...

  7. vue非空校验

    效果图 实现代码 //页面html <div> <ul class="listinfo"> <li> <span class=" ...

  8. [React] React.PureComponent

    React.PureComponent is similar to React.Component. The difference between them is that React.Compone ...

  9. CCEditBox/CCEditBoxImplAndroid

    #ifndef __CCEDITBOXIMPLANDROID_H__ #define __CCEDITBOXIMPLANDROID_H__ #include "cocos2d.h" ...

  10. 【翻译自mos文章】开启dblink的 oracle net trace/tracing --对dblink进行跟踪的方法

    开启dblink的 oracle net trace/tracing --对dblink进行跟踪的方法. 參考原文: DBLINK: How to Enable Oracle Net Tracing ...