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 ...
随机推荐
- UVA.11300 Spreading the Wealth (思维题 中位数模型)
UVA.11300 Spreading the Wealth (思维题) 题意分析 现给出n个人,每个人手中有a[i]个数的金币,每个人能给其左右相邻的人金币,现在要求你安排传递金币的方案,使得每个人 ...
- 阿里云学生机——Mysql配置---教小白入门篇
首先,我的学生机默认配置为:CentOS 7.2 64位 + Tomcat 8 + Jdk8 + MySQL5.7.16 扩展:Linux 如何查看 MySQL 版本号----使用命令 mysql - ...
- 【P2602】【ZJOI2012】数字计数
传送门 Description 给定两个正整数\(a\)和\(b\),求在\([a,b]\)中的所有整数中,每个数码(\(digit\))各出现了多少次. Input 两个正整数\(a,b\) Out ...
- 【博弈论】Nim游戏
百度百科 Definition 这样的游戏被称为Nim游戏: 1.有两个玩家,轮流进行操作 2.是公平游戏.即面对同一局面两个玩家所能进行的操作是相同的.例如中国象棋不是公平游戏.因为面对同一个局面, ...
- acm1878欧拉回路
欧拉回路解释 对于本题我们只要把每个点的度进行记录,判断是否存在奇数度的点,如果是就可以判断不是欧拉回路,如果不是就在一个点出发,进行dfs搜索, 看能否走到起点,因为对于欧拉回路是一个闭合的回路,无 ...
- File file:/data1/hadoop/yarn/local/usercache/hp/appcache/application_* does not exi
AM Container for appattempt_1453292851883_0381_000002 exited with exitCode: -1000For more detailed o ...
- 怎么修改jar包中的class文件然后再重新打成jar包
1.导入到eclipse中, 修改完了 然后导出jar即可 2.jar cf file.jar *.class 将当前目录下所有CLASS文件打包成新的JAR文件 3.对于补丁.之前已经有jar 例如 ...
- UVA 580 Critical Mass
https://vjudge.net/problem/UVA-580 题意:一堆U和L,用n个排成一排,问至少有3个U放在一起的方案数 f[i] 表示 至少有3个U放在一起的方案数 g[i] 表示没有 ...
- loj516 「LibreOJ β Round #2」DP 一般看规律
传送门:https://loj.ac/problem/516 [题解] 那段代码求的是相同的数中间隔最小的值. 离散后用set维护每个值出现次数,每次操作相当于合并两个set,这步可以启发式合并. 加 ...
- Vuejs - 花式渲染目标元素
Vue.js是什么 摘自官方文档: Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...