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. C语言打印不出百分号'%'（以解决）

    1. 问题描述 今天,我需要把百分号'%'打印出来,考虑到它是特殊符号,我就用转义字符'\',和它组合,结果是漆黑的屏幕什么也没有. 2. 解决办法    我问度娘, 她告诉我要打印百分号需要在它的前 ...

  2. FluorineFx.IO.AMFMessage

    近日玩网页游戏七雄争霸,觉得还可以,但是玩起来太累,所以想自己开发个辅助试试 从网上找到了个<流年网页游戏辅助VIP系列教程>,看了下,遇到了一个问题 特来请高手指点...... 代码如下 ...

  3. yii 缓存之apc

    首先yii CApcCache 实现了一个针对APC的缓存应用组件,常见的缓存操作方法get,set,add,delete,flush... 下面说说配置: 1. 在config/main.php c ...

  4. 免费分享Navicat12各版本破解（仅供学习使用）

    花了几个小时终于找到比较"绿色"的安装包了...(无力吐槽下现在网上好多挂羊头卖狗肉的网站) https://pan.baidu.com/s/1geMIkfT 密码:9a98 里面 ...

  5. 没有dev-server.js文件，如何进行后台数据模拟？

    最新的vue-webpack-template 中已经去掉了dev-server.js 但是要进行模拟后台数据的,如何模拟本地数据操作? 解决方法: dev-server.js 改用webpack-d ...

  6. bzoj 1930: [Shoi2003]pacman 吃豆豆 [费用流]

    1930: [Shoi2003]pacman 吃豆豆 题意:两个PACMAN吃豆豆.一开始的时候,PACMAN都在坐标原点的左下方,豆豆都在右上方.PACMAN走到豆豆处就会吃掉它.PACMAN行走的 ...

  7. chrome无法登陆账号，显示操作超时的解决方案

    起因 今天重装了下windows操作系统,准备登陆chrome浏览器,以同步各种插件(你懂的),结果是...无法登陆账号,显示操作超时,真是无语了. 碰到了这个问题第一个直觉是:FQ.突然想到如果修改 ...

  8. Windows Server 2016-图形化迁移FSMO角色

    上章节我们简单介绍了三种不同方式查看FSMO主机角色信息,在开篇之前我们简单回顾一下FSMO五种操作主机角色:林范围操作主机角色有两种,分别是 架构主机角色(Schema Master)和 域命名主机 ...

  9. LeetCode - 492. Construct the Rectangle

    For a web developer, it is very important to know how to design a web page's size. So, given a speci ...

  10. 搭建简易的c语言与python语言CGI和Apache服务器的开发环境

    搭建简易的c语言CGI和Apache服务器的开发环境 http://www.cnblogs.com/tt-0411/archive/2011/11/21/2257203.html python配置ap ...