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 ...
随机推荐
- BZOJ1509 NOI2003 逃学的小孩
Description: Input: 第一行是两个整数N(3 N 200000)和M,分别表示居住点总数和街道总数.以下M行,每行给出一条街道的信息.第i+1行包含整数Ui.Vi.Ti(1 ...
- STL之七：STL各种容器的使用时机详解
转载于:http://blog.csdn.net/longshengguoji/article/details/8550235 C++标准程序库提供了各具特长的不同容器.现在的问题是:该如何选择最佳的 ...
- 使用树莓派录音——USB声卡
原文链接:http://jingyan.eeboard.com/article/73723 我们都知道树莓派只有音频输出口,而没有音频输入的接口,怎么办呢?其实只要一个USB声卡就可以了. USB声卡 ...
- BZOJ1878: [SDOI2009]HH的项链 (离线查询+树状数组)
1878: [SDOI2009]HH的项链 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1878 Description: HH有一串由 ...
- BZOJ1105 [POI2007]石头花园SKA 贪心
[POI2007]石头花园SKA Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 776 Solved: 237[Submit][Status][Di ...
- bzoj 4695 最假女选手 吉利线段树
最假女选手 Time Limit: 50 Sec Memory Limit: 128 MBSubmit: 480 Solved: 118[Submit][Status][Discuss] Desc ...
- DOM基本代码二
------------------------------- <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- Leetcode 144.二叉树的前序遍历
1.题目描述 给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 2.解法 ...
- nodejs+react构建仿知乎的小Demo
一.命令行进入指定项目文件夹 二.相关命令安装环境和项目工具 npm init npm install react -- save npm install -g gulp npm install -- ...
- [Luogu 2805] NOI2009 植物大战僵尸
这题是个比较经典的最大权闭合子图,可以建图转化为最小割问题,再根据最大流最小割定理,采用任意一种最大流算法求得. 对于每个点,如果点权w为正,则从源点到这个点连一条边权为w的有向边:否则如果w为负则从 ...