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. iOS-RAC从新手开始

    什么是RAC? 其实RAC就是一个简化代码的第三方库ReactiveCocoa,直接用Cocoapods添加到项目里就可以, podfile 文件添加 pod 'ReactiveCocoa',然后终端 ...

  2. Oracle 12cR1 RAC 在VMware Workstation上安装(中)—图形界面安装

    Oracle 12cR1 RAC 在VMware Workstation上安装(中)—图形界面安装 1.1  图形界面安装 1.1.1  安装GRID 安装日志:/u01/app/oraInvento ...

  3. webrtc底层一对一连接过程探索（二）

    一.连接过程继续解读-----fun32解读 1.1 fun32.02 "undefined" != typeof cordova && (N = !0, D = ...

  4. BZOJ 3963: [WF2011]MachineWorks [CDQ分治 斜率优化DP]

    传送门 当然了WF的题uva hdu上也有 你的公司获得了一个厂房N天的使用权和一笔启动资金,你打算在这N天里租借机器进行生产来获得收益.可以租借的机器有M台.每台机器有四个参数D,P,R,G.你可以 ...

  5. 用js实现2048小游戏

    用js实现2048小游戏 笔记仓库:https://github.com/nnngu/LearningNotes 1.游戏简介 2048是一款休闲益智类的数字叠加小游戏.(文末给出源代码和演示地址) ...

  6. 使用Openresty加快网页速度

    新年快乐~~~ 上一篇文章讲到使用多级缓存来减少数据库的访问来加快网页的速度,只是,仍旧没有"嗖"一下就加载出来的感觉,想再优化一下,优化代码什么的已经到了极限.上周无意中看到了o ...

  7. char数组中除去某个元素

    /* 本程序说明: char数组中除去某个元素(其实就是strcpy源码的变形) */ #include <iostream> #include <cassert> #incl ...

  8. Docker Compose容器编排

    Compose是Docker官方的开源项目,可以实现对Docker容器集群的快速编排.Compose 中有两个重要的概念:服务(service):一个应用的容器,实际上可以包括若干运行相同镜像的容器实 ...

  9. springIOC、AOP的一些注解

    springIOC.AOP的一些注解(使用这些注解之前要导入spring框架的一些依赖):    1.注入IOC容器        @Compontent:使用注解的方式添加到ioc容器需要在配置文件 ...

  10. linux服务器ssh、公匙和密钥实战详解

    一..我们先建好一上haiwen用户用来,做为密码钥和SSH对像 二.修改vi /etc/ssh/sshd_config 文件,禁用ROOT远程直接登录. 三.ssh的公钥认证配置,只能用密匙才能登录 ...