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 ...
随机推荐
- 51nod 1275 连续子段的差异（twopointer+单调队列）
对于每一个i找到最近的j满足最大值-最小值>K,对答案的贡献为j-i,用单调队列维护最值即可 #include<iostream> #include<cstdlib> # ...
- 【并查集】【P1525】关押罪犯
传送门 Description Input Output Sample Input Sample Output Hint Solution 非常显然的并查集题目,在本题中,对于每个罪犯i,维护两个信息 ...
- 直通BAT面试算法精讲课2
对于一个int数组,请编写一个冒泡排序算法,对数组元素排序. 给定一个int数组A及数组的大小n,请返回排序后的数组. 测试样例: [1,2,3,5,2,3],6 [1,2,2,3,3,5] clas ...
- js 获取当前链接和获取域名
<script language="javascript"> //获取域名 host = window.location.host; host2=document.do ...
- JAVA List集合转Page（分页对象）
/** * @version 1.0 * @author: fwjia */ import java.util.List; public class PageModel<T> { /*** ...
- Nginx的启动、停止、平滑重启
转载自:http://www.xj123.info/2572.html 启动Nginx /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/ngi ...
- android AsyncTask介绍 AsyncTask和Handler对比
1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可 ...
- IConfigurationSectionHandler 接口
IConfigurationSectionHandler 处理对特定的配置节的访问. 示例代码: public class MyConfig : IConfigurationSectionHandle ...
- Value does not fall within the expected range 值不在预期的范围内
用vs2012 打开web.config时,提示如下错误:“Value does not fall within the expected range”; 中文提示:“值不在预期的范围内” 解决方案: ...
- outer的使用
outer就是一个标签,java语言中根本没有此关键字,因此outer也可以用其它的词来代替 java中的标签就是一个紧跟着英文冒号(:)的标识符.与其他语言不同的是,java中的标签只有放在循环语言 ...