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. linux下磁盘占用达到100%了,找不到哪些大文件耗尽了磁盘

    Linux下的根分区使用率100%,但是查看/分区下的目录都不大,没有占用满,这该怎么处理? 重启是肯定有效的,目前处理情况:重新restart应用后,空间释放出来 1.lsof | grep del ...

  2. R语言-探索两个变量

    目的: 通过探索文件pseudo_facebook.tsv数据来学会两个变量的分析流程 知识点: 1.ggplot语法 2.如何做散点图 3.如何优化散点图 4.条件均值 5.变量的相关性 6.子集散 ...

  3. ABP 数据迁移

    我主要是在项目部署的时候.当添加一个租户的时候.那么租户是有一个单独的数据库.而我的并没有用多租户单数据库. 因此我的模块里面有一个领域事件 当租户添加时将生前表生成到对应的数据库中.如果那位网友有更 ...

  4. B 洛谷 P3604 美好的每一天 [莫队算法]

    题目背景 时间限制3s,空间限制162MB 素晴らしき日々 我们的情人,不过是随便借个名字,用幻想吹出来的肥皂泡,把信拿去吧,你可以使假戏成真.我本来是无病呻吟,漫无目的的吐露爱情---现在这些漂泊不 ...

  5. 个人微信接入图灵机器人(python版)

    准备工作 itchat,requests 注册图灵账号,创建机器人,获取API-KEY 代码实现 import itchat from itchat.content import * import j ...

  6. javascript 欺骗词法作用域

    如果词法作用域完全由写代码期间函数所声明的位置来定义,怎样才能在运行时来"修改"(也可以说欺骗)词法作用域呢?    JavaScript 中有两种机制来实现这个目的.社区普遍认为 ...

  7. Scrapy-简单介绍

    Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 其最初是为了 页面抓取 (更确切来说, 网络抓取 )所设计的, ...

  8. eslint 入门项目搭建过程

    github 地址 : https://github.com/gebin/eslint-demo 运行该项目 npm install npm start 访问 http://localhost:900 ...

  9. js到底new了点啥

    在最开始学习js的时候,我看书上写着,创建一个数组,一个对象通常使用new,如下: var arr=new Array(),//arr=[] obj=new Object();//obj={} 到了后 ...

  10. Thymeleaf入门基础

    一.简介 1.thymeleaf优点 ①是一个支持html原型的自然引擎,它在html标签增加额外的属性来达到模板+数据的展示方式,由于浏览器解释html时,忽略未定义的标签属性,因此thymelea ...