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. use zlib lib to compress or decompress file

    If you want to compress or decompress file when writing C++ code,you can choose zlib library,that's ...

  2. 17_Python装饰器

    一.什么是装饰器 目的:给func()方法,增加一个功能,在fun()执行期间,同时把fun()执行速率机算出来 import time def func(): print('嘻嘻哈哈') start ...

  3. 【Tools】ubuntu虚拟机Vmware Tools 安装记录

    1.下载VmwareTools 链接: https://pan.baidu.com/s/1c4baji4 密码: h3si 2.终端打开下载文件位置 cd /home/ubuntu/Downloads ...

  4. WPF---Xaml中改变ViewModel的值

    在开发中遇到实现如下需求的情景:一个输入框,旁边一个清空输入的按钮,当输入框中有内容时显示清空按钮,点击该按钮可以清空输入框内容,当输入框中无内容时隐藏按钮 当然这个需求使用wpf的绑定功能很容易实现 ...

  5. 关于webconsole报../website/console.go:35: undefined: ssh.InsecureIgnoreHostkey 错误解决方案

    1.首先,进入webconsole目录删除/opt/webconsole/src/golang.org/x/目录下 crypto文件夹 2.然后,在/opt/webconsole/src/golang ...

  6. 原生Java代码拷贝目录

    拷贝.移动文件(夹),有三方包commons-io可以用,但是有时候有自己的需求,只能使用原生java代码,这时可以用以下几种方式进行拷贝: 1.使用系统命令(Linux)调用 此种方式对操作系统有要 ...

  7. sql server在一个字段相同值时，另一个字段结果拼接

    如下字段红框里的信息都一样的,通过转换实现字段拼接 SELECT formmain_id,(SELECT field0040+';' FROM formson_5489 WHERE formmain_ ...

  8. python爬虫循环导入MySql数据库

    1.开发环境 操作系统:win10    Python 版本:Python 3.5.2   MySQL:5.5.53 2.用到的模块 没有的话使用pip进行安装:pip install xxx     ...

  9. display 的 32 种写法

    从大的分类来讲, display的 32种写法可以分为 6个大类,再加上 1个全局类,一共是 7大类: 外部值 内部值 列表值 属性值 显示值 混合值 全局值 外部值 所谓外部值,就是说这些值只会直接 ...

  10. java常用类————Date类

    Date类在Java.util包中. 一.功能介绍:创建Date对象,获取时间,格式化输出的时间. 二.对象创建:1.使用Date类无参数的构造方法创建的对象可以获取本地时间.例如: Date now ...