<html>

<head>

    <meta charset="UTF-8" />

    <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="http://code.highcharts.com/highcharts.js"></script>

</head>

<body>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script language="JavaScript">

    $(document).ready(function() {

        var chart = {

            type: 'bar'

        };

        var title = {

            text: '各州不同时间人口条形图'

        };

        //子标题

        var subtitle = {

            text: '小闫同学制作'

        };

        // xAxis，yAxis配置设置坐标轴

        var xAxis = {

            categories: ['非洲', '美洲', '亚洲', '欧洲', '大洋洲'],

            title: {

                text: null

            }

        };

        // series.xAxis，series.yAxis：当使用多坐标轴时，指定某个数列对应哪个坐标轴。

        var yAxis = {

            min: 0,

            title: {

                text: 'Population (millions)',

                align: 'high'

            },

            labels: {

                overflow: 'justify'

            }

        };

        var tooltip = {

            valueSuffix: ' millions'

        };

        var plotOptions = {

            bar: {

                dataLabels: {

                    enabled: true

                }

            }

        };

        var legend = {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'top',

            x: -40,

            y: 100,

            floating: true,

            borderWidth: 1,

            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),

            shadow: true

        };

        var credits = {

            enabled: false

        };

        var series= [{

            name: 'Year 1800',

            data: [107, 31, 635, 203, 2]

        }, {

            name: 'Year 1900',

            data: [133, 156, 947, 408, 6]

        }, {

            name: 'Year 2008',

            data: [973, 914, 4054, 732, 34]

        }

        ];

        var json = {};

        json.chart = chart;

        json.title = title;

        json.subtitle = subtitle;

        json.tooltip = tooltip;

        json.xAxis = xAxis;

        json.yAxis = yAxis;

        json.series = series;

        json.plotOptions = plotOptions;

        json.legend = legend;

        json.credits = credits;

        $('#container').highcharts(json);

    });

</script>

</body>

</html>

Higncharts 制作的更多相关文章

  1. 【AR实验室】ARToolKit之制作自己的Marker/NFT

    0x00 - 前言 看过example后,就会想自己动动手,这里改改那里修修.我们先试着添加自己喜欢的marker/nft进行识别. 比如我做了一个法拉利的marker: 还有网上找了一个法拉利log ...

  2. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  3. 制作类似ThinkPHP框架中的PATHINFO模式功能

    一.PATHINFO功能简述 搞PHP的都知道ThinkPHP是一个免费开源的轻量级PHP框架,虽说轻量但它的功能却很强大.这也是我接触学习的第一个框架.TP框架中的URL默认模式即是PathInfo ...

  4. 使用Visual Studio SDK制作GLSL词法着色插件

    使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...

  5. 利用CSS中的:after、: before制作的边三角提示框

    小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...

  6. Photoshop将普通照片快速制作二次元漫画风格效果

    今天为大家分享Photoshop将普通照片快速制作二次元漫画风格效果,教程很不错,对于喜欢漫画的朋友可以参考本文,希望能对大家有所帮助! 一提到日本动画电影,大家第一印象肯定是宫崎骏,但是日本除了宫崎 ...

  7. 前端制作动画的几种方式（css3，js）

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  8. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  9. 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack

    因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...

随机推荐

  1. 「JOISC 2016 Day 1」棋盘游戏

    「JOISC 2016 Day 1」棋盘游戏 先判无解:第1,3行有连续的空格或四个角有空格. 然后可以发现有解的情况第1,3行可以在任意时间摆放. 对于某一列,若第2行放有棋子,那么显然可以把棋盘分 ...

  2. 什么是Native方法 （转）

    一个Native Method就是一个java调用非java代码的接口(NDK也跟这有关吗?(疑问)一个Native Method由非java语言实现 在定义一个native method时,并不提供 ...

  3. C语言中数组长度不能用变量定义吗？

    C语言里,所有变量空间都是在程序运行之初向系统申请的,包括指针,除了一些动态申请方式如malloc函数.没有申请的空间系统是不允许读写的.那么如果一个数组大小是变量定义,则在程序运行前不能确定数组大小 ...

  4. TCP连接的状态转换图深度剖析

    转载请注明来源:https://www.cnblogs.com/hookjc/ 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接,如图1所示. (1)第一次握手:建立连接时 ...

  5. 随机数类 Random

    import java.util.Random; /* 随机数类 Random 需求: 编写一个函数随机产生四位的验证码. */ public class Demo5 { public static ...

  6. 对已有的docker容器增加新的端口映射

    一般在运行容器时,我们都会通过参数 -p(使用大写的-P参数则会随机选择宿主机的一个端口进行映射)来指定宿主机和容器端口的映射,例如 docker run -it -d --name [contain ...

  7. ssh一段时间无操作后自动断开连接（假死）问题

    平时使用ssh远程服务器的时候(注:远程虚拟机一般不会有这个问题),一段时间没有操作,ssh连接就会处于假死状态,以至于需要重新进行ssh连接,不管你用的什么远程工具都会出现这个问题,那么通过心跳检测 ...

  8. 员工管理系统+字符编码+Python代码文件操作

    员工管理系统+字符编码+Python代码文件操作 1.员工管理系统 1.1  debug 代码调试 1.先使用鼠标左键在需要调试的代码左边点击一下(会出现一个红点)2.之后右键点击debug运行代码 ...

  9. Solution -「ExaWizards 2019 C」Snuke and Wizards

    \(\mathcal{Description}\)   Link.   给定一个长度为 \(n\) 的字符串 \(s\),每个字符上初始有一张卡片.\(q\) 次操作,每次指定 \(s\) 中字符为 ...

  10. 【第二十四期】golang 一年经验开发 富途

    他们家是按题目来的,从一个小题目慢慢延伸着问,由浅入深,问到你换题为止. 第一题 给了一个网址,解释一下浏览器填入这个网址后发生了什么? TCP为什么要三次握手四次挥手? 502是什么? 如果出现50 ...