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. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

  2. SpringBoot与Mybatis整合方式01（源码分析）

    前言:入职新公司,SpringBoot和Mybatis都被封装了一次,光用而不知道原理实在受不了,于是开始恶补源码,由于刚开始比较浅,存属娱乐,大神勿喷. 就如网上的流传的SpringBoot与Myb ...

  3. 【java学习】spring mvc 公共dao的实现，定义基本的增删改查

    接口类: package com.blog.db.dao; import com.blog.util.Pagination; import java.util.List; public interfa ...

  4. 洛谷 [P2296] 寻找道路

    反向BFS预处理,求出所有符合题意的点,再正向BFS,(注意对于边权恒为一的点,BFS,比SPFA高效) 输入时n与m分清 #include <iostream> #include < ...

  5. 快速傅里叶变换 & 快速数论变换

    快速傅里叶变换 & 快速数论变换 [update 3.29.2017] 前言 2月10日初学,记得那时好像是正月十五放假那一天 当时写了手写版的笔记 过去近50天差不多忘光了,于是复习一下,具 ...

  6. [Miller-Rabin & Pollard-rho]【学习笔记】

    Miller-Rabin & Pollard-rho 很久之前就学过了...今天重学一遍 利用费马小定理,但不能判断伪素数的情况 基于a的伪素数n: \(a^{n-1} \equiv 1 \p ...

  7. 前端系列之CSS基础知识概述

    1.什么是DIV (1).div就是html一个普通标签,进行区域划分.特性:独自占一行.独自不能实现复杂效果.必须结合css样式进行渲染. (2).div通常其是块级元素 (3).div是定义文档中 ...

  8. 读书共享 Primer Plus C-part 12

    第十四章 结构和其他数据形式 1.关于上struct与union 的区别 #include<stdio.h> typedef union Book_u { int pags; int mo ...

  9. Cookie禁用 获取session

    转自:http://blog.csdn.net/u010433704/article/details/40950599 Cookie与 Session,一般认为是两个独立的东西,Session采用的是 ...

  10. gitlab项目迁移

    ALL Git* => Gitlab Nothing, Just copy the git URL to gitlab(类似于 fork) 使用 Git Mirror 無痛轉移 Git Serv ...