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. webpack最简示例

    安装webapck webpack依赖node环境,所以在此之前要保证系统中有node环境. 打开cmd控制台 $ npm install webpack -g 全局安装webpack 配置模块 we ...

  2. js、jQuery实现2048小游戏

    2048小游戏 一.游戏简介:  2048是一款休闲益智类的数字叠加小游戏 二. 游戏玩法: 在4*4的16宫格中,您可以选择上.下.左.右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合 ...

  3. Sonar 常用代码规则整理(二)

    摘要:公司部署了一套sonar,经过一段时间运行,发现有一些问题出现频率很高,因此有必要将这些问题进行整理总结和分析,避免再次出现类似问题. 作者原创技术文章,转载请注明出处 ＝＝＝＝＝＝＝＝＝＝＝＝ ...

  4. ABP官方文档翻译 4.3 校验数据传输对象

    校验数据传输对象 校验简介 使用数据标注 自定义校验 禁用校验 标准化 校验简介 应用的输入首先应该被校验.输入可以是用户的也可以是其他应用的.在一个web应用中,校验通常实现两次:客户端和服务端.客 ...

  5. srs2录制flv文件metadata不准确

    测试环境:server:srs2client:librestreaming / yasea srs 配置 dvr录制24分钟flv文件. e:\flv $ ll total drwxr-xr-x Ad ...

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

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

  7. 极大似然估计（MLE)

    基本思想 模型已定,参数未知 根据已存在的样本,挑选(求出)能让样本以最大概率发生的参数 极大似然估计和最小二乘法最大区别之一 极大似然需要知道概率密度函数(离散型叫分布律) 若总体X属离散型,其分布 ...

  8. 01-vagrant安装centos7

    1. 安装VirtualBox 2. 安装Vagrant 3. 下载 centos-7.0-x86_64.box   [安装命令] $ mkdir vagrant $ cd vagrant $ vag ...

  9. Linux 获取本机IP、MAC地址用法大全

    getifaddrs()和struct ifaddrs的使用,获取本机IP ifaddrs结构体定义如下: struct ifaddrs { struct ifaddrs *ifa_next; /* ...

  10. cisco模拟器GNS3和虚拟机VMware的整合

    微软和思科环境: 在思科认证的学习中,我们需要用到许多类的模拟器,但这些模拟器并不能够更真实的模拟我们的用户机在应用中所出现的现象.因此,我们借由微软的环境来更真实地体现我们所搭建的网络中的一些应用. ...