HighCharts之2D条状图

1、HighCharts之2D条状图源码

bar.html：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HighCharts 2D条状图</title>
  6. <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
  7. <script type="text/javascript" src="../scripts/js/highcharts.js"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10. 	 $('#barChart').highcharts({
  11. 		 chart: {
  12.              type: 'bar'
  13.          },
  14.          title: {
  15.              text: '2014年某一周水果销售量'
  16.          },
  17.          subtitle: {
  18.              text: ''
  19.          },
  20.          xAxis: {
  21.              categories: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日'],
  22.              title: {
  23.                  text: '星期'
  24.              }
  25.          },
  26.          yAxis: {
  27.              min: 0,
  28.              title: {
  29.                  text: '数量',
  30.                  align: 'high'
  31.              },
  32.              labels: {
  33.                  overflow: 'justify'
  34.              }
  35.          },
  36.          tooltip: {
  37.              valueSuffix: ' kg'
  38.          },
  39.          plotOptions: {
  40.              bar: {
  41.                  dataLabels: {
  42.                      enabled: true
  43.                  }
  44.              }
  45.          },
  46.          legend: {
  47.              layout: 'vertical',
  48.              align: 'right',
  49.              verticalAlign: 'top',
  50.              x: -40,
  51.              y: 100,
  52.              floating: true,
  53.              borderWidth: 1,
  54.              backgroundColor: '#CCCCCC',
  55.              shadow: true
  56.          },
  57.          credits: {
  58.              enabled: true
  59.          },
  60.          series: [{
  61.              name: '苹果',
  62.              data: [1070, 3198, 6353, 2035, 8745]
  63.          }, {
  64.              name: '橘子',
  65.              data: [9330, 1560, 9470, 4080, 6784]
  66.          }, {
  67.              name: '梨子',
  68.              data: [2735, 9140, 4054, 7329, 3478]
  69.          }]
  70.      });
  71.   });
  72. </script>
  73. </head>
  74. <body>
  75.    <div id="barChart" style="width: 1200px; height: 550px; margin: 0 auto"></div>
  76. </body>
  77. </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. FBReader阅读引擎支持的功能

    "三十年河东,三十年河西"是一句民间谚语,它的来源是:从前黄河河道不固定,经常会改道(历史上无数次发生).某个地方原来在河的东面,若干年后,因黄河水流改道,这个地方会变为在河的西面 ...

  2. [DeeplearningAI笔记]Multi-class classification多类别分类Softmax regression_02_3.8-3.9

    Multi-class classification多类别分类 觉得有用的话,欢迎一起讨论相互学习~Follow Me 3.8 Softmax regression 原有课程我们主要介绍的是二分分类( ...

  3. [搬运] DotNetAnywhere:可供选择的 .NET 运行时

    原文 : DotNetAnywhere: An Alternative .NET Runtime 作者 : Matt Warren 译者 : 张很水 我最近在收听一个名为DotNetRock 的优质播 ...

  4. 【OS】NMON的简介和使用

    [OS]NMON的简介和使用 目前NMON已开源,以sourceforge为根据地,网址是http://nmon.sourceforge.net. 1. 目的 本文介绍操作系统监控工具Nmon的概念. ...

  5. 洛谷 [P1265] 公路修建

    本题的描述:城市联盟,最短距离.. 使人想到了prim求MST,再一看数据范围:完全图!,那么一定得用prim,因为只有5000个点,所以不加优化的prim就能过. #include <iost ...

  6. BZOJ 3512: DZY Loves Math IV [杜教筛]

    3512: DZY Loves Math IV 题意:求\(\sum_{i=1}^n \sum_{j=1}^m \varphi(ij)\),\(n \le 10^5, m \le 10^9\) n较小 ...

  7. HDU3488 Tour [有向环覆盖 费用流]

    Tour Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submis ...

  8. centos-安装python3.6环境并配置虚拟环境

    python3.6下载地址:https://www.python.org/ftp/python/3.6.4/Python-3.6.4.tgz linux下python环境配置 统一目录: 源码存放位置 ...

  9. 【Oracle】-初识PL/SQL

    在最近的工作中要用到存储过程和函数,索性把PL/SQL整体的看一下.之前看过基本书和园子里的博文,在这里将所学简单总结. 一.基本语句 1.大小写 2.分隔符  --  : 3.引用字符串  --   ...

  10. 【汇总】Linux常用脚本shell

    [crontab] #每天6:00 执行a.sh00 6 * * * /bin/sh /home/work/rxShell/a.sh #每天3:20 执行a1.sh20 3 * * * /bin/sh ...