完整代码如下：

<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. HDU.2640 Queuing (矩阵快速幂)

    HDU.2640 Queuing (矩阵快速幂) 题意分析 不妨令f为1,m为0,那么题目的意思为,求长度为n的01序列,求其中不含111或者101这样串的个数对M取模的值. 用F(n)表示串长为n的 ...

  2. HDOJ.2072 单词数（map）

    单词数 点我挑战题目 点我一起学习STL-MAP 题意分析 给出一行单词,判断这行有不同种的单词多少个,用map可以轻松解决. 代码总览 /* Title:HDOJ.2072 Author:pengw ...

  3. pandas模块（数据分析）------dataframe

    DataFrame DataFrame是一个表格型的数据结构,含有一组有序的列,是一个二维结构. DataFrame可以被看做是由Series组成的字典,并且共用一个索引. 一.生成方式 import ...

  4. *和&的使用

    给变量起一个别名: int a = 2; int &b = a; 取a的地址,实参是一个指针: void chage(int *data) { } void main() { int a = ...

  5. Spark Streaming 的一些问题

    Spark Streaming 的一些问题,做选型前关注这些问题可以有效的降低使用风险. checkpoint checkpoint 是个很好的恢复机制.但是方案比较粗暴,直接通过序列化的机制写入到文 ...

  6. 使用VS2010编译MongoDB C++驱动详解

    最近为了解决IM消息记录的高速度写入.多文档类型支持的需求,决定使用MongoDB来解决. 考虑到MongoDB对VS版本要求较高,与我现有的VS版本不兼容,在leveldb.ssdb.redis.h ...

  7. LightOJ 1023 Discovering Permutations 水题

    http://www.lightoj.com/volume_showproblem.php?problem=1023 题意:26字母全排列 思路:用next_permutation或者思维想一下都可以 ...

  8. Epoll模型讲解

    1.流模型 首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作的内核对象. 不管是文件,还是套接字,还是管道,我们都可以把他们看作流. 之后我们来讨论I/O的操作, ...

  9. 51nod 1486 大大走格子——dp

    有一个h行w列的棋盘,里面有一些格子是不能走的,现在要求从左上角走到右下角的方案数. Input 单组测试数据. 第一行有三个整数h, w, n(1 ≤ h, w ≤ 10^5, 1 ≤ n ≤ 20 ...

  10. 20155335俞昆《java程序设计》第三周总结

    20155335  2006-2007-2  <Java程序设计>第三周学习总结 ##  教材学习内容总结 首先,关键是区基本类型和类类型,,产生对象必须定义类,类是一个概念,并不存在,对 ...