一、创建条形图

　　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>

  1.    　　 <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  2.    　　 <script>
  3.      　　　$(function () {
  4.         　　　　$('#container').highcharts({
  5.             　　　　chart: {
  6.                 　　　　type: 'column'
  7.             　　},
  8.             　　title: {
  9.                 　　text: 'My first Highcharts chart'
  10.             　　},
  11.             　　xAxis: {
  12.             　　    categories: ['苹果', '香蕉', '橙子']   //指定x轴分组
  13.             　　},
  14.             　　yAxis: {
  15.                 　　title: {
  16.                     　　text: 'something'
  17.                 　　}
  18.             　　},
  19.              　　series: [{                                //指定数据列
  20.                 　　name: '小明',                          //数据列名
  21.                 　　data: [1, 0, 4]                        //数据
  22.             　　}, {
  23.                 　　name: '小红',
  24.                 　　data: [5, 7, 3]
  25.             　　}]
  26.         　　});
  27.     　　});
  28.    　　</script>
  29. 　　</head>
  30. 　　<body>
  31.    　　<div id="container" style="min-width:800px;height:400px;"></div>
  32. 　　</body>
  33. 　</html>
    运行后的效果：
  1. 二、如何学习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. MVVM大比拼之knockout.js源码精析

    简介 本文主要对源码和内部机制做较深如的分析,基础部分请参阅官网文档. knockout.js (以下简称 ko )是最早将 MVVM 引入到前端的重要功臣之一.目前版本已更新到 3 .相比同类主要有 ...

  2. ABP(现代ASP.NET样板开发框架)系列之7、ABP Session管理

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之7.ABP Session管理 ABP是“ASP.NET Boilerplate Project (ASP.NET ...

  3. MailKit系列之---查询SearchQuery

    对于邮件的唯一Id查询,由于MailKit提供了大量的方法,无法完全讲解完全,所以这里只选择几个来介绍. MailKit通过方法folder.Search来查询邮件的唯一Id,参数是一个SearchQ ...

  4. libuv源码分析前言

    Libevent,libev,libuv三者的区别所在? libevent提供了全套解决方案(事件库,非阻塞IO库,http库,DNS客户端),然而libevent使用全局变量,导致非线程安全.它的w ...

  5. Android-启动另一个app

    直接上代码: // 通过包名获取要跳转的app,创建intent对象 Intent intent = getPackageManager().getLaunchIntentForPackage(&qu ...

  6. Redis数据结构详解之Zset（五）

    序言 Zset跟Set之间可以有并集运算,因为他们存储的数据字符串集合,不能有一样的成员出现在一个zset中,但是为什么有了set还要有zset呢?zset叫做有序集合,而set是无序的,zset怎么 ...

  7. php json_encode数据格式化

    在用ajax与后台交互数据的时候,后台传回来的数据格式不正确,后参考@傲雪星枫的博客在PHP文件添加了一段代码 :echo json_encode($arr); 成功解决.

  8. 作为一个程序猿，是不是经常会用到.chm文档，但是我们可能会遇到这样那样的问题，比如.chm文档打不开

    .chm文档不能正常打开,一般有两种情形下会造成文档打不开, 1.系统语言栏的语言和文档的语言类别不一同,也就是说比如你的文档是中文版的,但是系统设置的语言是其他国家的.不过一般这种情况很少出现 ,谁 ...

  9. ASP.NET Core 中文文档 第二章 指南（5） 在 Nano Server 上运行ASP.NET Core

    原文 ASP.NET Core on Nano Server 作者 Sourabh Shirhatti 翻译 娄宇(Lyrics) 校对 刘怡(AlexLEWIS).许登洋(Seay).谢炀(kile ...

  10. CSS知识总结（四）

    CSS常用样式 2.元素样式 1)宽度 width:auto|length 单位:设置以像素计的宽度值(px) 设置以百分比计的宽度值(%) 例:p {width:200px;} div {width ...