一、创建条形图

　　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. css 垂直水平居中总结

    一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...

  2. API Monitor简介（API监控工具）

    API Monitor是一个免费软件,可以让你监视和控制应用程序和服务,取得了API调用. 它是一个强大的工具,看到的应用程序和服务是如何工作的,或跟踪,你在自己的应用程序的问题. 64位支持 API ...

  3. C#委托使用详解（Delegates）

    摘要 委托是C#编程一个非常重要的概念,也是一个难点.本文将系统详细讲解委托. 1. 委托是什么? 其实,我一直思考如何讲解委托,才能把委托说得更透彻.说实话,每个人都委托都有不同的见解,因为看问题的 ...

  4. 不要听吹牛逼什么前端MVVM框架就是好，其实都是一帮没学好分层设计的搞出来的，让你彻底看清前端MVVM的本质

    最近前端圈子里面,发现大家都在热炒概念,什么knockout,angularJs,都被捧成神了,鄙人不才,最近心情也不好,特地写这篇文章来找骂 写代码的码农都知道,Java社区虽然不是一个提出分层思想 ...

  5. How ASP.NET Web API 2.0 Works?[持续更新中…]

    一.概述 RESTful Web API [Web标准篇]RESTful Web API [设计篇] 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用 二.路由 ...

  6. ABP源码分析四十六：ABP ZERO中的Ldap模块

    通过AD作为用户认证的数据源.整个管理用户认证逻辑就在LdapAuthenticationSource类中实现. LdapSettingProvider:定义LDAP的setting和提供Defaut ...

  7. C++ std::deque

    std::deque template < class T, class Alloc = allocator > class deque; Double ended queue deque ...

  8. [Java 缓存] Java Cache之 Guava Cache的简单应用.

    前言 今天第一次使用MarkDown的形式发博客. 准备记录一下自己对Guava Cache的认识及项目中的实际使用经验. 一: 什么是Guava Guava工程包含了若干被Google的 Java项 ...

  9. Android 浏览器 —— 使用 WebView 实现文件下载

    对当前的WebView设置下载监听 mCurrentWebView.setDownloadListener(new DownloadListener() { @Override public void ...

  10. 【分布式】Zookeeper使用--命令行

    一.前言 在学习了Zookeeper相关的理论知识后,下面接着学习对Zookeeper的相关操作. 二.Zookeeper部署 Zookeeper的部署相对来说还是比较简单,读者可以在网上找到相应的教 ...