HighCharts之2D条状图

1、HighCharts之2D条状图源码

bar.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(){
	 $('#barChart').highcharts({
		 chart: {
             type: 'bar'
         },
         title: {
             text: '2014年某一周水果销售量'
         },
         subtitle: {
             text: ''
         },
         xAxis: {
             categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日'],
             title: {
                 text: '星期'
             }
         },
         yAxis: {
             min: 0,
             title: {
                 text: '数量',
                 align: 'high'
             },
             labels: {
                 overflow: 'justify'
             }
         },
         tooltip: {
             valueSuffix: ' kg'
         },
         plotOptions: {
             bar: {
                 dataLabels: {
                     enabled: true
                 }
             }
         },
         legend: {
             layout: 'vertical',
             align: 'right',
             verticalAlign: 'top',
             x: -40,
             y: 100,
             floating: true,
             borderWidth: 1,
             backgroundColor: '#CCCCCC',
             shadow: true
         },
         credits: {
             enabled: true
         },
         series: [{
             name: '苹果',
             data: [1070, 3198, 6353, 2035, 8745]
         }, {
             name: '橘子',
             data: [9330, 1560, 9470, 4080, 6784]
         }, {
             name: '梨子',
             data: [2735, 9140, 4054, 7329, 3478]
         }]
     });
  });
</script>
</head>
<body>
   <div id="barChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

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

  1. HighCharts之2D堆条状图

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

  2. HighCharts之2D堆面积图

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

  3. Excel 2010高级应用-条状图(五)

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

  4. Flex实现双轴条状图

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

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

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

  6. highcharts柱状图、饼状图

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  7. 利用js来画图形(例如:条状图,圆饼图等)

    背景:java开发的过程中,需要对数据进行可视化,这样方便客户理解此时的数据状态 语言:java,js,window7,echarts包文件 sample的例子下面的参照 https://www.ec ...

  8. MS Chart 条状图【转】

    private void Form1_Load(object sender, EventArgs e) {            string sql1 = "select  类别,coun ...

  9. maplotlib python 玩具绘图 横向纵向条状图

    from matplotlib import font_manager#解决zh-han图形汉字乱码 my_font = font_manager.FontProperties(fname=" ...

随机推荐

  1. SQL Server判断是否满足日期格式(YYYYMMDD)以及中文等判断,格式化为YYYY-MM-DD

    SQL Server判断是否满足日期格式(YYYYMMDD)以及中文等判断: 在做sql数据的正确性审核中,需要判断数据是否满足日期格式,网上找不到相关的资料,于是自己花了半天写了一个简单的函数 具体 ...

  2. 一次saltstack环境变量的坑

    现场环境: salt-minion端: ip:10.0.3.149     环境:使用 nvm装的nodejs    受用nodejs自带的npm 安装pm2 sal-master端: IP:10.0 ...

  3. 序列化与transient

    满足下面四个条件中的一个的类就不应该被序列化:  1.一个类与本地代码(native code)有紧密的关系,如java.util.zip.Deflater,这个类中很多都是native的. 2.对象 ...

  4. 《Thinking in Java》学习笔记(七)

    1.关于反射还有一些需要补充的 package reflect; public class HiddenClass { public A HiddenA(){ return new A(); } } ...

  5. SDN第二次作业

    作业链接 阅读文章<软件定义网络(SDN)研究进展>,并根据所阅读的文章,书写一篇博客,回答以下问题(至少3个): 为什么需要SDN?SDN特点? 随着网络规模的不断扩大,封闭的网络设备内 ...

  6. 使用scrapy爬取豆瓣上面《战狼2》影评

    这几天一直在学习scrapy框架,刚好学到了CrawlSpider和Rule的搭配使用,就想着要搞点事情练练手!!! 信息提取 算了,由于爬虫运行了好几次,太过分了,被封IP了,就不具体分析了,附上& ...

  7. 关于@Override

    首先,来了解一下“重载”和“覆写”的区别: 重载: (1)方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载Overloading是一个类中多态 ...

  8. php 数组变成树状型结构

    <? php $stime = microtime(true); $nodes = [ ['id' = > 1, 'pid' = > 0, 'name' = > 'a'], [ ...

  9. Centos 6.9--配置python3.5

    安装python3.5可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlit ...

  10. 升级gitlab

    https://gitlab.com/gitlab-org/gitlab-ce/tree/master/doc/update https://about.gitlab.com/update/#cent ...