HighCharts之2D条状图
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条状图的更多相关文章
- HighCharts之2D堆条状图
HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...
- HighCharts之2D堆面积图
HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...
- Excel 2010高级应用-条状图(五)
Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...
- Flex实现双轴条状图
1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...
- python中matplotlib绘图封装类之折线图、条状图、圆饼图
DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...
- highcharts柱状图、饼状图
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 利用js来画图形(例如:条状图,圆饼图等)
背景:java开发的过程中,需要对数据进行可视化,这样方便客户理解此时的数据状态 语言:java,js,window7,echarts包文件 sample的例子下面的参照 https://www.ec ...
- MS Chart 条状图【转】
private void Form1_Load(object sender, EventArgs e) { string sql1 = "select 类别,coun ...
- maplotlib python 玩具绘图 横向纵向条状图
from matplotlib import font_manager#解决zh-han图形汉字乱码 my_font = font_manager.FontProperties(fname=" ...
随机推荐
- SQL Server判断是否满足日期格式(YYYYMMDD)以及中文等判断,格式化为YYYY-MM-DD
SQL Server判断是否满足日期格式(YYYYMMDD)以及中文等判断: 在做sql数据的正确性审核中,需要判断数据是否满足日期格式,网上找不到相关的资料,于是自己花了半天写了一个简单的函数 具体 ...
- 一次saltstack环境变量的坑
现场环境: salt-minion端: ip:10.0.3.149 环境:使用 nvm装的nodejs 受用nodejs自带的npm 安装pm2 sal-master端: IP:10.0 ...
- 序列化与transient
满足下面四个条件中的一个的类就不应该被序列化: 1.一个类与本地代码(native code)有紧密的关系,如java.util.zip.Deflater,这个类中很多都是native的. 2.对象 ...
- 《Thinking in Java》学习笔记(七)
1.关于反射还有一些需要补充的 package reflect; public class HiddenClass { public A HiddenA(){ return new A(); } } ...
- SDN第二次作业
作业链接 阅读文章<软件定义网络(SDN)研究进展>,并根据所阅读的文章,书写一篇博客,回答以下问题(至少3个): 为什么需要SDN?SDN特点? 随着网络规模的不断扩大,封闭的网络设备内 ...
- 使用scrapy爬取豆瓣上面《战狼2》影评
这几天一直在学习scrapy框架,刚好学到了CrawlSpider和Rule的搭配使用,就想着要搞点事情练练手!!! 信息提取 算了,由于爬虫运行了好几次,太过分了,被封IP了,就不具体分析了,附上& ...
- 关于@Override
首先,来了解一下“重载”和“覆写”的区别: 重载: (1)方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载Overloading是一个类中多态 ...
- php 数组变成树状型结构
<? php $stime = microtime(true); $nodes = [ ['id' = > 1, 'pid' = > 0, 'name' = > 'a'], [ ...
- Centos 6.9--配置python3.5
安装python3.5可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlit ...
- 升级gitlab
https://gitlab.com/gitlab-org/gitlab-ce/tree/master/doc/update https://about.gitlab.com/update/#cent ...