Highcharts创建一个简单的柱状图
新建一个html文件，将highcharts引入到你的页面后，通过两个步骤我们就可以创建一个简单的图表了。
1、创建div容器
在页面的 body部分创建一个div，并指定div 的 id，高度和宽度，代码如下
<div id="container" style="min-width:800px;height:400px"></div>
2、编写Highcharts代码
编写Highcharts必须的代码，用<script></script>包裹，代码可以放在页面的任意地方，一个最简单的图表实例代码如下
$(function () { $('#container').highcharts({ //图表展示容器，与div的id保持一致
chart: {
type: 'column' //指定图表的类型，默认是折线图（line）spline, area, areaspline, column, bar, pie , scatter
},
title: {
text: 'My first Highcharts chart' //指定图表标题
},
xAxis: {
categories: ['my', 'first', 'chart'] //指定x轴分组
},
yAxis: {
title: {
text: 'something' //指定y轴的标题
}
},
series: [{ //指定数据列
name: 'Jane', //数据列名
data: [, , ] //数据
}, {
name: 'John',
data: [, , ]
}]
});
});
完成上述两个步骤后，保存文件并用浏览器打开，运行结果如下图所示
上述例子完整html代码如下 你可以拷贝保存为html文件运行即可看到效果
<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: ['my', 'first', 'chart']
},
yAxis: {
title: {
text: 'something'
}
},
series: [{
name: 'Jane',
data: [, , ]
}, {
name: 'John',
data: [, , ]
}]
});
});
</script>
</head> <body>
<div id="container" style="min-width:800px;height:400px;"></div>
</body>
</html>
至此，我们已经初步了解和学会了自己编写简单的Highcharts图表了。
Highcharts创建一个简单的柱状图的更多相关文章
- 如何创建一个简单的Visual Studio Code扩展
注:本文提到的代码示例下载地址>How to create a simple extension for VS Code VS Code 是微软推出的一款轻量级的代码编辑器,免费,开源,支持多种 ...
- 《Entity Framework 6 Recipes》翻译系列 (3) -----第二章 实体数据建模基础之创建一个简单的模型
第二章 实体数据建模基础 很有可能,你才开始探索实体框架,你可能会问“我们怎么开始?”,如果你真是这样的话,那么本章就是一个很好的开始.如果不是,你已经建模,并在实体分裂和继承方面感觉良好,那么你可以 ...
- 如何创建一个简单的C++同步锁框架(译)
翻译自codeproject上面的一篇文章,题目是:如何创建一个简单的c++同步锁框架 目录 介绍 背景 临界区 & 互斥 & 信号 临界区 互斥 信号 更多信息 建立锁框架的目的 B ...
- Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目
前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现,接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能. 本篇我们使用WinJS ...
- ADF_General JSF系列1_创建一个简单的JSF Application
2015-02-17 Creatd By BaoXinjian
- IntelliJ IDEA 15 部署Tomcat及创建一个简单的Web工程
一.部署Tomcat 二.创建一个简单的Web工程 2.1创建一个新工程 创建一个新工程 设置JDK及选择Web Application (创建的是Web工程) 点击Next,选择工作空间,起个工程名 ...
- Symfony2之创建一个简单的web应用
Symfony2——创建bundle bundle就像插件或者一个功能齐全的应用,我们在应用层上开发的应用的所有代码,包括:PHP文件.配置文件.图片.css文件.js文件等都会包含在bu ...
- 如何创建一个简单的struts2程序
如何创建一个简单的Struts2程序 “计应134(实验班) 凌豪” 1.创建一个新的Web项目test(File->new->Web Project) 2.Struts2框架的核心配置文 ...
- 使用 CodeIgniter 创建一个简单的 Web 站点
原文:使用 CodeIgniter 创建一个简单的 Web 站点 参考源自: http://www.ibm.com/developerworks/cn/web/wa-codeigniter/index ...
随机推荐
- 【状压DP】【UVA11795】 Mega Man's Mission
传送门 Description 你要杀n个怪,每杀掉一个怪那个怪会掉落一种武器,这种武器可以杀死特定的怪.游戏初始你有一把武器,能杀死一些怪物.每次只能杀一只,求有多少种杀怪方法. Input 多组数 ...
- DPM(Deformable Parts Model)--原理(一)
http://blog.csdn.net/ttransposition/article/details/12966521 DPM(Deformable Parts Model) Reference: ...
- poj2060——Taxi Cab Scheme（最小路径覆盖）
Description Running a taxi station is not all that simple. Apart from the obvious demand for a centr ...
- c++11新特性之future
std::future可以从异步任务中获取结果,一般与std::async配合使用,std::async用于创建异步任务,实际上就是创建一个线程执行相应任务. 先看段代码: #include < ...
- getQueryString----获取url中得参数
/** * 获取url中得参数 * @param name * @returns {null} */ window.getQueryString = function (name) { var reg ...
- js的作用域深入理解
一.什么是作用域 作用域是指对某一变量和方法具有访问权限的代码空间,Javascript的作用域只有两种:全局作用域和本地作用域,本地作用域是按照函数来区分的(即全局变量和局部变量)) 局部变量:只有 ...
- 洛谷2115 [USACO14MAR]破坏Sabotage
https://www.luogu.org/problem/show?pid=2115 题目描述 Farmer John's arch-nemesis, Farmer Paul, has decide ...
- java 8新特性 instant
Java 8目前已经开始进入大众的视线,其中笔者在写本文之前,留意到其中Java 8预览版中将会出现新的关于日期和时间的API(遵守JSR310规范).在本系列文章中,将对这些新的API进行举例说明. ...
- sudo: /usr/libexec/sudo/sudoers.so must be only be writable by owne
1. chmod 644 sudoers.so 2. pkexec chmod 0440 /etc/sudoers
- UIImagePickerController---iOS-Apple苹果官方文档翻译
//本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 //转载请注明出处--本文永久链接:http://www.cnblogs.com ...