一、创建条形图

　　1、创建div容器

　　<div id="container" style="min-width:800px;height:400px"></div>

　　2、编写图表配置代码

　　相关示例：

　　<html>

　　　　<head>

　　　　 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

   　　 <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

   　　 <script>

     　　　$(function () {

        　　　　$('#container').highcharts({

            　　　　chart: {

                　　　　type: 'column'

            　　},

            　　title: {

                　　text: 'My first Highcharts chart'

            　　},

            　　xAxis: {

            　　    categories: ['苹果', '香蕉', '橙子']   //指定x轴分组

            　　},

            　　yAxis: {

                　　title: {

                    　　text: 'something'

                　　}

            　　},

             　　series: [{                                //指定数据列

                　　name: '小明',                          //数据列名

                　　data: [1, 0, 4]                        //数据

            　　}, {

                　　name: '小红',

                　　data: [5, 7, 3]

            　　}]

        　　});

    　　});

   　　</script>

　　</head>

　　<body>

   　　<div id="container" style="min-width:800px;height:400px;"></div>

　　</body>

　</html>
运行后的效果：
二、如何学习Highcharts

　　1、准备知识

    • 熟悉Html、jQuery、Json、Ajax等前端知识
    • 至少会一种后台语言，例如 Php、Java、Asp.net、Nodejs 等（Highcharts只是做数据展现，具体的数据来源必须通过动态语言）

　　2、几点建议

    • 学习任何东西都是从实例模仿、自己实践中掌握的
    • 多看API，Highcharts 提供的API文档非常完善，几乎所有的问题都可以在 API 找到解决办法

Highcharts入门小示例的更多相关文章

  1. Web应用开发（Servlet+html+Mysql）入门小示例

    在安装好eclipse并配置完安装环境.安装好tomcat的前提下: 1.新建Dynamic Web Project,选择好运行的tomcat服务器版本等:2.在WebContent下:   新建fo ...

  2. ReactNative新手学习之路06滚动更新ListView数据的小示例

    本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...

  3. 02SpringMvc_springmvc快速入门小案例（XML版本）

    这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:

  4. Spring IoC、DI入门小程序

    Alt+/智能提示xml配置文件节点及属性:在接口上使用Ctrl+T可以提示其实现类 一.IoC控制反转(将创建对象的权利交给spring)入门小程序 1.引入jar包 2.工程基本结构 3.新建Us ...

  5. Highcharts入门+Highcharts基础教程，【非常值得学习的资料】

    http://www.hcharts.cn/docs/index.php?doc=index Highcharts入门章节目录 Highcharts简介 Highcharts下载与使用 Highcha ...

  6. highCharts入门-强大的图表库插件

    简介         Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业 ...

  7. Selenium WebDriver + Grid2 + RSpec之旅（三） ----入门小例子

    Selenium WebDriver + Grid2 + RSpec之旅(三) ----入门小例子 第一个例子都是比较简单的博客园登录界面,就像学习编程语言时候都是从Hello,World!开始. 1 ...

  8. MVC客户端验证的小示例

    MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings>  <add key="ClientValidat ...

  9. spring boot入门小案例

    spring boot 入门小案例搭建 (1) 在Eclipse中新建一个maven project项目,目录结构如下所示: cn.com.rxyb中存放spring boot的启动类,applica ...

随机推荐

  1. 在 Linux 中安装 Oracle JDK 8 以及 JVM 的类加载机制

    参考资料 该文中的内容来源于 Oracle 的官方文档 Java SE Tools Reference .Oracle 在 Java 方面的文档是非常完善的.对 Java 8 感兴趣的朋友,可以直接找 ...

  2. div中设置滚动条的问题

    <div srtle="width:100px;height:50px;"></div> 这样的一个div,当文本超出的时候我们就会设: overflow: ...

  3. 【转】c#、wpf 字符串，color，brush之间的转换

    转自:http://www.cnblogs.com/wj-love/archive/2012/09/14/2685281.html 1,将#3C3C3C 赋给background this.selec ...

  4. 一起学微软Power BI系列-使用技巧(2)连接Excel数据源错误解决方法

    上一篇文章一起学微软Power BI系列-使用技巧(1)连接Oracle与Mysql数据库中,我们介绍了Power BI Desktop中连接Oracle和Mysql的方法,其实说到底还是驱动的问题, ...

  5. ASP.NET Web API 配置 JSONP

    之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...

  6. ORACLE 11gR2 DG(Physical Standby)日常维护01

    环境:RHEL 6.4 + Oracle 11.2.0.4 一.主备手工切换 1.1 主库,切换成备库并启动到mount 1.2 备库,切换成主库并启动到open 1.3 新的备库启动日志应用 二.重 ...

  7. 用Github pages搭建自己制作的网页，方法最简单，适用于新手

    本文固定链接http://blog.csdn.net/pspgbhu/article/details/51205264 本人自学前端一个多月,写个几个网页想要用来应聘,网上搜各种搭建网站的方法,发现不 ...

  8. 针对每种Windows Server 操作Excel、Word等Office组件遇到“ComException"、”80070005“等COM错误的解决方案大汇总

    以下所有Excel错误的解决方案,同样适用于Word.PowerPoint等Office产品. 以下解决方案中,如果出现"安装Excel组件",是适用于遇到Excel错误的.如果是 ...

  9. 使用PD（PowerDesigner）图如何快速生成创建数据库表的SQL脚本

    打开PD软件: 1.新建概念模型(conceptual Data Model) File-->New Model-->Conceptual Data Mode 或者点击工作区,右键--&g ...

  10. C#开发微信门户及应用(4)--关注用户列表及详细信息管理

    在上个月的对C#开发微信门户及应用做了介绍,写过了几篇的随笔进行分享,由于时间关系,间隔了一段时间没有继续写这个系列的博客了,并不是对这个方面停止了研究,而是继续深入探索这方面的技术,为了更好的应用起 ...