HighCharts之2D堆柱状图

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

Stacked.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(){
	 $('#stackedChart').highcharts({
		 chart: {
             type: 'column'
         },
         title: {
             text: '堆柱状图'
         },
         xAxis: {
             categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日']
         },
         yAxis: {
             min: 0,
             title: {
                 text: '水果销量'
             },
             stackLabels: {
                 enabled: true,
                 style: {
                     fontWeight: 'bold',
                     color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                 }
             }
         },
         legend: {
             align: 'right',
             x: -70,
             verticalAlign: 'top',
             y: 20,
             floating: true,
             backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
             borderColor: '#CCC',
             borderWidth: 1,
             shadow: false
         },
         tooltip: {
             formatter: function() {
                 return '<b>'+ this.x +'</b><br/>'+
                     this.series.name +': '+ this.y +'<br/>'+
                     'Total: '+ this.point.stackTotal;
             }
         },
         plotOptions: {
             column: {
                 stacking: 'normal',
                 dataLabels: {
                     enabled: true,
                     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                     style: {
                         textShadow: '0 0 3px black, 0 0 3px black'
                     }
                 }
             }
         },
         series: [{
             name: '苹果',
             data: [58, 31, 49, 12, 35,65,98]
         }, {
             name: '梨子',
             data: [12, 45, 63, 24, 17,87,35]
         }, {
             name: '桃子',
             data: [67, 89, 47, 27, 58,67,34]
         }, {
             name: '橘子',
             data: [54, 36, 78, 64, 35,78,94]
         }]
     });
  });
</script>
</head>
<body>
   <div id="stackedChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

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

  1. HighCharts之2D堆面积图

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

  2. HighCharts之2D堆条状图

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

  3. HighCharts之2D柱状图

    1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...

  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. HighCharts之2D数值带有百分数的面积图

    HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...

  8. HighCharts之2D含有负值的面积图

    HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...

  9. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

随机推荐

  1. Android util.Log 工具类

    Android中的日志工具类是Log(android.util.Log),这个类中提供了如下5个方法来供我们打印日志. Log.v().用于打印那些最为琐碎的.意义最小的日志信息.对应级别verbos ...

  2. JAVA常用知识点及面试题总结

    1. String.StringBuffer.StringBuilder三者区别? (1)三者在执行速率上的比较: String<StringBuffer<StringBuilder 原因 ...

  3. R语言的神奇之基于向量

    对于大多数需要来说,当我们需要计算两个向量相加时,我们需要分别对这两个向量的元素进行遍历,所以写起来非常的麻烦.下面看看R语言是如何实现的. 首先,将1:5赋予一个名为x的向量 > X<- ...

  4. 精通libGDX游戏开发-RPG实战-开发游戏的基本前提

    说起RPG,大概国人是不会陌生的. 这不得不从中国单机游戏市场说起,由于早期软件市场被盗版杀死,顺带的,单机游戏软件作为软件市场的分支,也没赚什么钱,养不活公司纷纷倒闭,只到RPG游戏<仙剑奇侠 ...

  5. log4j源码解析-文件解析

    承接前文log4j源码解析,前文主要介绍了log4j的文件加载方式以及Logger对象创建.本文将在此基础上具体看下log4j是如何解析文件并输出我们所常见的日志格式 附例 文件的加载方式,我们就选举 ...

  6. 修改XCode默认工程为使用Xib

    概述 自从XCode5开始,当创建一个带有View的iPhone项目时,默认采用了StoryBoards,本文主要是讲解如何手动修改使其切换到使用xib来布局. 修改步骤 1.先将Main.story ...

  7. 小甲鱼OD学习第8讲

    这次我们的任务是破解这个有日期限制的软件 我们可以看到,这个一个有日期限制的软件,如图所示 首先,我们把程序载入OD,我们从字符串搜索入手,选择  所有参考文本字串,如图 我们输入相应的字符串尝试搜索 ...

  8. typedef struct 的用法

    typedef struct stu { int age; char name[20]; }stu,*pstu; stu stu1;相当于struct stu stu1; pstu pstu1;相当于 ...

  9. XAMPP的配置与使用

    XAMPP的配置与使用 一.起因 一开始,我在本地手动DIY安装了WAMPP环境,其中经历了很长时间的折腾,原因是独立安装Apache和MySQL,以及PHP的时候,屡次遇到版本兼容问题,我主要的时间 ...

  10. 用Python发送邮件

    文件:send.py # -*- coding:utf-8 -*- # ## 任兴测试用Python发送邮件 import os import sys import getopt import tim ...