HighCharts之2D堆面积图
HighCharts之2D堆面积图
1、HighCharts之2D堆面积图源码
StackedArea.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(){ $('#stackedAreaChart').highcharts({ chart: { type: 'area' }, title: { text: '2013年水果销售量' }, subtitle: { text: '水果销量' }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'], tickmarkPlacement: 'on', title: { enabled: false } }, yAxis: { title: { text: '销量(kg)' }, labels: { formatter: function() { return this.value / 1000; } } }, tooltip: { shared: true, valueSuffix: ' kg' }, plotOptions: { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } }, series: [{ name: '苹果', data: [561, 145, 365, 879, 1245, 345, 268,654,945,451,615,341] }, { name: '梨子', data: [306, 207, 451, 654, 354, 245, 874,652,478,984,875,243] }, { name: '橘子', data: [156, 421, 214, 754, 410, 623, 894,451,652,874,356,524] }, { name: '荔枝', data: [851, 331, 554, 245, 439, 718, 245,653,451,698,321,684] }, { name: '草莓', data: [245, 352, 852, 746, 313, 430, 246,895,675,235,654,745] }] }); }); </script> </head> <body> <div id="stackedAreaChart" style="width: 1200px; height: 500px; 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堆柱状图源码 Stacked.html: <!DOCTYPE html> <html> <head> ...
- HighCharts之2D条状图
HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...
- Highcharts 连续的堆积面积图
说明:设置两个柱形图间距为0 Highcharts柱图,设置X轴各Column的间距 plotOption : { column : { // 设置每个柱自身的宽度 ...
- HighCharts之2D数值带有百分数的面积图
HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...
- HighCharts之2D含有负值的面积图
HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...
- HighCharts之2D面积图
HighCharts之2D面积图 1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...
- HighCharts之2D带Label的折线图
HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...
- HighCharts之2D折线图
HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...
随机推荐
- [DeeplearningAI笔记]神经网络与深度学习3.2_3.11(激活函数)浅层神经网络
觉得有用的话,欢迎一起讨论相互学习~Follow Me 3.2 神经网络表示 对于一个由输入层,隐藏层,输出层三层所组成的神经网络来说,输入层,即输入数据被称为第0层,中间层被称为第1层,输出层被称为 ...
- 多线程编程学习笔记——编写一个异步的HTTP服务器和客户端
接上文 多线程编程学习笔记——使用异步IO 二. 编写一个异步的HTTP服务器和客户端 本节展示了如何编写一个简单的异步HTTP服务器. 1.程序代码如下. using System; using ...
- iOS-Xcode编码自动补全失效
1. 退出 Xcode 2. 重启电脑 3. 找到 这个 DerivedData 文件夹 删除 (路径: ~/Library/Developer/Xcode/DerivedData) 4. 删除这个 ...
- ABP官方文档翻译 8.2 SignalR集成
SignalR集成 介绍 安装 服务器端 客户端 建立连接 內建特征 通知 在线客户端 PascalCase与CamelCase对比 你的SignalR代码 介绍 ABP中的Abp.Web.Signa ...
- Python基础篇(二)
Python最基本的数据结构是序列(sequence),序列中的每个元素被分以以0开头的唯一的一个id号. Python中有6种内建的序列:列表,元组,字符串,Unicode字符串,buffer对象和 ...
- HDU 4333 Revolving Digits [扩展KMP]【学习笔记】
题意:给一个数字,每一次把它的最后一位拿到最前面,一直那样下去,分别求形成的数字小于,等于和大于原来数的个数. SAM乱搞失败 当然要先变SS了 然后考虑每个后缀前长为n个字符,把它跟S比较就行了 如 ...
- Golang Linux Shell编程(一)
1.调用系统命令 exec包执行外部命令,它将os.StartProcess进行包装使得它更容易映射到stdin和stdout,并且利用pipe连接i/o func Command(name stri ...
- Maven项目中的配置文件找不到以及打包问题
我们在使用maven开发项目的时候,创建model的时候会自动创建一个resource目录:这个目录是用来放配置文件的,我们把配置文件放在这个目录中项目打包才会将配置文件打包进去. 有的时候我们会把配 ...
- Flask-Moment----探索
前言: Flask-Moment在所有的flask扩展中算是相对简单的一个了,但是还是有很多需要理解的地方.那么今天就跟着笔者一起,来学习一下flask-moment在flask项目中的应用. 首先 ...
- mysql5.7中解决中文乱码的问题
在使用mysql5.7时,会发现通过web端向数据库中写入中文后会出现乱码,但是在数据库中直接操作SQL语句插入数据后中文就显示正常,这个问题怎么解决呢?此处不对mysql的数据编码过程和原理进行讲解 ...