HighCharts之2D数值带有百分数的面积图

1、HighCharts之2D数值带有百分数的面积图源码

AreaPercentage.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(){
    	 $('#percentageAreaChart').highcharts({
    		 chart: {
                 type: 'area'
             },
             title: {
                 text: '2013年水果销售量'
             },
             subtitle: {
                 text: '水果销量'
             },
             xAxis: {
                 categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
                 tickmarkPlacement: 'on',
                 title: {
                     enabled: true
                 }
             },
             yAxis: {
                 title: {
                     text: '百分比（%）'
                 }
             },
             tooltip: {
                 pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} kg)<br/>',
                 shared: true
             },
             plotOptions: {
                 area: {
                     stacking: 'percent',
                     lineColor: '#ffffff',
                     lineWidth: 1,
                     marker: {
                         lineWidth: 1,
                         lineColor: '#ffffff'
                     }
                 }
             },
             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="percentageAreaChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

HighCharts之2D数值带有百分数的面积图的更多相关文章

  1. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  2. HighCharts之2D含有负值的面积图

    HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...

  3. HighCharts之2D面积图

    HighCharts之2D面积图  1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...

  4. HighCharts之2D带有Legend的饼图

    HighCharts之2D带有Legend的饼图 1.实例源码 PieLegend.html: <!DOCTYPE html> <html> <head> < ...

  5. HighCharts之2D柱状图

    1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

  7. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

  8. HighCharts之2D堆柱状图

    HighCharts之2D堆柱状图 1.HighCharts之2D堆柱状图源码 Stacked.html: <!DOCTYPE html> <html> <head> ...

  9. HighCharts之2D条状图

    HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. mui点击加载，下拉刷新，上下整合代码

    mui点击加载,下拉刷新,上下整合代码 mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些 代码应该是有些问题的,测到了大家就自己改下. 首先要说明的是,有下拉刷新的页面一定要是双webvi ...

  2. 使用Dockerfile构建镜像

    Dockerfile是一个文本格式的配置文件,用户可以使用Dockerfile快速创建自定义的镜像.它类似shell脚本,由一行行命令组成,支持以#开头的注释行.一般而言,Dockerfile分为四部 ...

  3. 【Java】多线程初探

     参考书籍:<Java核心技术 卷Ⅰ >   Java的线程状态   从操作系统的角度看,线程有5种状态:创建, 就绪, 运行, 阻塞, 终止(结束).如下图所示     而Java定义的 ...

  4. hbuilder ios 打包失败，无法导入p12证书的解决方案

    问题描述: 在profile文件和私钥证书通过hbuilder ios 打包成功过的前提下,突然遇到打包失败的问题,问题详情是无法导入p12证书. 探索过程: 本着遇到问题先自省的态度,重复打包了几次 ...

  5. PLECS—晶闸管-第九周

    1. 单相桥式晶闸管整流电路仿真 (1)仿真电路图 (2)触发角为pi/4的手工波形图(参数设置,触发角=pi/4, 电感L = 0H) (2)模拟仿真波形图 1)参数设置:触发角=pi/4, 电感L ...

  6. UITableView 的使用小点

    1.系统默认的颜色设置//无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = ...

  7. python学习：函数传参数

    #!/usr/bin/python   import sys   def isNum(s):     for i in s:         if i in '0123456789':         ...

  8. centos ELK安装

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn ELK是进行日志收集分析用的,具体工作.原理.作用自行google. ...

  9. C语言_结构体的4种定义初始化方式及案例

    结构体是一种构造数据类型 (构造数据类型:数组类型.结构体类型(struct).共用体类型(union)).用途:把不同类型的数据组合成一个整体,通俗讲就像是打包封装,把一些有共同特征(比如同属于某一 ...

  10. 项目中常用的19条MySQL优化

    声明一下:下面的优化方案都是基于 " Mysql-索引-BTree类型 " 的 一.EXPLAIN 做MySQL优化,我们要善用 EXPLAIN 查看SQL执行计划. 下面来个简单 ...