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. Power shell 重启IIS

    最近根据项目需要写了一段power shell的代码 ,主要功能是批量重启IIS 具体的 Power shell 服务如下: write-output 'Restarting IIS servers ...

  2. 关于Java中equal 和 == 的区别

    在对Java开发还不熟练的时候,往往很多人都喜欢用==去比较两个对象是否相等,有时候就会出现很奇葩的问题. 其实这类问题并不是奇葩问题,只是我们不够细心而已,在Java中“==”比较两个变量本身的值, ...

  3. python正则实现简单计算器

    利用正则实现计算器 利用正则来实现简单计算器的功能,能够设计计算带括号的加减乘除运算.当然不使用eval等语句. 利用递归: import re from functools import reduc ...

  4. Oracle的一些简单语句

    drop后的表被放在回收站(user_recyclebin)里,而不是直接删除掉.这样,回收站里的表信息就可以被恢复,或彻底清除. 1.通过查询回收站user_recyclebin获取被删除的表信息, ...

  5. 洛谷 [P2825] 游戏

    二分图匹配的匈牙利算法 这道题,如果没有硬石头的限制,那么就与ZJOI 2007矩阵游戏完全一样,但是如果有了硬石头的限制,我们就不能将整行整列作为元素建图,我们可以以硬石头为边界,将每一行.每一列分 ...

  6. 数据提交成功后如何避免alert被window.location.reload()影响

    数据提交成功用alert提示,但页面立马就重载了 alert("提交成功!"); window.location.reload(); 如何避免? 方法一: setTimeout 延 ...

  7. pandas中的分组技术

    目录 1  分组操作 1.1  按照列进行分组 1.2  按照字典进行分组 1.3  根据函数进行分组 1.4  按照list组合 1.5  按照索引级别进行分组 2  分组运算 2.1  agg 2 ...

  8. 剑指offer试题（PHP篇二）

    6.旋转数组的最小数字 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1 ...

  9. request、response的setCharacterEncoding与response的setContentType

    一.request中的setCharacterEncoding方法:作用是用指定的编码集去覆盖request对象中的默认的"ISO-8859-1"编码集,如"UTF-8& ...

  10. Bruce Eckel的资源

    1 GitHub的技术博客 2 On Java 8 – Bruce Eckel 3 artima_weblogs - Bruce Eckel 4 back issues 5 eckel-oo-prog ...