HighCharts之2D柱状图
1、HighCharts之2D柱状图源码
column.html:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>HighCharts 2D柱状图</title>
- <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
- <script type="text/javascript" src="../scripts/js/highcharts.js"></script>
- <!-- <script type="text/javascript" src="../scripts/js/modules/exporting.js"></script> -->
- <script type="text/javascript">
- $(function(){
- $('#columnChart').highcharts({
- chart: {
- type: 'column'
- },
- title: {
- text: '2013年月收入'
- },
- subtitle: {
- text: '月收入'
- },
- xAxis: {
- categories: [
- '一月',
- '二月',
- '三月',
- '四月',
- '五月',
- '六月',
- '七月',
- '八月',
- '九月',
- '十月',
- '十一月',
- '十二月'
- ]
- },
- yAxis: {
- min: 0,
- title: {
- text: '收入 (¥)'
- }
- },
- tooltip: {
- headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
- pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
- '<td style="padding:0"><b>{point.y:.1f} 元</b></td></tr>',
- footerFormat: '</table>',
- shared: true,
- useHTML: true
- },
- plotOptions: {
- column: {
- pointPadding: 0.2,
- borderWidth: 0
- }
- },
- series: [{
- name: '张三',
- data: [4995, 7169, 1064, 7292, 2440, 4545, 6545, 9564, 1245, 4512, 6523, 4514]
- }, {
- name: '李思',
- data: [8361, 2354, 4512, 2356, 4515, 6451, 9865, 5455, 8254, 6562, 6945, 2356]
- }, {
- name: '王武',
- data: [4512, 9565, 6564, 2652, 3265, 1202, 7845, 9845, 2356, 7844, 5424, 6312]
- }, {
- name: '赵六',
- data: [6523, 8956, 6531, 6532, 9864, 4552, 9564, 7845, 6523, 4512, 8956, 2356]
- }]
- });
- });
- </script>
- </head>
- <body>
- <div id="columnChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
- </body>
- </html>
2、运行结果
HighCharts之2D柱状图的更多相关文章
- HighCharts之2D柱状图、折线图的组合多轴图
HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts之2D柱状图、折线图的组合双轴图
HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...
- HighCharts之2D柱状图、折线图和饼图的组合图
HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...
- HighCharts之2D堆柱状图
HighCharts之2D堆柱状图 1.HighCharts之2D堆柱状图源码 Stacked.html: <!DOCTYPE html> <html> <head> ...
- FusionCharts 2D柱状图和折线图的组合图调试错误
在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...
- FusionCharts 2D柱状图和折线图的组合图
1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...
- HighCharts之2D数值带有百分数的面积图
HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...
- HighCharts之2D堆面积图
HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...
- HighCharts之2D含有负值的面积图
HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...
随机推荐
- 【python】密码生成器
#!/usr/bin/env python#-*- coding:UTF-8 -*- import random #导入random模块import string #导入string模块 sal ...
- C# 使用Newtonsoft.Json.dll 格式化显示Json串
private string ConvertJsonString(string str) { //格式化json字符串 JsonSerializer serializer = new JsonSeri ...
- jdk1.6 反射性能对比
ReflectPerformance.java package aaa.bbb.ccc; import java.lang.reflect.Method; public class ReflectPe ...
- poj 2584 T-Shirt Gumbo (二分匹配)
T-Shirt Gumbo Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2571 Accepted: 1202 Des ...
- LightOJ 1094 - Farthest Nodes in a Tree(树的直径)
http://acm.hust.edu.cn/vjudge/contest/121398#problem/H 不是特别理解,今天第一次碰到这种问题.给个链接看大神的解释吧 http://www.cnb ...
- shell脚本学习(一)
Shell脚本最常用于系统管理工作,或者用于结合现有的程序以完成小型.特定的工作. Shell的特点有: 1. 简单性 2. 可移植性 3. 开发容易 [什么是shell] 简单点理解,就是系统跟计算 ...
- js 去掉字符串前后空格
//去左空格; function ltrim(s){ return s.replace(/(^\s*)/g, ""); } //去右空格; function rtrim(s){ r ...
- 剑指offer题目51-60
面试题51:数组中重复的数字 public class Solution { public boolean duplicate(int numbers[],int length,int [] dupl ...
- 咏南WEB开发框架(FOR XE10.1 BERLIN)
咏南WEB开发框架(FOR XE10.1 BERLIN) 1)支持最新的XE10.1 BERLIN开发WEB程序 2)如同开发VCL WIN32程序一样的速度 3)WEB框架通过咏南中间件和数据库打交 ...
- BST、B树、B+树、B*树
一. BST BST即二叉搜索树Binary Search Tree(又叫二叉排序树Binary Sort Tree).它有以下特点: 所有非叶子结点至多拥有两个儿子(Left和Right): 所有结 ...