HighCharts之2D堆条状图

1、HighCharts之2D堆条状图源码

StackedBar.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">
$(function(){
	 $('#stackedBarChart').highcharts({
		 chart: {
             type: 'bar'
         },
         title: {
             text: '堆条状图'
         },
         xAxis: {
             categories: ['苹果', '橘子', '梨子', '葡萄', '香蕉']
         },
         yAxis: {
             min: 0,
             title: {
                 text: '水果销量'
             }
         },
         legend: {
             backgroundColor: '#FFFFFF',
             reversed: true
         },
         plotOptions: {
             series: {
                 stacking: 'normal'
             }
         },
             series: [{
             name: '星期一',
             data: [50, 34, 45, 77, 28]
         }, {
             name: '星期二',
             data: [92, 32, 43, 22, 61]
         }, {
             name: '星期三',
             data: [83, 44, 54, 12, 59]
         }, {
             name: '星期四',
             data: [63, 94, 67, 23, 12]
         }, {
             name: '星期五',
             data: [57, 64, 24, 37, 98]
         }, {
             name: '星期六',
             data: [34, 12, 44, 65, 32]
         }, {
             name: '星期日',
             data: [67, 47, 23, 96, 23]
         }]
     });
  });
</script>
</head>
<body>
   <div id="stackedBarChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

HighCharts之2D堆条状图的更多相关文章

  1. HighCharts之2D条状图

    HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...

  2. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  3. HighCharts之2D堆柱状图

    HighCharts之2D堆柱状图 1.HighCharts之2D堆柱状图源码 Stacked.html: <!DOCTYPE html> <html> <head> ...

  4. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  5. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  6. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  7. Excel 2010高级应用-条状图（五）

    Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...

  8. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  9. python中matplotlib绘图封装类之折线图、条状图、圆饼图

    DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...

随机推荐

  1. spring之AspectJ基于注解 AOP编程

    一.前言 使用注解代替之前在spring配置文件中配置目标类.切面类和aop配置. 二.注意 需要注意的是,需要在spring配置文件中引入如下,如果不添加,切面类中的@Aspect注解将不起作用 & ...

  2. C#：导入Excel通用类（CSV格式）

    一.引用插件LumenWorks.Framework.IO.dll(CsvReader) 插件下载地址:https://pan.baidu.com/s/1c3kTKli  提取密码 dz7j 二.定义 ...

  3. 使用JavaScript实现机器学习和神经学网络

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 下载heaton-javascript-ml.zip - 45.1 KB 基本介绍 在本文中,你会对如何使用JavaScript实现机器学习这个 ...

  4. 洛谷 [P4016] 负载平衡问题

    贪心做法 第一眼看见觉得和均分纸牌差不多,然而因为这是环形的,并不能用均分纸牌的方法做,但是均分纸牌的思想仍然适用 首先我们假设平均数为sum1. 那么对于第1个人,我们假设他给第N个人K个糖果, 第 ...

  5. BZOJ 1778: [Usaco2010 Hol]Dotp 驱逐猪猡 [高斯消元 概率DP]

    1778: [Usaco2010 Hol]Dotp 驱逐猪猡 题意:一个炸弹从1出发p/q的概率爆炸,否则等概率走向相邻的点.求在每个点爆炸的概率 高斯消元求不爆炸到达每个点的概率,然后在一个点爆炸就 ...

  6. Javascript Sting(字符串)对象

    一, 如何计算字符串的长度? 可以通过.length属性来计算 <script type="text/javascript"> var txt="Hello ...

  7. centos 手动增加swap分区

    SWAP是Linux中的虚拟内存,用于扩充物理内存不足而用来存储临时数据存在的.它类似于Windows中的虚拟内存.在Windows中,只可以使用文件来当作虚拟内存.而linux可以文件或者分区来当作 ...

  8. PHP die与exit的区别

    最近听见有人说die和exit区别,bula~bula.决心一探究竟. 翻了翻PHP 5.6的源码(源码的位置为zend目录下zend_language_scanner.l大约是1014~1020行) ...

  9. 统计输入的汉字，数字，英文，other数量

    主要用正则表达式在完成对汉字,数字,英文数量的验证. import java.util.Scanner; /* * 统计汉字,数字,英文,other * */ public class Test { ...

  10. 获取登陆用户的ip

    function getip(){     static $ip = null;     if($ip !=null) return $ip;     if(getenv('REMOTE_ADDR') ...