完整代码如下：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>综合图</title>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/highcharts.js"></script>

<script type="text/javascript" src="js/exporting.js"></script>

<script type="text/javascript">

    $(function () {

        $('#container').highcharts({

            chart: {

            },

            title: {

                text: '折线，饼状，条状综合图'

            },

            //x轴

            xAxis: {

                categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']

            },

            tooltip: {

                formatter: function () {

                    var s;

                    if (this.point.name) { // the pie chart

                        s = '' +

                        this.point.name + ': ' + this.y + ' fruits';

                    } else {

                        s = '' +

                        this.x + ': ' + this.y;

                    }

                    return s;

                }

            },

            labels: {

                items: [{

                    html: 'Total fruit consumption',

                    style: {

                        left: '40px',

                        top: '8px',

                        color: 'black'

                    }

                }]

            },

            series: [{

                type: 'column',

                name: 'Jane',

                data: [, , , , ]

            }, {

                type: 'column',

                name: 'John',

                data: [, , , , ]

            }, {

                type: 'column',

                name: 'Joe',

                data: [, , , , ]

            }, {

                type: 'spline',

                name: 'Average',

                data: [, 2.67, , 6.33, 3.33],

                marker: {

                    lineWidth: ,

                    lineColor: Highcharts.getOptions().colors[],

                    fillColor: 'white'

                }

            }, {

                type: 'pie',

                name: 'Total consumption',

                data: [{

                    name: 'Jane',

                    y: ,

                    color: Highcharts.getOptions().colors[] // Jane's color

                }, {

                    name: 'John',

                    y: ,

                    color: Highcharts.getOptions().colors[] // John's color

                }, {

                    name: 'Joe',

                    y: ,

                    color: Highcharts.getOptions().colors[] // Joe's color

                }],

                center: [, ],

                size: ,

                showInLegend: false,

                dataLabels: {

                    enabled: false

                }

            }]

        });

    });

</script>

</head>

<body>

    <div id="container" style="width:850px;height:500px;margin:0 auto"></div>

</body>

</html>

显示出来的效果

现在一个折线，饼状，条状综合图就好了。

highcharts 折线，饼状，条状综合图的更多相关文章

  1. HighCharts之2D堆条状图

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

  2. python中matplotlib绘图封装类之折线图、条状图、圆饼图

    DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...

  3. HighCharts之2D条状图

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

  4. Android图表库MPAndroidChart(八)——饼状图的扩展：折线饼状图

    Android图表库MPAndroidChart(八)--饼状图的扩展:折线饼状图 我们接着上文,饼状图的扩展,增加折现的说明,来看下我们要实现的效果 因为之前对MPAndroidChart的熟悉,所 ...

  5. Excel 2010高级应用-条状图（五）

    Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...

  6. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  7. 关于线段树or 树状树状 在二维平面搞事情！Orz

    第一式:https://ac.nowcoder.com/acm/contest/143/I 题意: 有 n 个点,一个点集 S 是好的,当且仅当对于他的每个子集 T,存在一个右边无限长的矩形,使得这个 ...

  8. jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码

    js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...

  9. BZOJ3688 折线统计【树状数组优化DP】

    Description 二维平面上有n个点(xi, yi),现在这些点中取若干点构成一个集合S,对它们按照x坐标排序,顺次连接,将会构成一些连续上升.下降的折线,设其数量为f(S).如下图中,1-&g ...

随机推荐

  1. HDOJ.2084 数塔（DP）

    数塔 点我挑战题目 题意分析 DP的思想,自上而下计算. [这几天比较忙 有空补上] 代码总览 /* Title:HDOJ.2084 Author:pengwill Date:2017-1-14 */ ...

  2. HDOJ.1009 FatMouse' Trade (贪心)

    FatMouse' Trade 点我挑战题目 题意分析 每组数据,给出有的猫粮m与房间数n,接着有n行,分别是这个房间存放的食物和所需要的猫粮.求这组数据能保证的最大的食物是多少? (可以不完全保证这 ...

  3. bzoj1045: [HAOI2008] 糖果传递（思维题）

    首先每个人一定分到的糖果都是所有糖果的平均数ave. 设第i个人给i-1个人Xi个糖果,则有Ai-Xi+X(i+1)=ave. 则A1-X1+X2=ave,A2-X2+X3=ave,A3-X3+X4= ...

  4. [CEOI2017]Mousetrap

    P4654 [CEOI2017]Mousetrap 博弈论既视感 身临其境感受耗子和管理的心理历程. 以陷阱为根考虑.就要把耗子赶到根部. 首先一定有解. 作为耗子,为了拖延时间,必然会找到一个子树往 ...

  5. 专题训练之AC自动机

    推荐博客:http://www.cnblogs.com/kuangbin/p/3164106.html AC自动机小结 https://blog.csdn.net/creatorx/article/d ...

  6. jq的each理解

    1种 通过each遍历li 可以获得所有li的内容 <!-- 1种 --> <ul class="one"> <li>11a</li> ...

  7. 理解LINUX LOAD AVERAGE的误区

    一直不解,为什么io占用较高时,系统负载也会变高,偶遇此文,终解吾惑. uptime和top等命令都可以看到load average指标,从左至右三个数字分别表示1分钟.5分钟.15分钟的load a ...

  8. HDU1281： 棋盘游戏（二分图匹配）

    棋盘游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  9. c++模板类编译错误

    最近想写一个c++模板类,实现一个有向图.依据惯例,类在头文件中声明,类的实现写在源文件中.可是编译的时候出现了如下错误: undefined reference to 通过谷歌发现,这是一个很常见的 ...

  10. Log4J使用实例---日志进行邮件发送或是存入数据库

    部分转摘:http://blog.csdn.net/azhao_dn/article/details/9118667 1.根类别(在类别层次结构的顶部,即全局性的日志级别) 配置根Logger,其语法 ...